Question

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

enter image description here

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

Answer 1

TL; DR：

一个 CardView托管元素，连续几个CardView s ，边距不同：

对于组中的顶级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＆amp; Bottom为0：

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

关于收件箱应用：

这是应用程序的层次结构（当然，简化了一点）：

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

完整的结构，即使没有导航抽屉和＆amp;折叠的卡片看起来像：

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

<强>分隔

这只是LinearLayout内有TextView和ImageView的内容：
项目卡

其布局根据 bind 的内容调整为ViewHolder 例如，像焦点一样的简单电子邮件是CardView，其中包含嵌套ImageView和3 TextView s：

因此，唯一的问题是，Google员工如何将卡“合并”成一张大卡并避免额外的阴影。

诀窍很简单：

所有CardView都有card_view:cardCornerRadius="0dp"

该组的最高CardView的上限/左/右边距设置为5dp，底部为0dp：

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

该组的底部CardView的左/右/下边距设置为5dp，顶部为0dp：

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

该组的中间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>

我希望，这有帮助

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

1 个答案:

TL; DR：

关于收件箱应用：