Как правильно установить высоту строки для Android?

Я архитектор UX, работающий с командой разработчиков Android, которые в основном младшие. У нас возникают проблемы с настройкой высоты строки в Android.

Мы используем спецификацию Material Design как наше руководство для нашего приложения. В частности, здесь вы можете увидеть спецификации высоты линии:

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

Позвольте использовать Body 2 в качестве нашего примера. Спецификация говорит, что тип 13sp или 14sp, а ведущая (высота линии - то же самое) должна быть 24dp.

Здесь проблема: эти разработчики говорят мне, что нет такого способа установить высоту строки, как в коде. Вместо этого они говорят мне измерить расстояние между двумя строками текста и дать им эту меру - скажем, 4dp. Они хотят этого для каждого стиля текста, который мы используем.

Мы используем эскиз > поток Цепелина для спецификации.

Мне кажется странным, что у меня есть возможность создать стиль шрифта (который может легко быть классом/стилем в коде), который составляет 13 с при старте 24dp и не сможет установить ведущий, но вместо этого нужно добавить Третья мера. В Эскизе или Цепелине нет места для такой меры "между строками".

Это действительно так, как это делается, или есть правильный способ установить высоту строки?

Ответ 1

Решение простое. просто используйте эти два атрибута в ваших TextView, lineSpacingExtra и lineSpacingMultiplier.

Например,

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

EDIT

Они предназначены только для контроля расстояния между строками, а не для символов (он же Кернинг). Для управления интервалом между символами вы можете использовать эту библиотеку, которую я создал, KerningViews.

ОБНОВЛЕНИЕ 2

android:lineSpacingExtra добавляет фактическое дополнительное пространство между строками. Вы должны использовать это. Просто чтобы дать вам больше информации, я дал вам атрибут android:lineSpacingMultiplier, который работает как масштабный коэффициент с высотой TextView.

Если вы хотите 15dp пробел между строками, используйте android:lineSpacingExtra="15dp", и все готово.

Ответ 2

Я объясню это с точки зрения разработчика Android.

Высота строки обычно означает размер текста + "отступ" сверху/снизу.

Итак, если ваш дизайнер пишет высоту строки 19sp и размер текста 15sp, это означает, что вам нужно иметь дополнительный отступ 4sp.

19sp - 15sp = 4sp.

Чтобы реализовать его в макете, используйте атрибут lineSpacingExtra.

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

Еще один способ достижения высоты линии - использование масштаба. Например, 1.2. Это означает, что интервал составляет 120% от размера текста.

В приведенном выше примере высота строки равна 19sp, а размер текста - 15sp. Если мы переведем это в масштаб, оно станет.

19/15 = 1.26

Чтобы реализовать его в макете, используйте атрибут lineSpacingMultiplier.

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

Ответ 3

Начиная с API 28 теперь у нас есть lineHeight

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

Если вы используете стиль, не забудьте удалить приложение:

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

Или в коде

TextView.setLineHeight(@Px int)

Ответ 4

Здесь можно сделать это программно.

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

Ответ 5

Здесь React Native solution: добавьте диапазон, который регулирует высоту линии https://github.com/facebook/react-native/blob/master/ReactAndroid/src/main/java/com/facebook/react/views/text/CustomLineHeightSpan.java

Мои коллеги по дизайну чрезмерно используют высоту строки и ее боль, которая никогда не выглядит сразу после разрыва в приложении.

Я планирую создать собственный класс TextView, который возьмет аргумент XML и опубликует его здесь после.

Ответ 6

Я всегда делаю вещи программно:

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

Также ознакомьтесь с руководством по дизайну материала о типографии. Это действительно полезно для достижения лучшего вида.