既存の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をテキストに追加することもできます。
