🔠
Jetpack compose 1.8.0 から使える TextAutoSize を試してみる
Jetpack compose 1.8.0 がリリース
- AutoFill の追加
-
AnnotatedString.fromHtmlに<ul>タグが使えるようになった - 70 個も試験的 API が削減された（安定化した）
など、様々な変更がありました。
更新内容は上記の開発者ブログを見ていただきたいのですが、今回は表題通り Jetpack compose 1.8.0 から使える TextAutoSize を使用していきたいと思います。
環境
- Android Studio Android Studio Meerkat | 2024.3.1 Patch 2
- Kotlin 2.1.0
- Jetpack compose BoM 2025.04.01
- androidx.compose.foundation:foundation 1.8.0
シンプル実装
@Composable
fun AutoSizeTextSample(modifier: Modifier = Modifier) {
Box(modifier = modifier) {
BasicText(
text = "Hello World",
autoSize = TextAutoSize.StepBased(),
)
}
}
縦幅、横幅に合わせて文字のサイズが変更されます。
maxLines = 1 が設定されている場合
@Composable
fun AutoSizeTextSampleSingleLine(modifier: Modifier = Modifier) {
Box(modifier = modifier) {
BasicText(
text = "Hello World",
maxLines = 1,
autoSize = TextAutoSize.StepBased(),
)
}
}
開発ブログに記載されているサンプルコード。
maxLines に 1 が設定されていると、横幅に応じて文字サイズが変更されます。
⚠️ 同時に overflow = TextOverflow.Ellipsis が設定されている場合
@Composable
fun AutoSizeTextSingleLineEllipsisSample(modifier: Modifier = Modifier) {
Box(modifier = modifier) {
BasicText(
text = "Hello World",
overflow = TextOverflow.Ellipsis,
maxLines = 1,
autoSize = TextAutoSize.StepBased(),
)
}
}
この場合、設定されている最小のフォントサイズまで縮小しても収まりきらなかった場合 … で表現してくれるかと思いきや、幅に余裕があっても最小のフォントサイズで表示されます。
上: Ellipsis なし、下: Ellipsis あり
現状、共生は難しそうなので、AutoSize か Ellipsis のどちらかにするのが良さそう。
上: Ellipsis なし、下: Ellipsis あり
TextAutoSize.StepBased() の引数
| 引数 | デフォルト値 | 説明 |
|---|---|---|
| minFontSize | 12.sp | 最小フォントサイズmaxFontSize以下である必要がある |
| maxFontSize | 112.sp | 最大フォントサイズminFontSize以上である必要がある |
| stepSize | 0.25.sp | フォントサイズ間のステップ 0.0001f.sp 以上である必要がある |
感想
実装される以前では、要件を満たすために onTextLayout で無理やり実装していましたが、recomposition が果てしなく行われるという状況で頭を悩ませてたのですが、かなり簡単に実装できて助かりました。
Jetpack compose 1.8.0 関連の記事
Discussion