TiTi Side Project | Theme Typography 세팅

폰트 설정

FontFamily를 사용하여 여러 가지 글꼴을 정의하고 있습니다. 예를 들어, hgggothicssiProFontFamily에는 여러 가지 두께의 글꼴이 포함되어 있습니다. 이를 사용하여 텍스트 스타일에서 해당 글꼴을 참조할 수 있습니다.

val hgggothicssiProFontFamily = FontFamily(
    Font(R.font.hgggothicssi_pro_00g, FontWeight.Thin),
    Font(R.font.hgggothicssi_pro_20g, FontWeight.ExtraLight),
    Font(R.font.hgggothicssi_pro_40g, FontWeight.Normal),
    Font(R.font.hgggothicssi_pro_60g, FontWeight.SemiBold),
    Font(R.font.hgggothicssi_pro_80g, FontWeight.ExtraBold),
    Font(R.font.hgggothicssi_pro_99g, FontWeight.Black)
)

커스텀 텍스트 스타일 설정

폰트를 설정한 후에는 텍스트 스타일을 정의하여 해당 폰트와 글꼴 두께를 사용할 수 있습니다. 예를 들어, TdsTypography 클래스에서는 다양한 텍스트 스타일을 정의하고 있습니다.

@Immutable
data class TdsTypography(
    val thinTextStyle: TextStyle = TextStyle(
        fontFamily = hgggothicssiProFontFamily,
        fontWeight = FontWeight.Thin,
        fontSize = 1.sp,
    ),
    val extraLightTextStyle: TextStyle = TextStyle(
        fontFamily = hgggothicssiProFontFamily,
        fontWeight = FontWeight.ExtraLight,
        fontSize = 1.sp,
    ),
    val normalTextStyle: TextStyle = TextStyle(
        fontFamily = hgggothicssiProFontFamily,
        fontWeight = FontWeight.Normal,
        fontSize = 1.sp,
    ),
    val semiBoldTextStyle: TextStyle = TextStyle(
        fontFamily = hgggothicssiProFontFamily,
        fontWeight = FontWeight.SemiBold,
        fontSize = 1.sp,
    ),
    val extraBoldTextStyle: TextStyle = TextStyle(
        fontFamily = hgggothicssiProFontFamily,
        fontWeight = FontWeight.ExtraBold,
        fontSize = 1.sp,
    ),
    val blackTextStyle: TextStyle = TextStyle(
        fontFamily = hgggothicssiProFontFamily,
        fontWeight = FontWeight.Black,
        fontSize = 1.sp,
    ),
)

fontSize는 해당 TextStyle을 가져와 .copy() 메서드를 통해 따로 정의하도록 하기위해 1.sp만 두었습니다.

커스텀 테마 설정

커스텀 테마를 설정하여 앱의 색상과 텍스트 스타일을 일관되게 적용할 수 있습니다. TiTiTheme 객체를 통해 커스텀 테마를 정의하고 있으며, TiTiTheme의 colors 및 textStyle 속성을 사용하여 테마와 텍스트 스타일을 쉽게 가져올 수 있습니다.

object TiTiTheme {
    val colors: TdsColorsPalette
        @Composable
        get() = LocalTiTiColors.current

    val textStyle: TdsTypography
        @Composable
        get() = LocalTiTiTypography.current
}

커스텀 테마 적용

@Composable
fun TiTiTheme(
    darkTheme: Boolean = isSystemInDarkTheme(),
    tdsTypography: TdsTypography = TiTiTheme.textStyle,
    content: @Composable () -> Unit,
) {
    val tdsColorsPalette =
        if (darkTheme) TdsDarkColorsPalette
        else TdsLightColorsPalette

    CompositionLocalProvider(
        LocalTiTiColors provides tdsColorsPalette,
        LocalDensity provides Density(LocalDensity.current.density, 1f),
        LocalTiTiTypography provides tdsTypography,
    ) {
        content()
    }
}

TiTiTheme 함수를 사용하여 커스텀 테마를 적용합니다.

프로젝트에서 커스텀 테마 및 텍스트 스타일 사용하기

이제 앱에서 커스텀 테마와 텍스트 스타일을 사용할 수 있습니다. 예를 들어, 텍스트 뷰에서 커스텀 텍스트 스타일을 적용하려면 다음과 같이 사용할 수 있습니다.

Text(
    text = "안녕하세요!",
    style = TiTiTheme.textStyle.thinTextStyle, // 적용할 텍스트 스타일 선택
)

TdsTextStyle enum class

enum class TdsTextStyle {
    thinTextStyle,
    extraLightTextStyle,
    normalTextStyle,
    semiBoldTextStyle,
    extraBoldTextStyle,
    blackTextStyle;

    @Composable
    fun getTextStyle(fontSize : TextUnit) = when (this) {
        thinTextStyle -> TiTiTheme.textStyle.thinTextStyle.copy(fontSize = fontSize)
        extraLightTextStyle -> TiTiTheme.textStyle.extraLightTextStyle.copy(fontSize = fontSize)
        normalTextStyle -> TiTiTheme.textStyle.normalTextStyle.copy(fontSize = fontSize)
        semiBoldTextStyle -> TiTiTheme.textStyle.semiBoldTextStyle.copy(fontSize = fontSize)
        extraBoldTextStyle -> TiTiTheme.textStyle.extraBoldTextStyle.copy(fontSize = fontSize)
        blackTextStyle -> TiTiTheme.textStyle.blackTextStyle.copy(fontSize = fontSize)
    }
}

정의된 TdsTextStyle만 사용하도록 enum class를 구현하고 getTextStyle을 통해 fontSize를 parameter로 받아 fontSize를 따로 정의하여 사용하도록 구현하였습니다.