web-dev-qa-db-fra.com

Comment régler correctement la hauteur de ligne pour Android?

Je suis un architecte UX travaillant avec une équipe de développeurs Android principalement juniors. Nous avons des problèmes pour régler correctement la hauteur de ligne dans Android. 

Nous utilisons les spécifications de conception de matériaux comme guide pour notre application. En particulier, vous pouvez voir les spécifications de hauteur de ligne ici:

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

Utilisons le corps 2 comme exemple. La spécification indique que le type est 13sp ou 14sp, et le premier (hauteur de la ligne - même chose) devrait être 24dp. 

Voici le problème: ces développeurs me disent qu’il n’existe aucun moyen de définir une hauteur de ligne comme celle-ci dans le code. Au lieu de cela, ils me disent de mesurer la distance entre les deux lignes de texte et de leur donner cette mesure - disons que c'est 4dp. Ils veulent cela pour chaque style de texte que nous utilisons. 

Nous utilisons un flux Sketch> Zepelin pour les spécifications. 

Il me semble étrange de pouvoir créer un style de police (qui pourrait facilement être classe/style dans le code) de 13 ps avec 24dp en tête, et ne pas être en mesure de définir le préfixe, mais plutôt en ajoutant une le mélange. Il n’ya pas de place dans Sketch ou Zepelin pour une telle mesure "entre lignes".

Est-ce vraiment la façon dont cela est fait ou existe-t-il un moyen approprié de régler la hauteur de ligne? 

androidtypography
37
MajorTom

La solution est simple Utilisez simplement ces deux attributs dans vos TextView, lineSpacingExtra et lineSpacingMultiplier.

Par exemple,

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

MODIFIER

Celles-ci sont uniquement destinées à contrôler l’espacement entre les lignes et non les caractères (alias Kerning). Pour contrôler l'espacement des caractères, vous pouvez utiliser cette bibliothèque que j'ai créée, KerningViews .

EDIT 2

Le Android:lineSpacingExtra ajoute l'espace supplémentaire réel entre les lignes. Vous devriez utiliser ceci. Juste pour vous donner plus d'informations, je vous ai donné l'attribut Android:lineSpacingMultiplier qui fonctionne comme un facteur d'échelle avec la hauteur de la TextView.

Si vous voulez 15dp d'espace entre les lignes, utilisez Android:lineSpacingExtra="15dp" et vous êtes prêt à partir.

53
Aritra Roy

Je vais expliquer cela du point de vue du développeur Android.

La hauteur de ligne signifie généralement taille du texte + "remplissage" haut/bas.

Ainsi, si votre concepteur écrit la hauteur de ligne 19sp et la taille de texte 15sp, cela signifie que vous devez avoir un remplissage supplémentaire de 4sp.

19sp - 15sp = 4sp.

Pour l'implémenter dans votre mise en page, utilisez l'attribut lineSpacingExtra.

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

Une autre façon d’atteindre la hauteur de ligne est d’utiliser l’échelle. Par exemple, 1.2. Cela signifie que l'espacement correspond à 120% de la taille du texte. 

Dans l'exemple ci-dessus, la hauteur de ligne est de 19 ps et la taille du texte de 15 sp. Si nous traduisons en échelle, il devient.

19/15 = 1,26

Pour l'implémenter dans votre mise en page, utilisez l'attribut 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="StackOverflow is awesome"
/>
5
aldok

Depuis API 28, nous avons maintenant lineHeight

<TextView
Android:layout_height="wrap_content"
Android:layout_width="match_parent"
Android:text="Lorem ipsum dolor sit amet"
app:lineHeight="50sp"/>

Si vous utilisez un style, n'oubliez pas de supprimer l'application:

<style name="H1">
    <item name="Android:textSize">20sp</item>
    <item name="lineHeight">30sp</item>
</style>

Ou en code

TextView.setLineHeight(@Px int)
3
latsson

Voici une façon de le faire par programmation.

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;
}
1
miguel

Je fais toujours les choses par programme:

float spc = TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP,6,r.getDisplayMetrics());
textView.setLineSpacing(spc, 1.5f);

Lisez également les directives de conception des matériaux à propos de typographie . Ceci est vraiment utile pour obtenir le meilleur look.

0
ucMedia

Voici la solution de React Native: ajoutez une étendue qui ajuste la hauteur de la ligne https://github.com/facebook/react-native/blob/master/ReactAndroid/src/main/Java/com/facebook/react/ views/text/CustomLineHeightSpan.Java

Mes collègues concepteurs utilisent la hauteur de ligne de manière excessive et il est difficile de ne pas avoir l’impression qu’elle aille bien après le rendu dans l’application.

Je prévois de créer une classe TextView personnalisée prenant un argument XML et le posterai ci-après.

0
kassim