1
0

More than 1 year has passed since last update.

お題は不問!Qiita Engineer Festa 2023で記事投稿!

JetpackComposeでonTextLayoutを使わないAutoSizeTextを作る

Posted at

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なしで実現できます。

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0