Compose - Typegraphy로 TextStyle 일괄 지정(Feat. textSize를 dp로)

디자인 QA를 하던중 시스템 설정에서 글자 크기를 변경했을 때 시스템 설정 값을 따라가지 않고 모든 기기 똑같이 노출해달라.

Compose에서 Text의 fontSize를 sp로 지정하게 되면 시스템 설정을 따라가게 되고 dp로 설정해야만 절대값으로 유지되는 것을 알았다.

근데 TextStyle로 모두 고정시켜서 style에 지정해주고 있던 난 dp로 설정하려고 난리를 치다 결국 아래와 같이 설정하게 됐다.

 

 

이번에 배운 것!

1. Compose에서는 fontSize를 정할 때 sp를 선언해줘야한다.

2. 꼭 dp로 fontSize를 선언해줘야 한다면, 아래와 같이 선언 해주면 된다.

(무조건 Composable 어노테이션을 추가해줘야만 가능한 함수이다)

3. 하지만 디자이너와 일하면서 textStyle 같이 정해져 있는 font, fontWeight, fontSize를 자동 적용시켜주고 싶다.

 

그래서 Compose 액티비티를 새로 만들면 자동으로 생성해주는 type.kt 파일에 Typography 가 선언 되어있다.

New -> Compose -> Empty Activity를 만들면 자동으로 생성되는 파일

여기를 좀 바꿔줄 것이다.

(그냥 따로 파일을 만들어줘도 상관없다!)

 

1. Int를 dp로 바꿔주는 함수를 만들어준다.

val Int.nonScaledSp
    @Composable
    get() = (this / LocalDensity.current.fontScale).sp
    
    // 사용은 int값 뒤에 변수명을 써주면 된다.
    // ex) 15.nonScaledSp, 24.nonScaledSp

2. Enum class를 만들어 디자이너가 정한 TextStyle의 이름을 써준다.

enum class TextStyleEnum {
    TitleLarge, TitleMedium, TitleSmall, BodyLarge, BodyMedium, BodySmall 
    // 필요시 더 추가해서 사용하면 된다. ex) content1, subTextSmall
}

3. when문이나 if-else문을 만들어서 필요한 TextUnit( = Typography)을 만들어준다. 

@Composable
fun typography(textStyle: TextStyleEnum): TextStyle {
    return when (textStyle) {
        TextStyleEnum.TitleLarge -> {
            TextStyle(
                fontFamily = Pretendard,
                fontWeight = FontWeight.Bold,
                fontSize = 20.nonScaledSp
            )
        }

        TextStyleEnum.TitleMedium -> {
            TextStyle(
                fontFamily = Pretendard,
                fontWeight = FontWeight.Bold,
                fontSize = 17.nonScaledSp
            )
        }

// 중간 생략...

        TextStyleEnum.BodySmall -> {
            TextStyle(
                fontFamily = Pretendard,
                fontWeight = FontWeight.Normal,
                fontSize = 12.nonScaledSp,
                lineHeight = 16.nonScaledSp,
            )
        }
    }
}

4 . 필요한 곳에 넣어주면 끝!

@Composable
fun Greeting(name: String, modifier: Modifier = Modifier) {
    Text(
        text = "Hello $name!",
        modifier = modifier,
        style = typography(TextStyleEnum.BodyMedium) // <- 이런식으로 사용!!
    )
}

5. 파일 전문.

package com.example.blog.ui.theme

import androidx.compose.material3.Typography
import androidx.compose.runtime.Composable
import androidx.compose.ui.platform.LocalDensity
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.text.font.Font
import androidx.compose.ui.text.font.FontFamily
import androidx.compose.ui.text.font.FontStyle
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.unit.sp
import com.example.blog.R

// Set of Material typography styles to start with
val Pretendard = FontFamily(
// 각자 사용할 폰트를 추가해주면 된다.
    Font(R.font.pretendard_regular, FontWeight.Normal, FontStyle.Normal), 
    Font(R.font.pretendard_bold, FontWeight.Bold, FontStyle.Normal)
)

enum class TextStyleEnum {
    TitleLarge, TitleMedium, TitleSmall, BodyLarge, BodyMedium, BodySmall
}

val Int.nonScaledSp
    @Composable
    get() = (this / LocalDensity.current.fontScale).sp
@Composable
fun typography(textStyle: TextStyleEnum): TextStyle {
    return when (textStyle) {
        TextStyleEnum.TitleLarge -> {
            TextStyle(
                fontFamily = Pretendard,
                fontWeight = FontWeight.Bold,
                fontSize = 20.nonScaledSp
            )
        }

        TextStyleEnum.TitleMedium -> {
            TextStyle(
                fontFamily = Pretendard,
                fontWeight = FontWeight.Bold,
                fontSize = 17.nonScaledSp
            )
        }

        TextStyleEnum.TitleSmall -> {
            TextStyle(
                fontFamily = Pretendard,
                fontWeight = FontWeight.Bold,
                fontSize = 15.nonScaledSp,
                lineHeight = 20.nonScaledSp,
            )
        }

        TextStyleEnum.BodyLarge -> {
            TextStyle(
                fontFamily = Pretendard,
                fontWeight = FontWeight.Normal,
                fontSize = 17.nonScaledSp,
                lineHeight = 23.nonScaledSp,
            )
        }

        TextStyleEnum.BodyMedium -> {
            TextStyle(
                fontFamily = Pretendard,
                fontWeight = FontWeight.Normal,
                fontSize = 15.nonScaledSp,
                lineHeight = 22.nonScaledSp,
            )
        }

        TextStyleEnum.BodySmall -> {
            TextStyle(
                fontFamily = Pretendard,
                fontWeight = FontWeight.Normal,
                fontSize = 12.nonScaledSp,
                lineHeight = 16.nonScaledSp,
            )
        }
    }
}

val Typography = Typography(
    // title
    titleMedium = TextStyle(
        fontFamily = Pretendard,
        fontWeight = FontWeight.Bold,
        fontSize = 17.sp
    ),
    titleSmall = TextStyle(
        fontFamily = Pretendard,
        fontWeight = FontWeight.Bold,
        fontSize = 15.sp,
        lineHeight = 20.sp,
    ),

    // body
    bodyLarge = TextStyle(
        fontFamily = Pretendard,
        fontWeight = FontWeight.Normal,
        fontSize = 17.sp,
        lineHeight = 23.sp,
    ),
    bodyMedium = TextStyle(
        fontFamily = Pretendard,
        fontWeight = FontWeight.Normal,
        fontSize = 15.sp,
        lineHeight = 22.sp,
    ),
    bodySmall = TextStyle(
        fontFamily = Pretendard,
        fontWeight = FontWeight.Normal,
        fontSize = 12.sp,
        lineHeight = 16.sp,
    ),
)

 

xml을 벗어나 Compose를 도입하고 나니 개발을 처음 했던 시절(그리 멀지도 않음...)도 생각나고 더 배우고 찾다 보니 개발이 더 재밌어 지고 있다.

 

유지/보수를 편하게 하고 수정되더라도 유연하게 적용할줄 아는 개발자가 되기 위해 더 나아가야겠다.

 

 

 

끝