Wie wird die Zeilenhöhe für Android richtig eingestellt?

Question

Ich bin ein UX-Architekt, der mit einem Team von Android-Entwicklern arbeitet, die größtenteils Junior sind. Wir haben Probleme bei der korrekten Einstellung der Zeilenhöhe in Android.

Wir verwenden die Material Design-Spezifikation als Leitfaden für unsere App. Insbesondere können Sie Zeilenhöhe Spezifikationen siehe hier:

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

Body 2 wie unser Beispiel verwenden lassen. Die Spezifikation sagt, der Typ ist 13sp oder 14sp, und die führende (Zeilenhöhe - gleiche Sache) sollte 24dp sein.

Hier ist das Problem: diese Entwickler sagen mir, dass es keine Möglichkeit gibt, Zeilenhöhe wie im Code festzulegen. Stattdessen sagen sie mir, dass ich den Abstand zwischen den beiden Textzeilen messen soll und ihnen das Maß geben soll - sagen wir mal 4dp. Sie wollen das für jeden Textstil, den wir verwenden.

Wir verwenden eine Skizze> Zepelin Strömung für spec.

Es scheint mir komisch, in der Lage zu sein, einen Schriftstil (der leicht Klasse/Stil im Code sein könnte) zu erstellen, der 13sp mit 24dp führt, und nicht in der Lage ist, den führenden festzulegen, sondern hinzuzufügen ein drittes Maß für den Mix. Es gibt keinen Platz in Sketch oder Zepelin für ein solches Maß "zwischen den Zeilen".

Ist dies wirklich die Art und Weise, wie es gemacht wird, oder gibt es eine geeignete Möglichkeit, die Zeilenhöhe zu setzen?

Answer 1

Ja, Sie können leicht in Android tun. Ich bin ein erfahrener Android Entwickler und auch ein Designer. Ich kann dein Problem verstehen.

Die Lösung ist einfach. Verwenden Sie einfach diese zwei Attribute in Ihrem TextView, lineSpacingExtra und lineSpacingMultiplier.

Zum Beispiel

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

EDIT

Diese werden zum Steuern des Abstandes zwischen den Linien und nicht den Zeichen (aka Unterschneidung) nur gemeint. Um den Zeichenabstand zu steuern, können Sie diese Bibliothek benutzen, die ich gemacht habe, KerningViews.

EDIT 2

Der android:lineSpacingExtra den tatsächlichen zusätzlichen Raum zwischen den Zeilen hinzuzufügen. Sie sollten dies verwenden. Nur um Ihnen mehr Informationen zu geben, gab ich Ihnen das android:lineSpacingMultiplier Attribut, das als Skalierungsfaktor mit der Höhe des TextView arbeitet.

Wenn Sie möchten, 15dp der Abstand zwischen den Zeilen, verwenden Sie android:lineSpacingExtra="15dp", und Sie sind gut zu gehen.

Answer 2

Hier ist eine Möglichkeit, es programmatisch zu tun.

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

Hier Mutter Lösung reagieren: eine Spanne hinzufügen, die die Zeilenhöhe https://github.com/facebook/react-native/blob/master/ReactAndroid/src/main/java/com/facebook/react/views/text/CustomLineHeightSpan.java

Mein Design Kollegen verwenden Zeilenhöhe übermäßig und es ist ein Schmerz, der es sieht nie direkt nach dem Zerreißen in-App passt.

Ich werde planen, eine benutzerdefinierte TextView-Klasse zu erstellen, die eine Arg von XML akzeptiert und wird es hier nachher veröffentlichen.