Question

我是一名UX架构师，与一群大多数初级的Android开发人员合作。我们在Android中正确设置行高问题。

我们使用Material Design规范作为我们应用的指南。特别是，您可以在此处查看行高规格：

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

让我们以Body 2为例。规格说类型是13sp或14sp，领先（行高 - 相同的东西）应该是24dp。

问题在于：这些开发人员告诉我，没有像代码中那样设置行高的方法。相反，他们告诉我测量两行文本之间的距离并给予他们测量 - 让我们说它是4dp。他们想要我们正在使用的每种文本样式。

我们正在使用Sketch＆gt; Zepelin流量为spec。

能够创建一个字体样式（在代码中很容易成为类/样式）似乎很奇怪，它是13sp，24dp领先，并且无法设置前导，但是必须添加一个第三项措施。 Sketch或Zepelin中没有地方用于这样的措施＆＃34;在行之间。＆＃34;

这真的是它的完成方式，还是有正确的方法设置线高？

Answer 1

解决方案很简单。只需在TextView，lineSpacingExtra和lineSpacingMultiplier中使用这两个属性。

例如，

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

修改

这些仅用于控制线条之间的间距而不是字符（又名字距）。要控制字符间距，您可以使用我创建的库KerningViews。

编辑2

android:lineSpacingExtra在行之间添加实际的额外空格。你应该使用这个。为了给您提供更多信息，我向您提供了android:lineSpacingMultiplier属性，该属性作为TextView高度的比例因子。

如果你想在行之间留出15dp的空格，请使用android:lineSpacingExtra="15dp"，你就可以了。

Answer 2

我将从Android Developer的角度进行解释。

行高通常表示文本大小+“填充”顶部/底部。

因此，如果您的设计师将行高设置为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="StackOverflow 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"
  androdi:lineSpacingMultiplier="1.26"
  android:fontFamily="sans-serif"
  tools:text="StackOverflow is awesome"
/>

Answer 3

lineHeight = height * multiplier + extra

因此，如果将multiplier = 0设置为0，则行高可以与多余的行高相同。

<TextView
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:textSize="14sp"
  android:lineSpacingMultiplier="0"
  android:lineSpacingExtra="24sp"
/>

Answer 4

从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)

Answer 5

这是一种以编程方式执行此操作的方法。

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 6

这是React Native的解决方案：添加一个调整行高的范围 https://github.com/facebook/react-native/blob/master/ReactAndroid/src/main/java/com/facebook/react/views/text/CustomLineHeightSpan.java

我的设计同事过度使用线条高度，以及在应用程序内部渲染后看起来从未出现的痛苦。

我计划制作一个自定义的TextView类，该类通过XML获取arg，然后将其发布到此处。

Answer 7

我总是以编程方式进行操作：

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

此外，请阅读有关typography的材料设计指南。这对于获得最佳外观确实很有帮助。

如何正确设置Android的行高？

7 个答案: