반응형
Text 간격 만들기
Text의 간격은 두가지가 있다. 하나는 글자간 간격이고, 다른 하나는 줄간 간격이다. Compose Text에서는 이러한 간격들을 설정할 수 있는 프로퍼티들을 제공한다.
- letterSpacing : 글자간 간격을 만드는 옵션
letterSpacing: TextUnit = TextUnit.Unspecified,- lineHeight : 줄간 간격을 만드는 옵션
lineHeight: TextUnit = TextUnit.Unspecified둘 모두 sp값에 해당하는 TextUnit을 인자로 받는다. 아래에서 이 둘이 어떻게 동작하는지 살펴보자.
letterSpacing 이용해 글자간 간격 만들기
Text의 letterSpacing 프로퍼티를 이용하여 글자간 간격을 줄 수 있다.
letterSpacing: TextUnit = TextUnit.Unspecified,
letterSpacing의 인자로 넘어가는 값은 TextUnit이며 이는 Int.sp 확장 프로퍼티로 만들어낼 수 있다.
val Int.sp: TextUnit get() = pack(UNIT_TYPE_SP, this.toFloat())
아래에서 letterSpacing을 1sp, 2sp, 3sp를 줬을 때 글자간 간격이 어떻게 변화하는지 살펴보자.
@Preview(showBackground = true, widthDp = 300, heightDp = 300)
@Composable
fun KotlinWorldLetterSpacing() {
Column(modifier = Modifier.fillMaxSize(), horizontalAlignment = Alignment.CenterHorizontally, verticalArrangement = Arrangement.Center) {
Text(text = "Kotlin World letterSpacing 1sp", letterSpacing = 1.sp)
Text(text = "Kotlin World letterSpacing 2sp", letterSpacing = 2.sp)
Text(text = "Kotlin World letterSpacing 3sp", letterSpacing = 3.sp)
}
}
lineHeight 이용해 줄간 간격 만들기
lineHeight는 줄의 기준선의 간격을 설정하는 옵션이다.
여기서 주의할 점은 lineHeight가 설정하는 것이 줄의 기준선의 간격이라는 것이다.
따라서 만약 너무 적은 값의 lineHeight를 줄 경우 글자가 겹칠 수 있다. 예를 들어 lineHeight를 6sp를 줘보자.
@Preview(showBackground = true, widthDp = 300, heightDp = 300)
@Composable
fun KotlinWorldLineHieght() {
Column(modifier = Modifier.fillMaxSize(), horizontalAlignment = Alignment.CenterHorizontally, verticalArrangement = Arrangement.Center) {
Text(text = "Kotlin World\nlineHeight 6sp", lineHeight = 6.sp)
}
}
기본 글자 크기가 12sp이므로 윗 줄과 아랫 줄의 글자가 겹쳐서 나오는 것을 확인할 수 있다.
그러면 이번에는 12sp보다 크게 넉넉히 20sp를 줘보도록 하자.
@Preview(showBackground = true, widthDp = 300, heightDp = 300)
@Composable
fun KotlinWorldLineHieght() {
Column(modifier = Modifier.fillMaxSize(), horizontalAlignment = Alignment.CenterHorizontally, verticalArrangement = Arrangement.Center) {
Text(text = "Kotlin\nWorld\nlineHeight 20sp", lineHeight = 20.sp)
}
}
글자가 겹쳐 나오지 않고 중간에 8sp의 여유공간이 생긴것을 확인할 수 있다.
반응형
