<div id="readability-page-1" class="page"><div>
 
 
 <a href="/blog/android/2025/03/28/compose-autotextsize/"><h3>Compose에서 AutoTextSize 사용하기</h3></a>
 <csmall>Mar 28, 2025. | By:
 
 pluulove
 
 </csmall>
 
 Android 개발 시 텍스트 크기의 자동 변경은 ellipsize와 더불어 특별하게 텍스트를 표현하는 방법입니다. 제한된 영역에 노출할 텍스트의 중요도에 맞춰 개발자는 다양한 방법 중 하나를 선택할 수 있습니다.



일반적으로 아래 API 혹은 패턴을 조합하여 사용됩니다.

<ul>
 <li>ellipsize API 사용</li>
 <li>max lines API 사용</li>
 <li>Auto Text Size API 사용 &lt;– 이번 블로그의 내용</li>
 <li><code>더 보기</code>와 같이 커스텀 텍스트 노출</li>
</ul>

Compose의 TextAutoSize API는 사용할 수 있는 공간에 맞는 <code>가장 큰 글꼴 크기</code>로 텍스트 크기를 자동 조정됩니다. 이 스펙은 XML에서도 동일하게 적용됩니다

<blockquote>
 XML의 <a href="https://developer.android.com/develop/ui/views/text-and-emoji/autosizing-textview">Autosize TextViews</a>
</blockquote>

곧 Compose에도 <a href="https://developer.android.com/reference/kotlin/androidx/compose/foundation/text/TextAutoSize">AutoTextSize</a>가 정식 지원될 예정이지만, 현재 1.8.0 rc01에서 사용할 수 있습니다.

<hr>

본 글에서 사용된 코드는 아래 버전 기준입니다

<ul>
 <li>AndroidX compose foundation 1.8.0 rc01</li>
</ul>

<hr>

테스트로 사용한 코드는 아래와 같습니다.

<ol>
 <li>1234567890 노출</li>
 <li>ABCDEFGHIJKLMNOPQRSTUVWXYZ 3번 반복 노출</li>
</ol>

<div><pre><code>@Composable
fun SampleTextAutoSizePreview() {
 ComposeSamplesTheme {
 Column(
 modifier = Modifier.padding(8.dp),
 verticalArrangement = Arrangement.spacedBy(8.dp)
 ) {
 // 1234567890 노출
 SampleTextAutoSize(
 text = "1234567890"
 )
 
 // ABCDEFGHIJKLMNOPQRSTUVWXYZ 3번 반복 노출
 SampleTextAutoSize(
 text = buildString {
 repeat(3) {
 append("ABCDEFGHIJKLMNOPQRSTUVWXYZ")
 }
 }
 )
 }
 }
}
</code></pre></div>

아쉽게도 아직 <a href="https://developer.android.com/reference/kotlin/androidx/compose/material/package-summary#Text(androidx.compose.ui.text.AnnotatedString,androidx.compose.ui.Modifier,androidx.compose.ui.graphics.Color,androidx.compose.ui.unit.TextUnit,androidx.compose.ui.text.font.FontStyle,androidx.compose.ui.text.font.FontWeight,androidx.compose.ui.text.font.FontFamily,androidx.compose.ui.unit.TextUnit,androidx.compose.ui.text.style.TextDecoration,androidx.compose.ui.text.style.TextAlign,androidx.compose.ui.unit.TextUnit,androidx.compose.ui.text.style.TextOverflow,kotlin.Boolean,kotlin.Int,kotlin.Int,kotlin.collections.Map,kotlin.Function1,androidx.compose.ui.text.TextStyle)">Text</a> Composable에는 <a href="https://developer.android.com/reference/kotlin/androidx/compose/foundation/text/TextAutoSize">TextAutoSize</a> API는 미지원입니다. 그러므로 <a href="https://developer.android.com/reference/kotlin/androidx/compose/foundation/text/package-summary#BasicText(kotlin.String,androidx.compose.ui.Modifier,androidx.compose.ui.text.TextStyle,kotlin.Function1,androidx.compose.ui.text.style.TextOverflow,kotlin.Boolean,kotlin.Int,kotlin.Int,androidx.compose.ui.graphics.ColorProducer,androidx.compose.foundation.text.TextAutoSize)">BasicText</a>를 사용합니다.

<h2 id="기본-테스트">기본 테스트</h2>

