android - personalizado - Sugerencias de diseño de materiales para listas con avatar, texto e ícono
crear un emoji a partir de una imagen (2)
Aquí hay un mosaico listo para pegar en el diseño del material para una lista de tres líneas:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android = "http://schemas.android.com/apk/res/android"
xmlns:tools = "http://schemas.android.com/tools"
android:layout_width = "match_parent"
android:layout_height = "88dp"
android:layout_marginTop = "8dp"
android:orientation = "vertical">
<ImageView
android:id = "@+id/avatar"
android:layout_width = "40dp"
android:layout_height = "40dp"
android:layout_marginBottom = "20dp"
android:layout_marginLeft = "16dp"
android:layout_marginRight = "16dp"
android:layout_marginTop = "20dp"
android:background = "@drawable/avatar"
android:contentDescription = "Avatar"/>
<TextView
android:id = "@+id/avatar_text"
android:layout_width = "40dp"
android:layout_height = "40dp"
android:layout_marginBottom = "20dp"
android:layout_marginLeft = "16dp"
android:layout_marginRight = "16dp"
android:layout_marginTop = "20dp"
android:gravity = "center_vertical|center_horizontal"
android:maxLines = "1"
android:text = "AV"
android:textColor = "@color/white_dark"
android:textSize = "16sp"
android:fontFamily="sans-serif"
android:textStyle = "bold"/>
<LinearLayout
android:layout_width = "match_parent"
android:layout_height = "match_parent"
android:layout_marginBottom = "16dp"
android:layout_marginEnd = "56dp"
android:layout_marginStart = "72dp"
android:layout_marginTop = "16dp"
android:orientation = "vertical">
<LinearLayout
android:layout_width = "match_parent"
android:layout_height = "wrap_content"
android:orientation = "horizontal">
<TextView
android:id = "@+id/first_line"
android:layout_width = "wrap_content"
android:layout_height = "wrap_content"
android:layout_marginEnd = "16dp"
android:ellipsize="marquee"
android:singleLine="true"
android:text = "This is the title line"
android:textColor = "@color/black_light"
android:textSize = "16sp"
android:fontFamily="sans-serif"/>
</LinearLayout>
<LinearLayout
android:layout_width = "match_parent"
android:layout_height = "wrap_content"
android:orientation = "horizontal">
<TextView
android:id = "@+id/second_line"
android:layout_width = "wrap_content"
android:layout_height = "wrap_content"
android:ellipsize="marquee"
android:singleLine="true"
android:textColor = "@color/discreet_dark"
android:textSize = "14sp"
android:fontFamily="sans-serif"
tools:text = "This is the second line"/>
</LinearLayout>
<LinearLayout
android:layout_width = "match_parent"
android:layout_height = "wrap_content"
android:orientation = "horizontal">
<TextView
android:id = "@+id/third_line"
android:layout_width = "wrap_content"
android:layout_height = "wrap_content"
android:ellipsize="marquee"
android:singleLine="true"
android:textColor = "@color/discreet_dark"
android:textSize = "14sp"
android:fontFamily="sans-serif"
tools:text = "This is the third line"/>
</LinearLayout>
</LinearLayout>
<TextView
android:id = "@+id/minor_info"
android:layout_width = "wrap_content"
android:layout_height = "wrap_content"
android:layout_alignParentEnd = "true"
android:layout_marginEnd = "16dp"
android:layout_marginTop = "20dp"
android:maxLines = "1"
android:maxWidth = "40dp"
android:text = "19 min"
android:textColor = "@color/discreet_dark"
android:textSize = "12sp"
android:fontFamily="sans-serif"/>
<ImageView
android:id = "@+id/favourite"
android:layout_width = "24dp"
android:layout_height = "24dp"
android:layout_alignParentBottom = "true"
android:layout_alignParentEnd = "true"
android:layout_marginBottom = "16dp"
android:layout_marginLeft = "16dp"
android:layout_marginRight = "16dp"
android:contentDescription = "Favourite"
tools:src = "@drawable/favourite_checked"/>
<View
android:layout_width = "match_parent"
android:layout_height = "1dp"
android:layout_alignParentBottom="true"
android:layout_marginStart = "72dp"
android:background = "@color/discreet_light"/>
</RelativeLayout>
Quiero crear una aplicación de Android Material Designed para el Material Designed y trato de seguir todas las sugerencias de Google sobre cómo hacer diseños agradables especialmente para el nuevo RecylcerView . The RecyclerView tiene avatar ImageView , título y subtítulos TextView y el icono de acción ImageView .
¿Qué valores debo poner en las características de ImageView para el width y la height para que admita diferentes tamaños y densidades de pantalla, y qué tamaño de esos elementos extraíbles debo elegir del paquete de iconos del sistema?
Sugerencia para 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:
# 1 Dos artículos de línea:
Layout minHeight es 72dp, layout_height es wrap_content . El tamaño del icono es 40dp (generalmente es un mapa de bits circular). Icon tiene un margen superior de 16dp y un margen izquierdo de 16dp, no hay otro.
Ambos TextView están en TextView orientado verticalmente y centrado verticalmente. Este diseño tiene 16dp de margen izquierdo y 16dp de margen derecho. Esto le permitirá eliminar imágenes y aún tener 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 de texto tiene 16dp en la parte superior y 16dp en la parte inferior del relleno (tiene que ser relleno aquí porque el margen inferior no se respeta para los hijos de RelativeLayout , y es útil otras veces). Ahora puede colocar varias líneas en el segundo TextView y todo el elemento se ampliará muy bien.
No olvides configurar layout_toRightOf="@+id/icon" y layout_alignWithParentIfMissing="true" en el diseño del texto. Si tiene otro ícono (o widget) a la derecha, agregue layout_toLeftOf="@+id/right_icon" . Si no, usa layout_alignParentRight="true" . Esto extenderá el diseño para ocupar todo el espacio disponible. O puede usar LinearLayout .
Pon esto en una lista en tu á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 única en el contenido
Igual que el número 1 con las siguientes diferencias: layout_height o layout_height está establecido en 56dp. No use márgenes verticales o relleno, simplemente centre todo verticalmente. Use solo un texto de línea.
Úselo en una lista con un relleno de 8dp o un encabezado de 48dp en la parte superior y un relleno de 8dp en la parte inferior. De lo contrario, se verá "cortado".
# 3 elementos de línea única en los menús
Igual que el número 2 con las siguientes diferencias: La altura es de 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á colocar cualquier ícono de 1dp a 40dp sin alterar la balanza (no tiene que cambiar el espacio entre el ícono y el texto porque se mantiene 40dp como en casos anteriores).
Lo uso en un cajón de navegación y menús.
Editar nota
Las especificaciones dicen que los márgenes de los artículos izquierdo y derecho deben ser de 24dp en lugar de 16dp para las tabletas (sw600dp). Puede resolver esto agregando relleno de diseño de elementos izquierdo y derecho 8dp en tabletas (use valores dinámicos).
Las especificaciones también dicen que el divisor entre los elementos (si está presente) debe ser parte del artículo. Debe definir el "dimeno total del margen izquierdo" de 72dp para teléfonos y 80dp para tabletas y usarlo como margen izquierdo para la vista del divisor. El segundo problema es que en las tabletas tienes un relleno derecho de 8dp. Digo esto: si usas ListView , atornilla las especificaciones y configura un divisor personalizado, que se pintará entre los elementos. Si usa RecyclerView , escriba un buen ItemDecorator que agregará el divisor sobre el elemento.
EDIT 2
?listPreferredPaddingLeft y ?listPreferredPaddingRight se expandirán a 16dp en teléfonos y 24dp en tabletas (respetando la configuración de RTL). Puede usar estos valores para el relleno izquierdo y derecho en los elementos de la lista. Luego, 40 pd reservados para el icono, el espaciado de 16 pb y finalmente el contenido.