既存のViewシステムのSpanと同様にJetpack Composeでもテキストの一部を装飾することができるので、実装方法を紹介します。
AnnotatedString
というのを使って実現します。
簡単な実装
これを実行すると以下のような表示になります。
実装をみれば勘の良い方はすぐ理解できると思います。
buildAnnotatedString
関数のブロックで色々を設定していくことになります。実際には AnnotatedString.Builder
を扱いやすくしたものになります。
withStyle
を使ってスタイルを指定して、そのブロック内で装飾したい文字列を append
で追加していきます。
withStyle
を使わずに append
をした場合は、 Text
Composable関数で指定したスタイルが適用されます。
スタイルには SpanStyle
と ParagraphStyle
が使えます。違いとしては文字単位に適用するか、段落単位で適用するかになります。
テキストの一部をクリック可能にする
テキストの装飾とあわせて、テキストの一部をクリックに対応したい場合があります。例えば、テキスト中にリンクがある場合などですね。
実装は以下のようになります。
実行結果は以下のようになり、Androidの箇所をクリックするとブラウザが開きます。
実装のほうにコメントを書いてるので、そちらを見ると何をやってるかはだいたい分かるかと思います。
pushStringAnnotation
を使ってテキストに tag
と annotation
を追加しています。この情報をあとから使います。
テキストをクリックできるようにするには ClickableText
を使います。その onClick
にてクリックされた箇所が渡されるので、それを元に pushStringAnnotation
で追加された情報( AnnotatedString.Range
)を取得しています。
ちょっと分かりにくいですが、 AnnotatedString.Range
の item
は pushStringAnnotation
の annotation
引数に渡した値になります。
pushStringAnnotation
以外にも、 addStringAnnotation
であとから範囲を指定してAnnotationをテキストに追加することもできます。