[Android / Compose] Text Font에 대한 커스터마이징

안드로이드 컴포즈에서 Text의 Font 사이즈를 지정하는 방법입니다.

보통 Text Size는 시스템 폰트 사이즈를 따라가는 SP 단위를 사용하지만 혹시 자신의 서비스가 인앱에서 텍스트 사이즈 메뉴를 제공한다면 DP를 사용하는 것처럼 고정해 줄 필요가 있습니다.

먼저 해상도별 적절한 크기를 가질 수 있도록 아래 함수를 활용해줍니다.

@Composable
fun dpToSp(dp: Dp) = with(LocalDensity.current) { dp.toSp() }

• @Composable: 이 함수는 Compose 환경에서 호출될 수 있는 함수임을 나타내는 어노테이션입니다.
• dp: Dp: 함수의 인자로 Dp 값을 받습니다. Dp는 화면 밀도에 독립적인 픽셀 단위로, 화면 크기나 해상도에 따라 크기가 변하지 않는 단위입니다.
• with(LocalDensity.current) {... }: 이 부분은 현재의 LocalDensity 값을 사용하여 변환을 수행하는 코드 블록입니다. LocalDensity는 dp, sp, px 간의 변환을 도와주는 Compose의 속성입니다. current는 현재 컴포즈 트리에서 사용 중인 Density 객체를 제공합니다.
• dp.toSp(): 이 메서드는 Dp 값을 Sp 값으로 변환합니다. Sp는 글꼴 크기 등의 텍스트 요소에 사용되는 단위로, 사용자의 폰트 크기 설정에 따라 조정되는 단위입니다.

이제 해당 함수를 활용한 fontSize를 지정한 커스텀 폰트를 같이 활용하여 TextStyle를 만들어줍니다.

@Composable
fun applyFont(font: Typeface?, baseFontSize: Dp): TextStyle =
    TextStyle(
        fontSize = dpToSp(dp = baseFontSize) * AppFont.appFontRatio,
        fontFamily = font?.let { FontFamily(it) }
    )

TextStyle은 Text의 여러 속성을 커스터마이징 할 수 있도록 Compose에서 지원하는 클래스입니다.

주요 속성

• fontSize: 텍스트의 크기를 정의합니다. Sp(scale-independent pixels) 단위로 지정됩니다.
• fontWeight: 텍스트의 두께를 정의합니다. 예를 들어, FontWeight.Bold는 굵은 텍스트를 나타냅니다.
• fontFamily: 텍스트에 사용할 폰트 패밀리를 정의합니다. 예를 들어, FontFamily.SansSerif.
• color: 텍스트의 색상을 지정합니다. Color 객체를 사용하여 정의됩니다.
• letterSpacing: 텍스트의 글자 간 간격을 설정합니다.
• lineHeight: 텍스트의 줄 간 간격을 설정합니다.
• fontStyle: 이 속성은 FontStyle.Italic처럼 텍스트에 이탤릭체를 적용할 수 있습니다.
• textDecoration: 텍스트에 밑줄이나 취소선 등을 추가할 수 있습니다. 예를 들어, TextDecoration.Underline은 밑줄을 추가합니다.

제가 구현한 함수는 간단하게 Size, Family 정도를 활용했습니다. 기획에 따라 커스터마이징이 가능하겠습니다.

fontFamily에는 반드시 Typeface가 들어가야 합니다. 실제로는 아래와 같이 사용됩니다.

Row(
    verticalAlignment = Alignment.CenterVertically,
    horizontalArrangement = Arrangement.Center,
    modifier = Modifier.padding(horizontal = 6.dp)
) {
    Text(
        text = "Test!!",
        color = Color.White,
        fontWeight = FontWeight.Bold,
        textAlign = TextAlign.Center,
        style = applyFont(font = AppFont.mainBold, baseFontSize = 12.dp),
        modifier = Modifier.padding(start = 5.dp, end = 5.dp)
    )
}