将项目分组到CardView的最佳实践是什么? [英] What is the best practice to group items into CardView?

问题描述

CardView通常用于修饰一个元素.但是有时您需要将几个项目包装到此小部件中.例如，在收件箱"应用中一样.

CardView usually used to decorate exactly one element. But sometimes you need to wrap into this widget several items. Like in Inbox app, for example.

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

So what is the best way to do this? It can be implemented via custom LayoutManager or even custom ItemDecoration. Implementation of custom LayoutManager is not an easy task(with full support of animations, item decorations, etc). In the second option, the drawing of the boundaries must be implemented manually, ignoring CardView(and Android-L elevation) implementation.

推荐答案

TL; DR:

不是一个 CardView承载元素，而是多个连续的CardView s ，具有不同的边距:

TL;DR:

It's not one CardView which hosts elements, it's several successive CardViews with different margins:

对于组中排名靠前的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"

以及中间的一个，将上边和下边的边距设置为0:

And the middle one, as set margins Top&Bottom to 0:

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

关于收件箱应用:

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

About Inbox app:

This is hierarchy of the app (of course, simplified a bit):

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

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

甚至没有导航抽屉的完整结构折叠后的卡片看起来像:

The full structure even without navigation drawer & collapsed cards looks like:

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

The interesting part starts, when you dive into the RecyclerView's items structure.
There're 2 types of items Google uses - the separators (with date and actions on the right) and the cards. Even though cards have different content inside, from the ViewHolder perspective - RecyclerView has 2 types of items)

1. 分隔符

这只是一个内部带有TextView和ImageView的LinearLayout:

This one is just a LinearLayout with TextView and ImageView inside:

物品卡

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

Its layout adjusts based on the content being bind to the ViewHolder For example, simple email like the one in focus is a CardView with nested ImageView and 3 TextViews:

剩下的唯一问题是，Google家伙如何将卡片合并"成一张大卡片，并避免多余的阴影.

So the only question left, how do Google-guys "merge" cards into one big card and avoid extra shadows.

诀窍很简单:

1. 所有CardView都有card_view:cardCornerRadius="0dp"
该组的

2. 顶部CardView的上/左/右边距设置为5dp，底部的边距设置为0dp:

1. All CardView's have card_view:cardCornerRadius="0dp"

2. Top CardView of the group have margin set 5dp for top/left/right, but 0dp for the bottom:

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

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

Bottom CardView of the group have margin set 5dp for left/right/bottom, but 0dp for the top:

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

该组的

中间CardView的左右边距设置为5dp，顶部/底部的边距设置为0dp:

Middle CardView of the group have margin set 5dp for left/right, but 0dp for the top/bottom:

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

就是这样！

这是我写的一个小例子:

Here's a small example I've wrote:

布局(页边距不方便)

<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的最佳实践是什么?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！