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

Question

CardView 通常只用来装饰一个元素。但有时您需要将几个项目包装到这个小部件中。例如，在 Inbox 应用中。

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

Answer 1

TL;DR:

托管元素的不是一个 CardView，而是几个连续的CardView，具有不同的边距: p>

对于组中顶部的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"

关于 Inbox 应用:

这是应用程序的层次结构(当然，简化了一点):

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

即使没有抽屉导航和折叠卡片，完整结构也如下所示:

当您深入了解 RecyclerView 的项目结构时，有趣的部分就开始了。
Google 使用了 2 种类型的项目 - 分隔符(右侧带有日期和操作)和卡片。即使卡片内部有不同的内容，从 ViewHolder 的角度来看 - RecyclerView 有 2 种类型的项目)

1. 分隔符

   这只是一个LinearLayout，里面有TextView和ImageView:

   

2. 元素卡片
   

   它的布局根据被绑定(bind)到ViewHolder的内容进行调整例如，像焦点这样的简单电子邮件是一个 CardView，其中嵌套了 ImageView 和 3 个 TextView:

   

所以剩下的唯一问题是，谷歌人如何将卡片“合并”成一张大卡片并避免额外的阴影。

诀窍很简单:

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>

希望对你有帮助