ComposeのTextAutoSize

Photo by Lindsay Henwood on Unsplash

Composeにコンポーネントサイズによってテキストサイズを調整してくれる TextAutoSize のAPIが追加されたので、簡単に紹介します。

試したバージョンは 1.8.0-rc01 になります。また、現時点ではMaterial 3のTextには無いので、 BasicText を使います。

単純な使い方

単純に使うときは以下のように autoSize のパラメータを指定するだけです。

Column(
    modifier = Modifier
        .size(
            width = 120.dp,
            height = 40.dp
        )
        .background(Color.LightGray)
) {
    BasicText(
        text = "Hello, World!",
        // ★これを追加
        autoSize = TextAutoSize.StepBased()
    )
}

autoSize = TextAutoSize.StepBased() を追加するだけで、簡単に縦横最大にあうようにテキストサイズが変更されます。

実行すると以下のようになります。

今度は以下のように縦のサイズは設定しないようにしてみます。

Column(
    modifier = Modifier
        .width(120.dp)
        .background(Color.LightGray)
) {
    BasicText(
        text = "Hello, World!",
        autoSize = TextAutoSize.StepBased()
    )
}

これを実行すると、以下のように縦のサイズに合わせようとするため、改行をしつつ可能な限り大きくしようとしますので、注意です。

もし、1行で、横幅に合わせたい場合は、 maxLines = 1 のパラメータを追加すると、1行で横幅に合わせたいサイズになります。

Column(
    modifier = Modifier
        .width(120.dp)
        .background(Color.LightGray)
) {
    BasicText(
        text = "Hello, World!",
        // ★これを追加
        maxLines = 1,
        autoSize = TextAutoSize.StepBased()
    )
}

TextAutoSize.StepBasedについて

上記では、 TextAutoSize.StepBased をそのまま使用していました。この場合はデフォルトで以下のような挙動になります。

• 最小サイズ: 12.sp
• 最大サイズ: 112.sp
• サイズの間隔: 0.25.sp

パラメータを渡すことで、このあたりは簡単に変更可能です。

BasicText(
    text = "Hello, World!",
    maxLines = 1,
    // パラメータを渡してサイズを調整
    autoSize = TextAutoSize.StepBased(
        minFontSize = 8.sp,
        maxFontSize = 32.sp,
        stepSize = 1.sp
    )
)

TextAutoSizeのカスタマイズ

ドキュメントのサンプルにあるのですが、 TextAutoSize を継承することで、カスタマイズすることができます。

data class CustomTextAutoSize(private val presets: Array<TextUnit>) : TextAutoSize {
    override fun TextAutoSizeLayoutScope.getFontSize(
        constraints: Constraints,
        text: AnnotatedString
    ): TextUnit {
        // ...
    }
}

詳細についてはドキュメントのサンプルコードを確認してください。

ポイントとしては、 performLayout を使うことでコンポーネントのサイズを取得できるのでそれを使って、フォントサイズをどうするか決める感じになります。

参考

TextAutoSize | API reference | Android Developers