Jak prawidłowo ustawić wysokość linii dla Androida?

Question

Jestem architektem UX pracującym z zespołem programistów Androida, którzy są głównie młodsi. Mamy problemy z prawidłowym ustawieniem wysokości linii w systemie Android.

Używamy specyfikacji Material Design jako naszego przewodnika dla naszej aplikacji. W szczególności, można zobaczyć wysokość linii specyfikacje tutaj:

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

Użyjmy korpus 2 w naszym przykładzie. Specyfikacja mówi, że typ to 13sp lub 14sp, a wiodąca (wysokość linii - to samo) powinna wynosić 24dp.

Oto problem: ci twórcy mówią mi, że nie ma takiego sposobu na ustawienie wysokości linii w kodzie. Zamiast tego, mówią mi, by zmierzyć odległość między dwoma wierszami tekstu i podać im taką miarę - powiedzmy, że to 4dp. Chcą tego dla każdego stylu tekstu, którego używamy.

Używamy szkicu> Zepelin flow dla spec.

Wydaje mi się dziwne, że mogę stworzyć styl czcionki (który może łatwo być klasy/stylu w kodzie), który ma 13sp z wiodącym 24dp i nie może ustawić wiodącego, ale zamiast tego musi dodać trzeci środek do miksu. Nie ma miejsca w Sketch lub Zepelin na taką miarę "między liniami".

Czy tak naprawdę jest to zrobione, czy też jest właściwy sposób ustawiania wysokości linii?

Answer 1

Tak, można łatwo zrobić w systemie Android. Jestem doświadczonym programistą Androida i projektantem. Rozumiem twój problem.

Rozwiązanie jest proste. Po prostu użyj tych dwóch atrybutów w swoich TextView, lineSpacingExtra i lineSpacingMultiplier.

Przykładowo

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

EDIT

Są one przeznaczone tylko do sterowania odstępów między liniami, a nie znaków (vel kerningu). Aby kontrolować odstępy między znakami, możesz użyć tej biblioteki, którą zrobiłem, KerningViews.

EDIT 2

android:lineSpacingExtra dodać rzeczywistą dodatkową przestrzeń między wierszami. Powinieneś tego używać. Aby uzyskać więcej informacji, podałem atrybut android:lineSpacingMultiplier, który działa jako współczynnik skali z wysokością TextView.

Jeśli chcesz 15dp przestrzeni między liniami, użyj android:lineSpacingExtra="15dp", i jesteś dobry, aby przejść.

Answer 2

Oto sposób na programowanie.

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

Oto React rozwiązanie Native za: dodaj rozpiętość, która reguluje wysokość wiersza https://github.com/facebook/react-native/blob/master/ReactAndroid/src/main/java/com/facebook/react/views/text/CustomLineHeightSpan.java

mój projekt koledzy korzystania wysokość linii nadmiernie i jego ból, że nigdy nie wygląda tuż po rozdzierające w aplikacji.

Będę planował stworzenie niestandardowej klasy TextView, która pobiera arg przez XML, a następnie opublikuje go tutaj.