Material Android alineando la línea de base de la fuente con una cuadrícula de 4dp

La especificación de diseño de material de Android dice "Alineación de tipos a una cuadrícula de 4 puntos base" ( http://www.google.com/design/spec/layout/metrics-and-keylines.html# )

También dice en los gráficos de ejemplo que una fila en una lista debería tener 72dp de alto.

También indica diferentes estilos de fuente y qué tamaño debe tener la fuente y cuál debe ser su principal ( http://www.google.com/design/spec/style/typography.html#typography-standard-styles ).

Estoy tratando de aplicar todas estas reglas a mi aplicación para ajustar el diseño de una fila en mi lista sin embargo no sé cómo el espacio de los cuadros de texto en mi fila.

Tengo 3 líneas de texto para mostrar en cada una de mis filas

Línea de rumbo uno – tamaño 14sp Detalles línea dos – tamaño 12sp Detalles línea tres – tamaño 12sp

¿Cómo me aseguro de que la línea de base del texto en cada uno de estos cuadros de texto se alinee con la cuadrícula? No puedo alinear la parte inferior del cuadro de texto, ya que no es la línea de base, la parte inferior del cuadro de texto es la línea de base + descenso ¿no?

Necesito espaciar las 3 líneas de texto lo más uniformemente posible, pero asegúrese de que sus líneas de base se alineen con la cuadrícula.

No creo que pueda usar simplemente relleno / márgenes, ya que esto no garantiza que las líneas de base de cada una de las líneas de texto se alineen con la cuadrícula.

Además, cuando hago todos estos cálculos, necesito asegurarme de que la altura de la fila sea de 72dp (para un dispositivo mdpi con tamaño de fuente normal especificado).

Finalmente, ¿cómo puedo especificar el líder? A partir de lo que entiendo este es el espacio de la línea de base del texto de la fila arriba a la parte superior del texto más alto en la fila inferior. Una vez más no puedo usar el relleno / margen, ya que esto no es de la línea de base.

Introduzca aquí la descripción de la imagen

Editar: La especificación de material para las listas tiene un poco más de información sobre cómo los mosaicos de la lista deben aparecer cuando tiene 3 líneas de texto. Http://www.google.es/design/spec/components/lists.html#lists-keylines

Pero todavía no indica cómo las 3 líneas del texto se colocan realmente verticalmente de modo que sus líneas de base alineen en la rejilla 4dp. Introduzca aquí la descripción de la imagen

Actualizar

Sobre la base de mi respuesta hice una pequeña biblioteca . Es mejor adaptado para el uso del mundo real que esta respuesta, así que por favor siéntase libre de comprobarlo.

En lugar de simplemente garantizar la alineación de 4dp, permite establecer el avance en todas las líneas y la primera línea por separado, y el último descenso de línea:

Introduzca aquí la descripción de la imagen

Respuesta anterior, izquierda para propósitos históricos (captura de pantalla grande eliminada)

OK, esto es bastante tarde, pero me di cuenta de cómo hacerlo en la forma menos hackish posible .

Este método aterrizará una vista existente en una cuadrícula de línea de base, dado que su límite superior ya está en la cuadrícula base. Los parámetros de entrada son el paso de la cuadrícula (4dp en píxeles, probablemente leído de los recursos) y la dirección deseada de la línea (por ejemplo, 20dp en píxeles).

Tenga en cuenta que esto no le dará las alturas exactas que necesita, pero hará que el tamaño de TextView determinista (es decir, altura múltiplo del step con la línea de base en la cuadrícula), lo que es mucho más fácil de diseño como se necesita con el uso de entero Márgenes

 private static void setLeading(TextView view, int step, int leading) { // This is to make the behavior more deterministic: remove extra top/bottom padding view.setIncludeFontPadding(false); // Get font metrics and calculate required inter-line extra Paint.FontMetricsInt metrics = view.getPaint().getFontMetricsInt(); final int extra = leading - metrics.descent + metrics.ascent; view.setLineSpacing(extra, 1); // Determine minimum required top extra so that the view lands on the grid final int alignTopExtra = (step + metrics.ascent % step) % step; // Determine minimum required bottom extra so that view bounds are aligned with the grid final int alignBottomExtra = (step - metrics.descent % step) % step; view.setPadding(view.getPaddingLeft(), view.getPaddingTop() + alignTopExtra, view.getPaddingRight(), view.getPaddingBottom() + alignBottomExtra); }

Puede usar una vista de ayuda de una altura específica para basar las vistas de texto en esta altura.

 <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="match_parent" > <com.example.baselinetest.BaseLineHelperView android:id="@+id/v_baselinehelper" android:layout_width="match_parent" android:layout_height="30dp" android:background="#FF0000" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignBaseline="@id/v_baselinehelper" android:text="@string/hello_world" /> </RelativeLayout>

Utilizar esta vista de ayuda

 public class BaseLineHelperView extends View { @TargetApi(Build.VERSION_CODES.LOLLIPOP) public BaseLineHelperView(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) { super(context, attrs, defStyleAttr, defStyleRes); } public BaseLineHelperView(Context context, AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); } public BaseLineHelperView(Context context, AttributeSet attrs) { super(context, attrs); } public BaseLineHelperView(Context context) { super(context); } @Override @ExportedProperty(category = "layout") public int getBaseline() { return getHeight(); } }

Puedes usar android: lineSpacingExtra y android: lineSpacingMultiplier en tu archivo XML para el espaciado de línea. Para tener el diseño adecuado de una sola fila de ListView puede ayudar: –

 <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="88dp" android:background="#fff" android:orientation="horizontal" android:paddingTop="8dp" android:paddingBottom="8dp" android:paddingLeft="16dp" > <ImageView android:id="@+id/imageView1" android:layout_width="45dp" android:layout_height="match_parent" android:background="#000" android:padding="16dp" /> <LinearLayout android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:paddingRight="72dp" android:paddingLeft="16dp" android:orientation="vertical" > <TextView android:id="@+id/textView1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="TextView" android:textColor="#000" android:textSize="16sp" /> <TextView android:id="@+id/textView2" android:layout_weight="1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:textSize="14sp" android:text="asdjkfah asdfakj sdfjshd sdgf dfg " /> </LinearLayout> </LinearLayout>

Debe hacer referencia a esta clase para alinear texto en la cuadrícula de línea de base TextView a 4dp:
https://github.com/nickbutcher/plaid/blob/master/app/src/main/java/io/plaidapp/ui/widget/BaselineGridTextView.java