将项目分组到CardView的最佳做法是什么？

Question

CardView通常用于装饰一个元素.但有时你需要将几个项目包装到这个小部件中.例如,在收件箱应用程序中.

那么最好的方法是什么？它可以通过自定义LayoutManager甚至自定义ItemDecoration来实现.自定义LayoutManager的实现不是一件容易的事(完全支持动画,项目装饰等).在第二个选项中,必须手动实现边界的绘制,忽略CardView(和Android-L提升)实现.

Answer 1

TL; DR:

这不是一个 CardView它承载的元素,这是几个连续的CardView小号 有不同幅度:

对于CardView组中的顶部:

    android:layout_marginTop="5dp"
    android:layout_marginLeft="5dp"
    android:layout_marginRight="5dp"
    android:layout_marginBottom="0dp"
    card_view:cardCornerRadius="0dp"

对于CardView组中的底部:

    android:layout_marginTop="0dp"
    android:layout_marginLeft="5dp"
    android:layout_marginRight="5dp"
    android:layout_marginBottom="5dp"
    card_view:cardCornerRadius="0dp"

中间的一个,设置边距Top&Bottom为0:

    android:layout_marginTop="0dp"
    android:layout_marginLeft="5dp"
    android:layout_marginRight="5dp"
    android:layout_marginBottom="0dp"
    card_view:cardCornerRadius="0dp"

关于收件箱应用:

这是app的层次结构(当然,简化了一下):

| android.support.v4.widget.DrawerLayout
--- | FrameLayout
------- | android.support.v7.widget.RecyclerView
------- | android.support.v7.widget.Toolbar
- - | android.support.design.widget.NavigationView

完整的结构,即使没有导航抽屉和折叠卡看起来像:

当你深入了解RecyclerView物品结构时,有趣的部分开始了.
Google使用了两种类型的项目 - 分隔符(右侧有日期和操作)和卡片.即使卡片里面有不同的内容,从ViewHolder视角来看 - RecyclerView有两种类型的项目)

1. 分隔器

   这一次仅仅是一个LinearLayout与TextView和ImageView内:

   

2. 物品卡
   

   其布局调整基于所述内容被绑定到ViewHolder .例如,像在焦点简单的电子邮件是一个CardView具有嵌套ImageView和3 TextViewS:

   

所以唯一的问题就是,Google员工如何将卡"合并"成一张大卡并避免额外的阴影.

诀窍很简单:

1. 一切CardView都有card_view:cardCornerRadius="0dp"

2. 前CardView组的有底部顶级/左/右页边距设置5DP,但0dp:

   android:layout_marginTop="5dp"
   android:layout_marginLeft="5dp"
   android:layout_marginRight="5dp"
   android:layout_marginBottom="0dp"
   

3. CardView该组底部的左/右/底部边距设置为5dp,顶部为0dp:

   android:layout_marginTop="0dp"
   android:layout_marginLeft="5dp"
   android:layout_marginRight="5dp"
   android:layout_marginBottom="5dp"
   

4. 中学CardView组的有上/下左/右页边距设置5DP,但0dp:

   android:layout_marginTop="0dp"
   android:layout_marginLeft="5dp"
   android:layout_marginRight="5dp"
   android:layout_marginBottom="0dp"
   

而已!

这是我写的一个小例子:

布局(有棘手的边距)

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:padding="16dp"
    xmlns:card_view="http://schemas.android.com/apk/res-auto">
    <android.support.v7.widget.CardView
        android:layout_gravity="center"
        android:layout_width="match_parent"
        android:layout_height="100dp"
        android:layout_marginTop="5dp"
        android:layout_marginLeft="5dp"
        android:layout_marginRight="5dp"
        android:layout_marginBottom="0dp"
        card_view:cardCornerRadius="0dp"
        card_view:contentPadding="10dp">
        <FrameLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent">
            <TextView
                android:text="card1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textStyle="bold"/>
        </FrameLayout>
    </android.support.v7.widget.CardView>
    <android.support.v7.widget.CardView
        android:layout_gravity="center"
        android:layout_width="match_parent"
        android:layout_height="100dp"
        android:layout_marginTop="0dp"
        android:layout_marginLeft="5dp"
        android:layout_marginRight="5dp"
        android:layout_marginBottom="0dp"
        card_view:cardCornerRadius="0dp"
        card_view:contentPadding="10dp">
        <FrameLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent">
            <TextView
                android:text="card2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textStyle="bold"/>
        </FrameLayout>
    </android.support.v7.widget.CardView>
    <android.support.v7.widget.CardView
        android:layout_gravity="center"
        android:layout_width="match_parent"
        android:layout_height="100dp"
        android:layout_marginTop="0dp"
        android:layout_marginLeft="5dp"
        android:layout_marginRight="5dp"
        android:layout_marginBottom="5dp"
        card_view:cardCornerRadius="0dp"
        card_view:contentPadding="10dp">
        <FrameLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent">
            <TextView
                android:text="card3"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textStyle="bold"/>
        </FrameLayout>
    </android.support.v7.widget.CardView>
</LinearLayout>

我希望,这有帮助