programacion - ¿Cómo configurar correctamente la altura de la línea para Android?

manual de programacion android pdf

Question

Soy un arquitecto de UX que trabaja con un equipo de desarrolladores de Android que son en su mayoría junior. Estamos teniendo problemas para configurar correctamente la altura de la línea en Android.

Estamos utilizando las especificaciones de Material Design como nuestra guía para nuestra aplicación. En particular, puedes ver las especificaciones de altura de línea aquí:

https://material.google.com/style/typography.html#typography-line-height

Usemos Body 2 como nuestro ejemplo. La especificación dice que el tipo es 13sp o 14sp, y el encabezado (altura de línea - lo mismo) debe ser 24dp.

Aquí está el problema: estos desarrolladores me están diciendo que no hay tal manera de establecer una altura de línea como esa en el código. En cambio, me están diciendo que mida la distancia entre las dos líneas de texto y les dé esa medida; digamos que es 4dp. Ellos quieren esto para cada estilo de texto que estamos usando.

Estamos usando un Sketch> Zepelin flow para espec.

Me parece extraño poder crear un estilo de fuente (que fácilmente podría ser una clase / estilo en el código) que es 13sp con 24dp a la vanguardia, y no poder establecer el principal, sino que tiene que agregar una tercera medida para la mezcla. No hay lugar en Sketch o Zepelin para tal medida "entre líneas".

¿Es esta realmente la forma en que se hace, o existe una forma adecuada de establecer la altura de la línea?

Answer 1

Aquí está la solución de React Native: agregue un espacio que ajuste el alto de línea https://github.com/facebook/react-native/blob/master/ReactAndroid/src/main/java/com/facebook/react/views/text/CustomLineHeightSpan.java

Mis colegas de diseño usan la altura de la línea en exceso y es un dolor que nunca se vea justo después de iniciar la aplicación.

Planearé hacer una clase personalizada de TextView que tome un argumento por XML y lo publique aquí después.

Answer 2

Aquí hay una forma de hacerlo programáticamente.

public static void setLineHeight(TextView textView, int lineHeight) {
    int fontHeight = textView.getPaint().getFontMetricsInt(null);
    textView.setLineSpacing(dpToPixel(lineHeight) - fontHeight, 1);
}

public static int dpToPixel(float dp) {
    DisplayMetrics metrics = getResources().getDisplayMetrics();
    float px = dp * (metrics.densityDpi / 160f);
    return (int) px;
}

Answer 3

Voy a explicar esto desde la perspectiva del desarrollador de Android.

La altura de la línea generalmente significa tamaño de texto + "relleno" arriba / abajo.

Por lo tanto, si su diseñador escribe una altura de línea de 19sp y un tamaño de texto de 15sp, significa que necesita un relleno adicional de 4sp.

19sp - 15sp = 4sp.

Para implementarlo en su diseño, use el atributo lineSpacingExtra .

<TextView
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:textSize="15sp"
  android:lineSpacingExtra="4sp"
  android:fontFamily="sans-serif"
  tools:text=" is awesome"
/>

Otra forma de lograr la altura de la línea es utilizando la escala. Por ejemplo, 1.2 . Esto significa que el espaciado es del 120% del tamaño del texto.

En el ejemplo anterior, la altura de la línea es 19sp y el tamaño del texto es 15sp. Si lo traducimos a escala, se convierte.

19/15 = 1.26

Para implementarlo en su diseño, use el atributo lineSpacingMultiplier .

<TextView
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:textSize="15sp"
  androdi:lineSpacingMultiplier="1.26"
  android:fontFamily="sans-serif"
  tools:text=" is awesome"
/>

Answer 4

La solución es simple. Simplemente use estos dos atributos en su TextView , lineSpacingExtra y lineSpacingMultiplier .

Por ejemplo,

<TextView
    android:layout_width="match_parent"
    android:layout_height="80dp"
    android:lineSpacingMultiplier="2.5"
    android:lineSpacingExtra="6dp"/>

EDITAR

Estos solo están diseñados para controlar el espaciado entre las líneas y no los caracteres (también conocido como Kerning ). Para controlar el espaciado de caracteres, puedes usar esta biblioteca que hice, KerningViews .

Editar 2

El android:lineSpacingExtra agrega el espacio extra real entre las líneas. Deberías estar usando esto. Solo para darle más información, le di el atributo android:lineSpacingMultiplier que funciona como un factor de escala con la altura de TextView .

Si quieres 15dp de espacio entre líneas, usa android:lineSpacingExtra="15dp" , y estarás listo.