Как правильно установить высоту строки для 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);
Также ознакомьтесь с руководством по дизайну материала о типографии. Это действительно полезно для достижения лучшего вида.