¿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.
- ¿Puede utilizar xmlns en los estilos para definir el radio de la esquina cardView?
- ¿Se puede usar cardview para el elemento listview y cómo
- RecyclerView dentro de ScrollView no funciona
- ¿Por qué utilizar un CardView en lugar de un RelativeLayout o LinearLayout?
- Cardview con separadores en ella
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).
- Cómo agregar la funcionalidad de deslizar en Android CardView?
- Android pone Cardview en la parte superior de Cardview padre en RelativeLayout
- Android CardView con un color de sombra personalizado
- LinearLayout marcado si se utiliza en CardView
- Excepción: android.view.InflateException: Línea de archivo XML binario # 2: Error al inflacionar la clase android.support.v7.widget.CardView
- Cardview - Establece diferentes colores de fondo para cada elemento
- CardView va encima de FrameLayout, pero declaró primero
- Cambiar el color de fondo de CardView mediante programación
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:
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 ViewHolder
– RecyclerView
tiene 2 tipos de elementos)
-
Separador
Este es sólo un
LinearLayout
conTextView
yImageView
dentro: -
Tarjeta del artículo
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 unCardView
conImageView
anidado y 3TextView
:
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:
- Todos los
CardView
tienencard_view:cardCornerRadius="0dp"
-
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"
-
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"
-
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:
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
- Grabe vídeo con un tamaño de vista previa diferente al del archivo de vídeo resultante
- Android encuentra la ubicación GPS una vez, muestra el diálogo de carga