시배's Android
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를 따로 정의하여 사용하도록 구현하였습니다.
'Android > TiTi Side Project' 카테고리의 다른 글
TiTi Side Project | TdsDialog 컴포넌트 구현하기 (1) | 2023.10.09 |
---|---|
TiTi Side Project | 반응형 TdsTimer 컴포넌트 구현하기 (0) | 2023.10.09 |
TiTi Side Project | TdsText 컴포넌트 구현하기 (0) | 2023.10.04 |
TiTi Side Project | Animate Counter Timer 만들기 (0) | 2023.09.27 |
TiTi Side Project | Theme Color 세팅 (0) | 2023.09.27 |