선행지식
[Android Compose Resource] 1. Android Compose에서 FontFamily 만들기. - Text에 Font 적용시키기
[Android Compose Resource] 1. Android Compose에서 FontFamily 만들기. - Text에 Font 적용시키기
FontFamily란? FontFamily란 같은 폰트의 모음으로 같은 폰트에 대해 다양한 스타일(굵기)을 포함하는 번들을 뜻한다. Compose에서 FontFamily 만들기 기존 xml 기반의 안드로에서 리소스 시스템에서는 xml에
kotlinworld.com
폰트 스타일링이란
폰트 스타일링이란 설정된 FontFamily에 대해서 폰트의 사이즈, 스타일(Italic, normal), 굵기(weight)를 설정하는 작업을 하는 것을 말한다. 이번 글에서는 안드로이드 기본 FontFamily를 이용하여 위 세가지를 설정하는 방법을 알아보고자 한다.
*만약 FontFamily가 무엇인지 제대로 이해를 못했다면 이번 글을 이해하기 어려우니 위의 선행지식을 꼭 학습하도록 하자
fontSize 다루기
fontSize: TextUnit = TextUnit.UnspecifiedfontSize에는 TextUnit이라 불리는 값을 설정하면 된다. 만약 설정하지 않을 시(TextUnit.Unspecified) 테마에서 설정된 사이즈 기본값이 세팅된다.
TextUnit 값은 Int에 대한 확장함수 fun Int.sp를 이용해 만들 수 있다.
val Int.sp: TextUnit get() = pack(UNIT_TYPE_SP, this.toFloat())
.sp 앞의 숫자가 커질 수록 텍스트 값은 커지며 다음 예제를 통해 확인하도록 하자
@Preview(showBackground = true, widthDp = 300, heightDp = 300)
@Composable
fun KotlinWorldSize() {
Column(modifier = Modifier.fillMaxSize(), horizontalAlignment = Alignment.CenterHorizontally, verticalArrangement = Arrangement.Center) {
Text(text = "Kotlin World Size 12sp", fontSize = 12.sp)
Text(text = "Kotlin World Size 14sp", fontSize = 14.sp)
Text(text = "Kotlin World Size 16sp", fontSize = 16.sp)
Text(text = "Kotlin World Size 20sp", fontSize = 20.sp)
Text(text = "Kotlin World Size 24sp", fontSize = 24.sp)
}
}
fontStyle 다루기
Text에서 설정할 수 있는 폰트의 스타일은 Normal과 Italic 두가지이다.
inline class FontStyle(val value: Int) {
..
companion object {
val Normal = FontStyle(0)
val Italic = FontStyle(1)
..
}
}FontStyle의 인자는 FontStyle Class의 companion object로 미리 정의된 값(FontStyle.Normal, FontStyle.Italic)들을 이용한다.
@Preview(showBackground = true, widthDp = 300, heightDp = 300)
@Composable
fun KotlinWorldStyle() {
Column(modifier = Modifier.fillMaxSize(), horizontalAlignment = Alignment.CenterHorizontally, verticalArrangement = Arrangement.Center) {
Text(text = "Kotlin World Style Normal", fontStyle = FontStyle.Normal)
Text(text = "Kotlin World Style Italic", fontStyle = FontStyle.Italic)
}
}
FontStyle에 직접 0과 1을 설정해서도 그림2와 같은 결과를 낼 수도 있지만 권장되지 않는다.
@Preview(showBackground = true, widthDp = 300, heightDp = 300)
@Composable
fun KotlinWorldStyle() {
Column(modifier = Modifier.fillMaxSize(), horizontalAlignment = Alignment.CenterHorizontally, verticalArrangement = Arrangement.Center) {
Text(text = "Kotlin World Style Normal", fontStyle = FontStyle(0))
Text(text = "Kotlin World Style Italic", fontStyle = FontStyle(1))
}
}
fontWeight 다루기
fontWeight는 폰트의 굵기를 다루는 방법이다. font의 Weight는 총 9가지 값이 있다. 굵기 순서대로 값을 나열하면 Black, ExtraBold, Bold, SemiBold, Medium, Normal, Light, ExtraLight, Thin 순서이다. Black이 가장 두껍지만 실무에서 Black은 거의 다루지 않으므로 이 글에서 다루지 않는다.
보는 것이 가장 빠르게 이해하는 방법이므로 바로 Preview를 보도록 하자.
@Preview(showBackground = true, widthDp = 300, heightDp = 300)
@Composable
fun KotlinWorldWeight() {
Column(modifier = Modifier.fillMaxSize(), horizontalAlignment = Alignment.CenterHorizontally, verticalArrangement = Arrangement.Center) {
Text(text = "Kotlin World ExtraBold", fontWeight = FontWeight.ExtraBold)
Text(text = "Kotlin World Bold", fontWeight = FontWeight.Bold)
Text(text = "Kotlin World SemiBold", fontWeight = FontWeight.SemiBold)
Text(text = "Kotlin World Medium", fontWeight = FontWeight.Medium)
Text(text = "Kotlin World Normal", fontWeight = FontWeight.Normal)
Text(text = "Kotlin World Light", fontWeight = FontWeight.Light)
Text(text = "Kotlin World ExtraLight", fontWeight = FontWeight.ExtraLight)
Text(text = "Kotlin World Thin", fontWeight = FontWeight.Thin)
}
}
ExtraBold부터 Thin으로 갈 수록 얇아지는 것을 볼 수 있다.
