JetpackComposeでonTextLayoutを使わないAutoSizeTextを作る
JetpackComposeにautoSizeMaxTextSize,autoSizeMinTextSize,autoSizeStepGranularity,autoSizePresetSizesに対応したTextを作成します。
AutoSizeTextの全ソースはこちらです。
ご自由にどうぞ。もっと効率のいいやり方あったら、コメント or プルリクいただけると泣いて喜びます。
経緯
AutoSizeTextを作ってみたというサンプルに多いのが、「onTextLayout」を使用しているものです。
これは、「描画する」->「表示しきれなかったらフォントサイズを小さくする」->「描画する」繰り返すため、長い文字列だとその小さくなる課程がアニメーションみたいに描画されてしまいます。
TextDelegate
TextDelegateを使うと、実際に描画はされませんが、描画したときに「hasVisualOverflow==true」になるかどうかをチェックすることができます。
var combinedTextStyle = combinedTextStyle.copy(fontSize = tempFontSize)
val textDelegate = TextDelegate(
text = AnnotatedString(text),
style = combinedTextStyle,
maxLines = maxLines,
minLines = 1,
softWrap = true,
overflow = TextOverflow.Clip,
density = LocalDensity.current,
fontFamilyResolver = LocalFontFamilyResolver.current,
)
val textLayoutResult = textDelegate.layout(
constraints, // BoxWithConstraintsScopeで使える制約
layoutDirection = LocalLayoutDirection.current,
)
if (!textLayoutResult.hasVisualOverflow) {
break
}
これを使用して、hasVisualOverflowとなるfontsizeまで繰り返していけば、AutoSizeTextをonTextLayoutなしで実現できます。