Какова наилучшая практика группировки элементов в CardView?

CardView обычно используется для украшения именно одного элемента. Но иногда вам нужно обернуть в этот виджет несколько элементов. Например, в приложении "Входящие".

Так что лучший способ сделать это? Он может быть реализован через пользовательский LayoutManager или даже пользовательский ItemDecoration. Реализация пользовательского LayoutManager - непростая задача (с полной поддержкой анимации, украшения предметов и т.д.). Во втором варианте чертеж границ должен быть реализован вручную, игнорируя реализацию CardView (и повышение уровня Android-L).

Ответы

Ответ 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 & Bottom to 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

Полная структура даже без навигационного ящика и свернутых карт выглядит так:

Интересная часть начинается, когда вы погружаетесь в структуру элементов RecyclerView.
Существует два типа объектов, которые использует Google - разделители (с датой и действиями справа) и карты. Несмотря на то, что карты имеют различный контент внутри, с точки зрения ViewHolder - RecyclerView имеет 2 типа элементов)

Разделитель

Это только a LinearLayout с TextView и ImageView внутри:
Карточка позиций

Его макет настраивается на основе содержимого, связывающегося с 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 для left/right/bottom, но 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>

Надеюсь, это поможет