Come impostare correttamente l'altezza della linea per Android?

Question

Sono un architetto UX che lavora con un team di sviluppatori Android che sono per lo più giovani. Stiamo riscontrando problemi nell'impostazione dell'altezza della linea in Android.

Utilizziamo le specifiche di Material Design come guida per la nostra app. In particolare, è possibile vedere le specifiche di altezza linea qui:

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

Usiamo corpo 2 come il nostro esempio. La specifica dice che il tipo è 13sp o 14sp, e il principale (altezza della linea - stessa cosa) dovrebbe essere 24dp.

Ecco il problema: questi sviluppatori mi stanno dicendo che non esiste un modo tale per impostare l'altezza della linea come quella nel codice. Invece, mi stanno dicendo di misurare la distanza tra le due righe di testo e dare loro quella misura - diciamo che è 4dp. Lo vogliono per ogni stile di testo che stiamo usando.

Stiamo utilizzando un flusso Schizzo> Zepelin per specifiche.

Mi sembra strano poter creare uno stile di carattere (che potrebbe facilmente essere classe/stile nel codice) 13sp con 24dp in testa e non essere in grado di impostare l'interlinea, ma invece di aggiungere una terza misura per il mix. Non c'è posto in Sketch o Zepelin per una tale misura "tra le righe".

È davvero così, o esiste un modo corretto per impostare l'altezza della linea?

Answer 1

Sì, puoi farlo facilmente in Android. Sono anche uno sviluppatore Android esperto e un designer. Posso capire il tuo problema.

La soluzione è semplice. Basta usare questi due attributi nel tuo TextView, lineSpacingExtra e lineSpacingMultiplier.

Ad esempio,

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

EDIT

Queste sono destinate soltanto per controllare la spaziatura tra le linee e caratteri (non alias crenatura). Per controllare la spaziatura dei caratteri, puoi usare questa libreria che ho creato, KerningViews.

EDIT 2

Il android:lineSpacingExtra aggiungere lo spazio effettivo in più tra le righe. Dovresti usare questo. Solo per darti maggiori informazioni, ti ho dato l'attributo android:lineSpacingMultiplier che funziona come un fattore di scala con l'altezza dello TextView.

Se si desidera 15dp di spazio tra le righe, utilizzare android:lineSpacingExtra="15dp" e si è pronti per andare.

Answer 2

Ecco un modo per farlo in modo programmatico.

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

Ecco Reagire soluzione Native: aggiungere un arco che consente di regolare l'altezza della linea https://github.com/facebook/react-native/blob/master/ReactAndroid/src/main/java/com/facebook/react/views/text/CustomLineHeightSpan.java

I miei colleghi di progettazione utilizzano altezza della linea eccessivamente e il suo un dolore che non si è mai sembra proprio dopo strazianti in-app.

Mi occuperò di creare una classe di TextView personalizzata che prende un argomento in XML e lo pubblicherà qui dopo.