기본적으로 Compose에서 <a href="https://developer.android.com/reference/kotlin/androidx/compose/foundation/text/TextAutoSize#StepBased(androidx.compose.ui.unit.TextUnit,androidx.compose.ui.unit.TextUnit,androidx.compose.ui.unit.TextUnit)">TextAutoSize.StepBase</a> API를 사용하여 텍스트 자동 크기를 사용할 수 있습니다.

<ul>
 <li>minFontSize : 기본값 12sp, <a href="https://developer.android.com/reference/kotlin/androidx/compose/foundation/text/TextAutoSizeDefaults#MinFontSize()">TextAutoSizeDefaults.MinFontSize</a></li>
 <li>maxFontSize : 기본값 112sp, <a href="https://developer.android.com/reference/kotlin/androidx/compose/foundation/text/TextAutoSizeDefaults#MaxFontSize()">TextAutoSizeDefaults.MaxFontSize</a></li>
 <li>stepSize : 기본값 0.25sp</li>
</ul>

아래 샘플에서는 <code>최소 12sp, 최대 48sp, 1sp 단위로 증감</code>으로 사용된 코드입니다.

<div><pre><code>@Composable
fun SampleTextAutoSize(
 text: String,
 backgroundColor: Color,
) {
 BasicText(
 text = text,
 autoSize = TextAutoSize.StepBased(
 minFontSize = 12.sp, // Default, 12.sp
 maxFontSize = 48.sp, // Default, 48.sp
 stepSize = 1.sp // Default, 1.sp
 ),
 modifier = Modifier
 .background(Color(0xFFFFEE58)),
 )
}
</code></pre></div>

샘플 결과물처럼 기대와 다르게 AutoTextSize API는 동작하지 않습니다. 기본 Auto Size은 제한된 공간에 텍스트 노출을 위한 스펙인데, 위 샘플은 XML의 wrap_content와 동일하게 가변 영역이기 때문입니다.

<img src="http://pluu.github.io/assets/img/blog/2025/2025-03-27-compose-autotextsize/01.png">

<h2 id="기본-테스트--maxlines--1">기본 테스트 + maxLines = 1</h2>

사용 API : <a href="https://developer.android.com/reference/kotlin/androidx/compose/foundation/text/TextAutoSize#StepBased(androidx.compose.ui.unit.TextUnit,androidx.compose.ui.unit.TextUnit,androidx.compose.ui.unit.TextUnit)">TextAutoSize.StepBase</a>
<ul>
 <li>최소 12sp, 최대 48sp, 1sp 단위로 증감</li>
 <li>최대 라인수 1</li>
</ul>

<div><pre><code>@Composable
fun SampleTextAutoSize(
 text: String,
 backgroundColor: Color,
) {
 BasicText(
 text = text,
 maxLines = 1,
 autoSize = TextAutoSize.StepBased(
 minFontSize = 12.sp,
 maxFontSize = 48.sp,
 stepSize = 1.sp
 ),
 modifier = Modifier
 .background(backgroundColor),
 )
}
</code></pre></div>

이전 샘플에서 <code>maxLines을 1로 고정</code>으로 추가한 경우에는 AutoTextSize API가 유효하게 동작합니다. wrap_content이지만 width가 제한되므로 동작하게 됩니다.

<img src="http://pluu.github.io/assets/img/blog/2025/2025-03-27-compose-autotextsize/02.png">

<h2 id="bounds-고정">Bounds 고정</h2>

사용 API : <a href="https://developer.android.com/reference/kotlin/androidx/compose/foundation/text/TextAutoSize#StepBased(androidx.compose.ui.unit.TextUnit,androidx.compose.ui.unit.TextUnit,androidx.compose.ui.unit.TextUnit)">TextAutoSize.StepBase</a>

<ul>
 <li>최소 12sp, 최대 48sp, 1sp 단위로 증감</li>
 <li>Modifier#size로 150.dp 사용</li>
</ul>

<div><pre><code>@Composable
fun SampleTextAutoSize(
 text: String,
 backgroundColor: Color,
) {
 BasicText(
 text = text,
 autoSize = TextAutoSize.StepBased(
 minFontSize = 12.sp,
 maxFontSize = 48.sp,
 stepSize = 1.sp
 ),
 modifier = Modifier
 .size(150.dp, 150.dp)
 .background(backgroundColor),
 )
}
</code></pre></div>

이번 샘플에서도 Text의 <code>영역이 고정</code>되므로 AutoTextSize API가 유효하게 동작합니다.

<img src="http://pluu.github.io/assets/img/blog/2025/2025-03-27-compose-autotextsize/03.png">

