このページでは、
段落。段落レベルのスタイル設定を行うには、
textAlign
と lineHeight
を指定するか、独自の ParagraphStyle
を定義します。
テキストの配置を設定
textAlign
パラメータを使用すると、水平方向の
境界の位置揃え
Text
コンポーズ可能なサーフェス領域にテキストを配置できます。
デフォルトでは、Text
はコンテンツの値に応じて自然なテキストの配置を選択します。
Text
コンテナの左端: ラテン文字、キリル文字、ハングルなど、左から右に記述するアルファベットの場合Text
コンテナの右端: アラビア語やヘブライ語など、右から左に記述するアルファベットの場合
@Composable fun CenterText() { Text( "Hello World", textAlign = TextAlign.Center, modifier = Modifier.width(150.dp) ) }
Text
コンポーザブルのテキストの配置を手動で設定する場合は、
TextAlign.Left
の代わりに TextAlign.Start
と TextAlign.End
を使用します。
Text
の右端に解決されるため、それぞれ TextAlign.Right
コンポーズ可能な関数を作成します。たとえば、TextAlign.End
では、フランス語テキストは右側、アラビア語テキストは左側に配置されます。一方、TextAlign.Right
では、使用されているアルファベットの種類にかかわらず、テキストが右側に配置されます。
段落に複数のスタイルを追加する
段落に複数のスタイルを追加するには、ParagraphStyle
を
AnnotatedString
: 任意のアノテーションのスタイルでアノテーションを付けることができます。
テキストの一部が ParagraphStyle
でマークされると、その部分は
先頭に改行があり、残りのテキストが
あります。
テキストに複数のスタイルを追加する方法について詳しくは、 テキストに複数のスタイルを追加する。
AnnotatedString
にはタイプセーフ
ビルダー
buildAnnotatedString
を簡単に作成できるようになりました。次のスニペットでは、
buildAnnotatedString
で ParagraphStyle
を設定します。
@Composable fun ParagraphStyle() { Text( buildAnnotatedString { withStyle(style = ParagraphStyle(lineHeight = 30.sp)) { withStyle(style = SpanStyle(color = Color.Blue)) { append("Hello\n") } withStyle( style = SpanStyle( fontWeight = FontWeight.Bold, color = Color.Red ) ) { append("World\n") } append("Compose") } } ) }
行の高さとパディングを調整する
includeFontPadding
は、フォント指標に基づいてテキストの最初の行の上と最後の行の下にパディングを追加するレガシー プロパティです。Compose BOM バージョン 2024.01.01
以降では、includeFontPadding
が設定されています。
デフォルトで false
に変更され、デフォルトのテキスト レイアウトは
一般的な設計ツールについて説明します。
lineHeight
を設定する機能は新しいものではなく、Android Q 以降で利用できます。Text
の lineHeight
を設定するには、lineHeight
パラメータを使用します。これにより、テキストの各行で行の高さが割り振られます。その後、新しい LineHeightStyle API
を使用して、スペース内でのテキストの配置方法をさらに設定し、空白文字を削除できます。
精度を高めるために、テキストの単位に「sp」(スケール非依存ピクセル)ではなく「em」(相対的なフォントサイズ)を使用して lineHeight
を調整することをおすすめします。詳細については、このモジュールの
適切なテキスト単位を選択する方法については、TextUnit
をご覧ください。
![真上と真下の行に基づいた測定値として lineHeight を示す画像。](https://developer.android.google.cn/static/develop/ui/compose/images/text-lineheightv3.png?authuser=0000&hl=ja)
lineHeight
内のテキストを調整し、必要に応じて余分なスペースをカットします。
Text( text = text, style = LocalTextStyle.current.merge( TextStyle( lineHeight = 2.5.em, platformStyle = PlatformTextStyle( includeFontPadding = false ), lineHeightStyle = LineHeightStyle( alignment = LineHeightStyle.Alignment.Center, trim = LineHeightStyle.Trim.None ) ) ) )
lineHeight
の調整に加えて、テキストの中央揃えとスタイル設定が可能になりました
LineHeightStyle
試験運用版 API で構成を使用: LineHeightStyle.Alignment
および LineHeightStyle.Trim
(includeFontPadding
を false
に設定する必要があります(
トリミングして編集)。Alignment と Trim は、テキストの行間にある測定されたスペースを使用し、1 行のテキストやテキストのブロックの一番上の行を含め、すべての行にスペースをさらに適切に割り振ります。
LineHeightStyle.Alignment
は、行の高さによって指定されるスペース内の行の配置方法を定義します。各行内で、テキストを上、下、中央に、または比例して配置できます。LineHeightStyle.Trim
を使用すると、lineHeight
と Alignment の調整から生成された、テキストの 1 行目の上と最後の行の下の追加のスペースを残すか削除できます。次のサンプルは、アライメントが中央に配置されたとき(LineHeightStyle.Alignment.Center
)に、さまざまな LineHeightStyle.Trim
構成で複数行のテキストがどのように表示されるかを示しています。
![]() |
![]() |
LineHeightStyle.Trim.None |
LineHeightStyle.Trim.Both |
![]() |
![]() |
LineHeightStyle.Trim.FirstLineTop |
LineHeightStyle.Trim.LastLineBottom |
詳しくは、Compose Text のフォントのパディングを修正するのブログ投稿をご覧ください。
この変更の背景、ビューでの includeFontPadding
の動作の詳細
Compose と新しい LineHeightStyle
に対して行われた変更
API
改行を挿入する
LineBreak
API は、テキストを分割する基準を定義します。
複数行あります。改行の種類を
Text
コンポーザブルの TextStyle
ブロック。プリセットの改行の種類
次の内容が含まれます。
Simple
- 高速で基本的な改行。テキスト入力フィールドで推奨されます。Heading
- 緩い解除ルールによる改行。短いメッセージに推奨 タイトルなどのテキストを入力します。Paragraph
- 読みやすくするために低速で高品質な改行。 段落など、大量のテキストに適しています。
次のスニペットでは、Simple
と Paragraph
の両方を使用して、
長いテキスト ブロックで改行動作:
TextSample( samples = mapOf( "Simple" to { Text( text = SAMPLE_LONG_TEXT, modifier = Modifier .width(130.dp) .border(BorderStroke(1.dp, Color.Gray)), fontSize = 14.sp, style = TextStyle.Default.copy( lineBreak = LineBreak.Simple ) ) }, "Paragraph" to { Text( text = SAMPLE_LONG_TEXT, modifier = Modifier .width(130.dp) .border(BorderStroke(1.dp, Color.Gray)), fontSize = 14.sp, style = TextStyle.Default.copy( lineBreak = LineBreak.Paragraph ) ) } ) )
![単純な改行方法を示すテキスト ブロックと、テキストを使ったテキスト ブロック
段落を最適化する分割戦略を使用します。シンプルなプロンプトのテキスト ブロックを
改行方法では、行の長さのばらつきが大きくなります。](https://developer.android.google.cn/static/develop/ui/compose/images/text/simple-paragraph.png?authuser=0000&hl=ja)
上記の出力では、Paragraph
の改行動作により、
Simple
の改行よりも、視覚的にバランスが取れた結果が得られます。
改行をカスタマイズする
Strategy
を使用して独自の LineBreak
構成を作成することもできます。
パラメータを指定します。Strategy
は、以下のいずれかになります。
Balanced
- テキストの行の長さのバランスを取ります。 自動ハイフネーション(有効になっている場合)。スマートウォッチなどの小さな画面に適しています。 表示されるテキストの量が最大化されます。HighQuality
- 文章が読みやすくなるように段落を最適化します。例: 有効になります。(設定されてないものはすべて、Balanced
またはSimple
)。Simple
- 基本的かつ迅速な戦略。有効にすると、指定した場合にのみ そのままでは 1 行に収まらない単語を抽出できます。テキストの編集に便利 入力中に位置を変えないようにします。
次のスニペットは、デフォルト設定の段落と
小さな画面向けに最適化された段落に Balanced
改行を挿入して配置しています
戦略:
TextSample( samples = mapOf( "Balanced" to { val smallScreenAdaptedParagraph = LineBreak.Paragraph.copy(strategy = LineBreak.Strategy.Balanced) Text( text = SAMPLE_LONG_TEXT, modifier = Modifier .width(200.dp) .border(BorderStroke(1.dp, Color.Gray)), fontSize = 14.sp, style = TextStyle.Default.copy( lineBreak = smallScreenAdaptedParagraph ) ) }, "Default" to { Text( text = SAMPLE_LONG_TEXT, modifier = Modifier .width(200.dp) .border(BorderStroke(1.dp, Color.Gray)), fontSize = 14.sp, style = TextStyle.Default ) } ) )
![バランスの取れた改行戦略で段落と段落
戦略なしでフォーマットされます。バランスの取れた改行区切りの段落
戦略の行の長さはデフォルトよりも一貫しています。](https://developer.android.google.cn/static/develop/ui/compose/images/text/balanced-default.png?authuser=0000&hl=ja)
Balanced
改行戦略で書式設定された段落
(上)と、改行戦略のない形式の段落と比較します。CJK に関する考慮事項
LineBreak
は、Strictness
と
WordBreak
API: CJK 言語専用に設計されています。
CJK 以外の言語では、これらの API の効果が常に得られるとは限りません。全体として、
改行ルールは、ロケールに基づいて定義されます。
Strictness
は、改行の厳格性を次のように記述します。
プロパティ:
Default
- 言語 / 地域のデフォルトの違反ルール。Normal
に対応する場合があります。 またはStrict
。Loose
- 最も制限の少ないルール。短い行に適しています。Normal
- 最も一般的な改行ルール。Strict
- 改行に関する最も厳格なルール。
WordBreak
は、
次のプロパティがあります。
Default
- 言語 / 地域のデフォルトの違反ルール。Phrase
- 改行はフレーズに基づいて行われます。
次のスニペットでは、厳格度 Strict
と単語区切り Phrase
を使用しています。
設定すると次のようになります。
val customTitleLineBreak = LineBreak( strategy = LineBreak.Strategy.HighQuality, strictness = LineBreak.Strictness.Strict, wordBreak = LineBreak.WordBreak.Phrase ) Text( text = "あなたに寄り添う最先端のテクノロジー。", modifier = Modifier.width(250.dp), fontSize = 14.sp, style = TextStyle.Default.copy( lineBreak = customTitleLineBreak ) )
![[厳格性] と [ワードブレーク] の設定が適用された日本語のテキストと、デフォルトのテキスト](https://developer.android.google.cn/static/develop/ui/compose/images/text/cjk-line-break.png?authuser=0000&hl=ja)
Strictness
と WordBreak
で書式設定されたテキスト(上)
LineBreak.Heading
のみで書式設定されたテキスト(下)と比較します。行をまたいでテキストを分割する(ハイフネーション)
Hyphens
API を使用すると、アプリにハイフネーションのサポートを追加できます。
ハイフンとは、ダッシュのような句読点を挿入して、
単語がテキスト行に分割されます。有効にすると、Google Cloud コンソールと
単語の音節を適切なハイフンでつなぐように変換します。
デフォルトでは、ハイフネーションは有効になっていません。ハイフネーションを有効にするには
TextStyle
ブロックのパラメータとして Hyphens.Auto
を指定する場合:
TextSample( samples = mapOf( "Hyphens - None" to { Text( text = SAMPLE_LONG_TEXT, modifier = Modifier .width(130.dp) .border(BorderStroke(1.dp, Color.Gray)), fontSize = 14.sp, style = TextStyle.Default.copy( lineBreak = LineBreak.Paragraph, hyphens = Hyphens.None ) ) }, "Hyphens - Auto" to { Text( text = SAMPLE_LONG_TEXT, modifier = Modifier .width(130.dp) .border(BorderStroke(1.dp, Color.Gray)), fontSize = 14.sp, style = TextStyle.Default.copy( lineBreak = LineBreak.Paragraph, hyphens = Hyphens.Auto ) ) } ) )
![ハイフネーションが有効になっていない段落とハイフネーションが有効になっている段落。
ハイフネーションを有効にすると、単語にハイフンが付けられ、2 行に分割されます。](https://developer.android.google.cn/static/develop/ui/compose/images/text/hyphens.png?authuser=0000&hl=ja)
有効にすると、ハイフネーションは次の条件下でのみ行われます。
- 単語が行に収まらない。
Simple
の改行方法を使用する場合、 単語のハイフネーションは、行が 1 つの単語よりも短い場合にのみ できます。 - 適切なハイフネーションが確実に使用されるよう、 システム上にある辞書を使用して判定されます。
あなたへのおすすめ
- 注: JavaScript がオフになっている場合はリンクテキストが表示されます
- テキストのスタイルを設定する
- Compose レイアウトの基本
- Compose レイアウトの固有の測定値