Sugerencias de diseño de material para listas con avatar, texto e icono
Quiero crear la aplicación Android de Material Designed y trato de seguir todas las sugerencias de Google acerca de hacer diseños agradables especialmente para el nuevo RecylcerView . El RecyclerView tiene avatar ImageView , título y subtítulo TextView y el icono de acción ImageView .
¿Qué valores debo poner en las propiedades de ImageViews para el width y la height por lo que admite diferentes tamaños de pantalla y densidades, y qué tamaño de esas líneas se debe elegir en el paquete de iconos del sistema?
- Activar la vista del reciclador
- RecyclerView altura del contenido
- ¿Por qué RecyclerView onBindViewHolder se llama una sola vez?
- Vista del reciclador que muestra un solo elemento
- NotifyItemChanged () hace que el RecyclerView desplace y salte a UP
Material-diseño-iconos-1.0.1
Sugerencia para las listas:
??? En código xml son las cosas desconocidas que no sé qué poner allí:
XML:
<?xml version="1.0" encoding="utf-8"?> <android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android" xmlns:card_view="http://schemas.android.com/apk/res-auto" android:id="@+id/card_view_friend" android:layout_width="wrap_content" android:layout_height="wrap_content" card_view:cardCornerRadius="4dp" card_view:cardUseCompatPadding="true"> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="wrap_content">??? <ImageView android:id="@+id/friend_profile_picture" android:layout_width="40dp"??? android:layout_height="40dp"??? android:layout_alignParentLeft="true" android:layout_margin="16dp" android:layout_centerVertical="true" android:src="@drawable/ic_person_grey600_48dp"/>??? <TextView android:id="@+id/friend_name" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_toLeftOf="@+id/friend_online_imageview" android:layout_toRightOf="@+id/friend_profile_picture" android:paddingTop="20dp" android:text="@string/plain_text_for_preview" android:textSize="16sp"/> <TextView android:id="@+id/friend_state" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_below="@+id/friend_name" android:layout_toLeftOf="@id/friend_online_imageview" android:layout_toRightOf="@+id/friend_profile_picture" android:paddingBottom="20dp" android:text="@string/plain_text_for_preview" android:textSize="14sp"/> <ImageView android:id="@+id/friend_online_imageview" android:layout_width="wrap_content"??? android:layout_height="wrap_content"??? android:layout_alignParentRight="true" android:layout_margin="16dp" android:layout_centerVertical="true" android:src="@drawable/ic_messenger_grey600_18dp"/>??? </RelativeLayout> </android.support.v7.widget.CardView>
AVANCE:
- Recycler View Excepción grave: java.lang.ArrayIndexOutOfBoundsException
- Cómo implementar elementos expandibles con LinearLayoutManager (introducido con Android L)
- Diferentes elementos (dinámicos) de altura en GridLayoutManager
- Adaptador RecyclerView que toma valores erróneos
- Cómo implementar load más recyclerview en android
- Eliminar elementos de RecyclerView
- El cambio de color de un solo dibujable en RecyclerView cambiará todos los dibujables
# 1 Dos líneas de pedido:
Layout minHeight es 72dp, layout_height es wrap_content . El tamaño del icono es 40dp (generalmente es un mapa de bits de círculo). Icono tiene 16dp margen superior y 16dp margen izquierdo, no otro.
Ambos TextView s están en un LinearLayout orientado verticalmente y centrado verticalmente. Este diseño tiene 16dp margen izquierdo y 16dp margen derecho. Esto le permitirá eliminar la imagen y todavía tiene márgenes laterales intactos. La primera línea tiene típicamente textApperance="@style/TextAppearance.AppCompat.Body2" y la segunda línea tiene Body1 . El diseño del texto tiene 16dp superior y 16dp inferior relleno (tiene que ser relleno aquí porque el margen inferior no se respeta para los niños de RelativeLayout – y es útil otras veces). Ahora usted puede poner varias líneas en el segundo TextView y todo el elemento se ampliará muy bien.
No olvide establecer layout_toRightOf="@+id/icon" y layout_alignWithParentIfMissing="true" en el diseño del texto. Si tiene otro icono (o widget) a la derecha, añada layout_toLeftOf="@+id/right_icon" . Si no se usa layout_alignParentRight="true" . Esto estirará el diseño para ocupar todo el espacio disponible. O puede utilizar LinearLayout .
Coloque esto en una lista en su área de contenido. La lista no tiene que tener ningún relleno en la parte superior o inferior, se verá bien.
# 2 Elementos de línea individuales en el contenido
Igual que el número 1 con las siguientes diferencias: layout_height o layout_height se establece en 56dp. No utilice márgenes verticales o relleno, simplemente centre todo verticalmente. Utilice sólo una línea de texto.
Utilice esto en una lista con 8dp relleno o 48dp cabecera en la parte superior y 8dp relleno en la parte inferior. De lo contrario se verá "cortado".
# 3 Elementos de una sola línea en los menús
Igual que el número 2 con las siguientes diferencias: La altura es 48dp. El icono es 24dp. El icono debe tener los siguientes atributos:
android:layout_width="40dp" android:layout_height="wrap_content" android:scaleType="fitStart"
Esto le permitirá poner cualquier icono de 1dp a 40dp sin alterar el equilibrio (usted no tiene que cambiar el espacio entre el icono y el texto, ya que se mantiene 40dp como en los casos anteriores).
Lo uso en un cajón de navegación y menús.
Editar nota
Las especificaciones dicen que los márgenes izquierdo y derecho del artículo deben ser 24dp en vez de 16dp para las tabletas (sw600dp). Puedes solucionar esto agregando el relleno izquierdo y derecho de la disposición del artículo 8dp en las tabletas (utilice valores dinámicos).
Las especificaciones también dicen que el divisor entre los elementos (si está presente) debe ser parte del elemento. Tienes que definir el "margen de margen total" de 72dp para teléfonos y 80dp para tabletas y usarlo como margen izquierdo para la vista de divisor. El segundo problema es que en las tabletas tiene un relleno derecho de 8dp. Digo esto: Si utiliza ListView , atornille las especificaciones y establecer un divisor personalizado, que se pintará entre los elementos. Si utiliza RecyclerView , escriba un buen ItemDecorator que agregará el divisor sobre el elemento.
EDIT 2
?listPreferredPaddingLeft y ?listPreferredPaddingRight se expandirá a 16dp en teléfonos y 24dp en tabletas (en honor a la configuración de RTL). Puede utilizar estos valores para el relleno izquierdo y derecho en los elementos de la lista. A continuación, 40dp reservado para el icono, 16dp espaciado y, finalmente, el contenido.