<h2 id="커스텀-textsize-구하기">커스텀 TextSize 구하기</h2>

API : <a href="https://developer.android.com/reference/kotlin/androidx/compose/foundation/text/TextAutoSize#(androidx.compose.foundation.text.modifiers.TextAutoSizeLayoutScope).getFontSize(androidx.compose.ui.unit.Constraints,androidx.compose.ui.text.AnnotatedString)">TextAutoSizeLayoutScope.getFontSize</a>

기본 제공이 아닌 자신만의 커스텀 텍스트 사이즈 제공도 가능합니다. <a href="https://developer.android.com/reference/kotlin/androidx/compose/foundation/text/TextAutoSize#(androidx.compose.foundation.text.modifiers.TextAutoSizeLayoutScope).getFontSize(androidx.compose.ui.unit.Constraints,androidx.compose.ui.text.AnnotatedString)">TextAutoSizeLayoutScope.getFontSize</a>를 사용하여 폰트 크기를 계산, 텍스트를 layout/measured size를 사용하는 <a href="https://developer.android.com/reference/kotlin/androidx/compose/foundation/text/modifiers/TextAutoSizeLayoutScope#performLayout(androidx.compose.ui.unit.Constraints,androidx.compose.ui.text.AnnotatedString,androidx.compose.ui.unit.TextUnit)">TextAutoSizeLayoutScope.performLayout</a>을 사용하여 텍스트 사이즈 계산이 가능합니다.

<div><pre><code>data class PresetsTextAutoSize(
 private val presets: Array&lt;TextUnit&gt;
) : TextAutoSize {
 override fun TextAutoSizeLayoutScope.getFontSize(
 constraints: Constraints,
 text: AnnotatedString
 ): TextUnit {
 var lastTextSize: TextUnit = TextUnit.Unspecified
 for (presetSize in presets) {
 val layoutResult = performLayout(constraints, text, presetSize)
 if (
 layoutResult.size.width &lt;= constraints.maxWidth &amp;&amp;
 layoutResult.size.height &lt;= constraints.maxHeight
 ) {
 lastTextSize = presetSize
 } else {
 break
 }
 }
 return lastTextSize
 }
}
</code></pre></div>

<blockquote>
 소스 출처 : https://developer.android.com/reference/kotlin/androidx/compose/foundation/text/TextAutoSize#(androidx.compose.foundation.text.modifiers.TextAutoSizeLayoutScope).getFontSize(androidx.compose.ui.unit.Constraints,androidx.compose.ui.text.AnnotatedString)
</blockquote>


 

 
 

 


<a href="http://disqus.com/">comments powered by </a>
 
 </div></div>

Pluu Dev

