¿Cuál es la mejor práctica para agrupar elementos en CardView?

CardView usualmente se utiliza para decorar exactamente un elemento. Pero a veces necesitas incluir en este widget varios elementos. Al igual que en la aplicación Bandeja de entrada, por ejemplo.

Introduzca aquí la descripción de la imagen

Entonces, ¿cuál es la mejor manera de hacer esto? Se puede implementar a través de LayoutManager personalizado o incluso ItemDecoration personalizado. Implementación de LayoutManager personalizado no es una tarea fácil (con pleno apoyo de animaciones, decoraciones de artículos, etc). En la segunda opción, el dibujo de los límites debe implementarse manualmente, ignorando la implementación de CardView (y Android-L elevation).

TL, DR:

No es un CardView que aloja elementos, es varios CardView sucesivos con márgenes diferentes:

Para el CardView superior en el grupo:

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

Para la parte inferior CardView en el grupo:

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

Y el medio, como los márgenes establecidos Top & Bottom a 0:

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

Acerca de la aplicación Inbox:

Esta es la jerarquía de la aplicación (por supuesto, simplificado un poco):

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

La estructura completa incluso sin el cajón de la navegación y las tarjetas colapsadas parece: Introduzca aquí la descripción de la imagen

La parte interesante comienza, cuando usted se zambulle en la estructura de los objetos de RecyclerView .
Hay dos tipos de elementos que Google utiliza: los separadores (con fecha y acciones a la derecha) y las tarjetas. A pesar de que las tarjetas tienen contenido diferente dentro, desde la perspectiva ViewHolderRecyclerView tiene 2 tipos de elementos)

  1. Separador Introduzca aquí la descripción de la imagen

    Este es sólo un LinearLayout con TextView y ImageView dentro:

    Introduzca aquí la descripción de la imagen

  2. Tarjeta del artículo
    Introduzca aquí la descripción de la imagen

    Su diseño se ajusta en función del contenido que se enlaza con el ViewHolder Por ejemplo, un correo electrónico simple como el que está en foco es un CardView con ImageView anidado y 3 TextView :

    Introduzca aquí la descripción de la imagen

Así que la única pregunta que queda, ¿cómo Google-chicos "combinar" las tarjetas en una gran tarjeta y evitar sombras adicionales.

El truco es realmente simple:

  1. Todos los CardView tienen card_view:cardCornerRadius="0dp"
  2. Top CardView del grupo tiene margen establecido 5dp para arriba / izquierda / derecha, pero 0dp para la parte inferior:

     android:layout_marginTop="5dp" android:layout_marginLeft="5dp" android:layout_marginRight="5dp" android:layout_marginBottom="0dp" 
  3. Bottom CardView del grupo tiene margen establecido 5dp para izquierda / derecha / inferior, pero 0dp para la parte superior:

     android:layout_marginTop="0dp" android:layout_marginLeft="5dp" android:layout_marginRight="5dp" android:layout_marginBottom="5dp" 
  4. Media CardView del grupo tiene margen establecido 5dp para izquierda / derecha, pero 0dp para la parte superior / inferior:

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

¡Eso es!

He aquí un pequeño ejemplo que he escrito:

Introduzca aquí la descripción de la imagen

El diseño (con márgenes difíciles)

 <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> 

Espero que ayude

  • Cómo traer imageView delante de cardview? Cuando ambos son de Disposición Relativa childs
  • ¿Por qué explotan ViewRecycler onMeasure?
  • ¿Cómo animar entre CardView a estilo plano EditText, como se muestra en la aplicación Dialer en Lollipop?
  • Establecimiento de elevación en XML en AppCompat CardView en Android 5.0
  • ColorDrawable no se puede convertir en android.support.v7.widget.RoundRectDrawableWithShadow
  • Arrastrar y soltar entre dos RecyclerView
  • No se puede obtener la forma exacta del círculo cuando se utiliza la vista de tarjeta
  • AsyncTask cargando la imagen RecyclerView
  • Población animada de RecyclerView
  • Contenido dinámico dentro de una lista en Android
  • No hay adaptador conectado; Saltar el diseño
  • FlipAndroid es un fan de Google para Android, Todo sobre Android Phones, Android Wear, Android Dev y Aplicaciones para Android Aplicaciones.