web-dev-qa-db-ja.com

Androidの行の高さを適切に設定する方法は？

私はUXアーキテクトであり、ほとんどが後輩であるAndroid開発者のチームと協力しています。 Androidで行の高さを適切に設定する際に問題が発生しています。

マテリアルデザインの仕様をアプリのガイドとして使用しています。特に、ここで行の高さの仕様を確認できます。

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

例としてBody 2を使用してみましょう。仕様では、タイプは13spまたは14spであり、先頭（行の高さ-同じこと）は24dpでなければなりません。

問題は次のとおりです。これらの開発者は、コードでそのような行の高さを設定する方法はないと言っています。代わりに、2行のテキスト間の距離を測定し、その測定値を与えるように指示されています-4dpとしましょう。彼らは私たちが使用しているテキストのスタイルごとにこれを望んでいます。

スペックには、Sketch> Zepelinフローを使用しています。

24spの先頭を持つ13spのフォントスタイル（コードでは簡単にクラス/スタイルになります）を作成できて、先頭を設定できず、代わりに3番目のメジャーを追加する必要があるのは奇妙に思えますミックス。 SketchやZepelinには、「ライン間」のような測定のための場所はありません。

これは実際に行われている方法ですか、行の高さを設定する適切な方法はありますか？

androidtypography
45
MajorTom

解決策は簡単です。 TextView、lineSpacingExtra、およびlineSpacingMultiplierでこれらの2つの属性を使用するだけです。

例えば、

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

編集

これらは、行間を制御するためのものであり、文字ではありません（別名Kerning）。文字間隔を制御するには、作成したこのライブラリ KerningViews を使用できます。

EDIT 2

Android:lineSpacingExtraは、行間に実際の余分なスペースを追加します。これを使用する必要があります。より多くの情報を提供するために、TextViewの高さのスケール係数として機能するAndroid:lineSpacingMultiplier属性を提供しました。

15dp行間スペースが必要な場合は、Android:lineSpacingExtra="15dp"を使用してください。

67
Aritra Roy

これについては、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="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"
/>
15
aldok

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
latsson

これをプログラムで行う方法を次に示します。

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

私は常にプログラムで物事を行います：

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

また、 typography に関する材料設計ガイドラインをお読みください。これは、最高の外観を実現するのに非常に役立ちます。

0
ucMedia

React Nativeのソリューションは次のとおりです。行の高さを調整するスパンを追加します https://github.com/facebook/react-native/blob/master/ReactAndroid/src/main/Java/com /facebook/react/views/text/CustomLineHeightSpan.Java

私のデザインの同僚は、ラインの高さを過度に使用しているため、アプリ内でレンダリングした直後に表示されることはありません。

XMLで引数を受け取るカスタムTextViewクラスの作成を計画しており、後でここに投稿します。

0
kassim