Android 개발 시 텍스트 크기의 자동 변경은 ellipsize와 더불어 특별하게 텍스트를 표현하는 방법입니다. 제한된 영역에 노출할 텍스트의 중요도에 맞춰 개발자는 다양한 방법 중 하나를 선택할 수 있습니다.
일반적으로 아래 API 혹은 패턴을 조합하여 사용됩니다.
ellipsize API 사용
max lines API 사용
Auto Text Size API 사용 <– 이번 블로그의 내용
더 보기와 같이 커스텀 텍스트 노출
Compose의 TextAutoSize API는 사용할 수 있는 공간에 맞는 가장 큰 글꼴 크기로 텍스트 크기를 자동 조정됩니다. 이 스펙은 XML에서도 동일하게 적용됩니다
XML의 Autosize TextViews
곧 Compose에도 AutoTextSize가 정식 지원될 예정이지만, 현재 1.8.0 rc01에서 사용할 수 있습니다.
본 글에서 사용된 코드는 아래 버전 기준입니다
AndroidX compose foundation 1.8.0 rc01
테스트로 사용한 코드는 아래와 같습니다.
1234567890 노출
ABCDEFGHIJKLMNOPQRSTUVWXYZ 3번 반복 노출
@Composable
fun SampleTextAutoSizePreview() {
 ComposeSamplesTheme {
 Column(
 modifier = Modifier.padding(8.dp),
 verticalArrangement = Arrangement.spacedBy(8.dp)
 ) {
 // 1234567890 노출
 SampleTextAutoSize(
 text = "1234567890"
 )
 
 // ABCDEFGHIJKLMNOPQRSTUVWXYZ 3번 반복 노출
 SampleTextAutoSize(
 text = buildString {
 repeat(3) {
 append("ABCDEFGHIJKLMNOPQRSTUVWXYZ")
 }
 }
 )
 }
 }
}
아쉽게도 아직 Text Composable에는 TextAutoSize API는 미지원입니다. 그러므로 BasicText를 사용합니다.
기본 테스트
기본적으로 Compose에서 TextAutoSize.StepBase API를 사용하여 텍스트 자동 크기를 사용할 수 있습니다.
minFontSize : 기본값 12sp, TextAutoSizeDefaults.MinFontSize
maxFontSize : 기본값 112sp, TextAutoSizeDefaults.MaxFontSize
stepSize : 기본값 0.25sp
아래 샘플에서는 최소 12sp, 최대 48sp, 1sp 단위로 증감으로 사용된 코드입니다.
@Composable
fun SampleTextAutoSize(
 text: String,
 backgroundColor: Color,
) {
 BasicText(
 text = text,
 autoSize = TextAutoSize.StepBased(
 minFontSize = 12.sp, // Default, 12.sp
 maxFontSize = 48.sp, // Default, 48.sp
 stepSize = 1.sp // Default, 1.sp
 ),
 modifier = Modifier
 .background(Color(0xFFFFEE58)),
 )
}
샘플 결과물처럼 기대와 다르게 AutoTextSize API는 동작하지 않습니다. 기본 Auto Size은 제한된 공간에 텍스트 노출을 위한 스펙인데, 위 샘플은 XML의 wrap_content와 동일하게 가변 영역이기 때문입니다.
기본 테스트 + maxLines = 1
사용 API : TextAutoSize.StepBase
최소 12sp, 최대 48sp, 1sp 단위로 증감
최대 라인수 1
@Composable
fun SampleTextAutoSize(
 text: String,
 backgroundColor: Color,
) {
 BasicText(
 text = text,
 maxLines = 1,
 autoSize = TextAutoSize.StepBased(
 minFontSize = 12.sp,
 maxFontSize = 48.sp,
 stepSize = 1.sp
 ),
 modifier = Modifier
 .background(backgroundColor),
 )
}
이전 샘플에서 maxLines을 1로 고정으로 추가한 경우에는 AutoTextSize API가 유효하게 동작합니다. wrap_content이지만 width가 제한되므로 동작하게 됩니다.
Bounds 고정
사용 API : TextAutoSize.StepBase
최소 12sp, 최대 48sp, 1sp 단위로 증감
Modifier#size로 150.dp 사용
@Composable
fun SampleTextAutoSize(
 text: String,
 backgroundColor: Color,
) {
 BasicText(
 text = text,
 autoSize = TextAutoSize.StepBased(
 minFontSize = 12.sp,
 maxFontSize = 48.sp,
 stepSize = 1.sp
 ),
 modifier = Modifier
 .size(150.dp, 150.dp)
 .background(backgroundColor),
 )
}
이번 샘플에서도 Text의 영역이 고정되므로 AutoTextSize API가 유효하게 동작합니다.
커스텀 TextSize 구하기
API : TextAutoSizeLayoutScope.getFontSize
기본 제공이 아닌 자신만의 커스텀 텍스트 사이즈 제공도 가능합니다. TextAutoSizeLayoutScope.getFontSize를 사용하여 폰트 크기를 계산, 텍스트를 layout/measured size를 사용하는 TextAutoSizeLayoutScope.performLayout을 사용하여 텍스트 사이즈 계산이 가능합니다.
data class PresetsTextAutoSize(
 private val presets: Array<TextUnit>
) : TextAutoSize {
 override fun TextAutoSizeLayoutScope.getFontSize(
 constraints: Constraints,
 text: AnnotatedString
 ): TextUnit {
 var lastTextSize: TextUnit = TextUnit.Unspecified
 for (presetSize in presets) {
 val layoutResult = performLayout(constraints, text, presetSize)
 if (
 layoutResult.size.width <= constraints.maxWidth &&
 layoutResult.size.height <= constraints.maxHeight
 ) {
 lastTextSize = presetSize
 } else {
 break
 }
 }
 return lastTextSize
 }
}
소스 출처 : https://developer.android.com/reference/kotlin/androidx/compose/foundation/text/TextAutoSize#(androidx.compose.foundation.text.modifiers.TextAutoSizeLayoutScope).getFontSize(androidx.compose.ui.unit.Constraints,androidx.compose.ui.text.AnnotatedString)

Blog: Compose에서 AutoTextSize 사용하기

댓글