Jetpack Composeでテキストの一部を装飾する

既存のViewシステムのSpanと同様にJetpack Composeでもテキストの一部を装飾することができるので、実装方法を紹介します。

AnnotatedString というのを使って実現します。

簡単な実装

これを実行すると以下のような表示になります。

実装をみれば勘の良い方はすぐ理解できると思います。

buildAnnotatedString 関数のブロックで色々を設定していくことになります。実際には AnnotatedString.Builder を扱いやすくしたものになります。

withStyle を使ってスタイルを指定して、そのブロック内で装飾したい文字列を append で追加していきます。

withStyleを使わずに appendをした場合は、 Text Composable関数で指定したスタイルが適用されます。

スタイルには SpanStyleParagraphStyle が使えます。違いとしては文字単位に適用するか、段落単位で適用するかになります。

テキストの一部をクリック可能にする

テキストの装飾とあわせて、テキストの一部をクリックに対応したい場合があります。例えば、テキスト中にリンクがある場合などですね。

実装は以下のようになります。

実行結果は以下のようになり、Androidの箇所をクリックするとブラウザが開きます。

実装のほうにコメントを書いてるので、そちらを見ると何をやってるかはだいたい分かるかと思います。

pushStringAnnotation を使ってテキストに tagannotation を追加しています。この情報をあとから使います。

テキストをクリックできるようにするには ClickableText を使います。その onClick にてクリックされた箇所が渡されるので、それを元に pushStringAnnotation で追加された情報( AnnotatedString.Range )を取得しています。

ちょっと分かりにくいですが、 AnnotatedString.RangeitempushStringAnnotationannotation 引数に渡した値になります。

pushStringAnnotation 以外にも、 addStringAnnotation であとから範囲を指定してAnnotationをテキストに追加することもできます。

参考

https://developer.android.com/jetpack/compose/text

Jetpack Composeのサンプルで使われてる箇所

Programmer / Gamer / Google Developers Expert for Android, Kotlin / @STAR_ZERO