如何正确设置行高为Android?

bkkx9g8r  于 2023-01-11  发布在  Android
关注(0)|答案(9)|浏览(212)

我是一名UX架构师,与一个Android开发团队合作,他们大多是初级开发人员。我们在Android中正确设置线高时遇到了问题。
我们使用材料设计规范作为我们应用的指南。特别是,您可以在此处看到线高规范:
https://material.google.com/style/typography.html#typography-line-height
让我们以Body 2为例,规范规定类型为13sp或14sp,而行高(行高-相同的东西)应为24dp。
问题是这样的:这些开发人员告诉我,在代码中没有这样的方法来设置行高。相反,他们告诉我测量两行文本之间的距离,然后给他们这个测量值--假设是4dp。他们希望我们使用的每种文本样式都是这样。
我们使用"草图"〉"Zepelin流"进行规范。
我觉得很奇怪的是,可以创建一个字体样式(代码中很容易是class/style),它是13sp,行距是24dp,但不能设置行距,而是必须添加第三个度量。在Sketch或Zepelin中没有"行间"度量的位置。
这真的是这样做的吗,或者有一个合适的方法来设置行高?

jckbn6z7

jckbn6z71#

我将从Android开发人员的Angular 解释这一点。
行高通常表示文本大小+顶部/底部“填充”。
所以,如果你的设计师写行高19 sp和文本大小15 sp,这意味着你需要有额外的填充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%。
在上面的例子中,行高是19 sp,文本大小是15 sp。如果我们把它转换成比例,它变成。
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="StackOverflow is awesome"
/>
vxf3dgd4

vxf3dgd42#

lineHeight = height * multiplier + extra

因此,如果你设置乘数= 0,那么你可以得到线高是一样的额外。

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

rjzwgtxy3#

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

yjghlzjz4#

这里有一种编程的方法。

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

aemubtdh5#

  • 2022年**

这对API 28之前和更高版本有效:

<style name="whatever">
    <item name="android:lineHeight" tools:targetApi="p">28sp</item>
    <item name="lineHeight">28sp</item>
</style>

为“android:lineHeight”添加目标API以确保它不会覆盖“lineHeight”似乎可以做到这一点。

ttisahbt

ttisahbt6#

以下是React Native的解决方案:添加调整行高https://github.com/facebook/react-native/blob/master/ReactAndroid/src/main/java/com/facebook/react/views/text/CustomLineHeightSpan.java的跨距
我的设计同事过度使用线高,这是一个痛苦,它从来没有看起来正确后,渲染应用程序。
我将计划创建一个自定义TextView类,它通过XML接受一个arg,并在之后将其发布在这里。

qc6wkl3g

qc6wkl3g7#

根据这个答案
https://stackoverflow.com/a/52735596/8668620
并添加了

android:includeFontPadding="false"

wqlqzqxt

wqlqzqxt8#

enter image description here您好,我们可以这样添加:应用程序:行高度=“42dp”

64jmpszr

64jmpszr9#

TextViewCompat的setLineHeight方法似乎对我有效,无论项目的最低SDK版本如何。

val textView = binding.titleTextView // OR findViewById<TextView>(R.id.titleTextView)
val lineHeight = resources.getDimensionPixelSize(R.dimen.line_height)

TextViewCompat.setLineHeight(textView, lineHeight)

相关问题