jetpackComposeでTextを装飾するbuildAnnotatedStringを使ってみた

はじめに

JetpackComposeより以前ではSpanを使ってTextの一部などを装飾していましたが、それと同じことをJetpackComposeでやろうとした時にどうやってやるかを調べて使ってみた所 なんとなくで使うには少しクセがあったので自分で公式の内容を触ってみたメモ的なものを記事にして残しておこうかと思います。

buildAnnotatedString

buildAnnotatedString Android公式

公式内での使い方の例で一番簡単なのは実際に使ってみるとこんな感じ

    Column(
        modifier = Modifier
            .fillMaxSize()
            .background(color = Color.White)
    ) {

        Text(text = buildAnnotatedString {
            withStyle(SpanStyle(color = Color.Green)) {
                append("Hello")
            }
        })
    }

withStyle(SpanStyle())で装飾を設定し、{}内にappend()でテキストを設定します。

別の例にあったのはこんな感じ

    Column(
        modifier = Modifier
            .fillMaxSize()
            .background(color = Color.White)
    ) {
        Text(text =  buildAnnotatedString {
            append("Hello")
            pushStyle(SpanStyle(color = Color.Green))
            append(" World")
            pop()
            append("!")
            addStyle(SpanStyle(color = Color.Red), "Hello World".length, this.length)
        })
    }

text に　buildAnnotatedStringを設定し、{}内で装飾をつけていきます。
append()でテキストを設定します。
pushStyle(SpanStyle())で設定された内容は pop()までのテキストに装飾を設定します。
addStyle(SpanStyle())で後から装飾を設定することもできます。
こちらで装飾をつける場合は装飾の範囲を指定する必要があります。

    Column(
        modifier = Modifier
            .fillMaxSize()
            .background(color = Color.White)
    ) {
        Text(text = buildAnnotatedString {
            append("link: Jetpack Compose")
            addStringAnnotation(
                tag = "URL",
                annotation = "https://developer.android.com/jetpack/compose",
                start = 6,
                end = 21
            )
        })
    }

こう言った感じでURLを格納したり、タグをつけることもできる。