AnnotatedString：装飾付きの混在テキスト
1つのTextブロック内のスパンを装飾します。
「AnnotatedString：装飾付きの混在テキスト」はCoddyKit上の無料Jetpack Compose Academyレッスンです。 これはレッスン4/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはJetpack Compose Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Jetpack Compose Academyコースには全4レッスンが含まれています。
1つのTextに複数のスタイル
文章中の1語だけを目立たせたいことがあります。AnnotatedStringを使うと、1つのText composable内の各スパンにスタイルを設定できます。
Textを2つ使わない理由
単語を別々のTextに分けることもできますが、折り返しが不自然になります。AnnotatedStringなら、すべてを1つの流れるテキストとして自然に折り返せます。
buildAnnotatedStringで構築する
buildAnnotatedStringビルダーを使ってリッチテキストを作成します。その中で、表示したい順番に通常のテキストとスタイル付きの部分を追加します。
val s = buildAnnotatedString {
append("Hello ")
}通常のテキストを追加する
appendを使って通常の文字を追加します。呼び出しは順番に積み重なるため、最終的な文字列は追加した順序どおりになります。
append("Welcome, ")
append("friend")スパンにスタイルを設定する
テキストの一部をwithStyleで囲み、SpanStyleを指定します。そのブロック内で追加されたすべてのテキストに、そのスタイルが適用されます。
withStyle(SpanStyle(fontWeight = FontWeight.Bold)) {
append("important")
}SpanStyleのオプション
SpanStyleでは、color、fontWeight、fontStyle、fontSizeなどを設定できます。そのため、各スパンを隣接する部分とまったく異なる見た目にできます。
SpanStyle(color = Color.Blue,
fontWeight = FontWeight.Bold)Textに表示する
完成したAnnotatedStringを、通常の文字列と同じようにそのままTextへ渡します。Composeがスタイル付きの各スパンを適切な位置に描画します。
Text(text = annotatedGreeting)太字と色を組み合わせる
スパンは自由に組み合わせられます。通常の文章の隣に、太字で赤い単語を置くこともできます。各withStyleブロックの影響を受けるのは、その中で追加されたテキストだけです。🙂
ブロックにはParagraphStyle
配置や間隔など、行単位の変更にはSpanStyleではなくParagraphStyleを使います。ParagraphStyleは単語単位ではなく、段落全体にスタイルを設定します。
クリックできる単語にタグを付ける
LinkAnnotationを付けると、テキストの一部をタップ可能にできます。インラインリンクや利用規約の行に最適です。
1つの要素でリッチテキスト
AnnotatedStringを使うと、1つのTextでスタイルの混在、リンク、強調を表現できます。自然で表現力豊かな文章を作る方法です。
確認問題
1つのText内にある通常の文章の中で、1語だけを太字にしたい場合、何を使いますか？
振り返り
buildAnnotatedStringでリッチテキストを作成し、withStyleとSpanStyleでスパンにスタイルを設定しました。これで、1つのTextに複数の見た目を同時に含められます。🎉
AI チューターと学ぶ Kotlin — 無料
ブラウザでリアルコードを書いて実行し、24/7 の AI チューターから瞬時にサポートを受け、ウェブまたはアプリで続きから学習できます。
- コース
- 30
- レッスン
- 120
よくある質問
「AnnotatedString：装飾付きの混在テキスト」レッスンは無料ですか？
はい。「AnnotatedString：装飾付きの混在テキスト」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Jetpack Compose Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Jetpack Compose Academyコースには全4レッスンが含まれています。
「AnnotatedString：装飾付きの混在テキスト」で何を学びますか？
1つのTextブロック内のスパンを装飾します。 ブラウザで直接実行するハンズオンコードでJetpack Compose Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
Jetpack Compose Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのJetpack Compose Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン4/4です。
「AnnotatedString：装飾付きの混在テキスト」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このJetpack Compose Academyレッスンでコードを書いて実行できますか？
はい。すべてのJetpack Compose Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- Text Composable
- フォントサイズ、太さ、スタイル
- 色、配置、オーバーフロー
- AnnotatedString：装飾付きの混在テキスト