Text OverFlow 란?
overflow: TextOverflow = TextOverflow.ClipText의 overFlow란 글자가 넘쳤을 경우에 어떻게 처리할 것인지를 결정하는 값이다.
TextOverFlow 내부에 companion object로 설정된 3가지 옵션을 사용할 수 있다.
companion object {
val Clip = TextOverflow(1)
val Ellipsis = TextOverflow(2)
val Visible = TextOverflow(3)
}
- Clip : 텍스트 영역이 범위를 넘어갔을 때 잘라서 보여주는 옵션. 기본 값이다.
- Visible : 텍스트 영역이 범위를 넘어갔을 때 모두 보여주는 옵션.
- Ellipsis : 텍스트 영역이 범위를 넘어갔을 때 "..." 처리하는 옵션. maxLines와 함께만 사용 가능하다.
먼저 기본값인 Clip에 대해 다룬 후 Clip이 Visible와 어떻게 다른지 보고 그 다음 Ellipsis가 어떻게 동작하는지 보는 순서로 진행할 것이다.
TextOverflow.Clip 이란?
TextOverflow.Clip은 텍스트 영역이 범위를 넘어갔을 때 잘라서 보여주는 옵션이다.
예를 들어 아래와 같은 코드가 있다고 해보자.
@Preview(showBackground = true, widthDp = 100, heightDp = 100)
@Composable
fun KotlinWorldTextOverFlowClip() {
Column(
modifier = Modifier
.fillMaxSize()
) {
Text(
text = "Hello Kotlin",
modifier = Modifier
.size(100.dp, 65.dp)
.background(Color.Blue.copy(alpha = 0.5f)),
fontSize = 35.sp,
overflow = TextOverflow.Clip
)
}
}
Text영역의 최대치는 modifier에 정의된 65dp이지만, "Kotlin" 단어는 줄바꿈이 일어나 그 범위를 벗어난다. 따라서 일부가 짤려서(Clip) 보이는 것을 확인할 수 있다.
그렇다면 저 그림1의 Kotlin 단어를 보이게 하는 방법은 없을까? 바로 아래서 다룰 TextOverflow.Visible을 사용하면 가능하다.
TextOverflow.Visible 이란?
TextOverflow.Visible이란 Text가 영역을 벗어났을 때도 보이게 만들어주는 옵션이다.
위의 코드에서 overflow 값을 TextOverflow.Visible로 바꿔보자.
@Preview(showBackground = true, widthDp = 100, heightDp = 100)
@Composable
fun KotlinWorldTextOverFlowVisible() {
Column(
modifier = Modifier
.fillMaxSize()
) {
Text(
text = "Hello Kotlin",
modifier = Modifier
.size(100.dp, 65.dp)
.background(Color.Blue.copy(alpha = 0.5f)),
fontSize = 35.sp,
overflow = TextOverflow.Visible
)
}
}
같은 코드인데 Kotlin이 모두 보이는 것을 확인할 수 있다.
TextOverflow.Ellipsis
TextOverflow.Ellipsis는 글자가 영역을 벗어났을 때 영역을 벗어나는 글자를 "..." 처리를 하기 위한 옵션이다.
이 옵션을 쓰기 위해서는 Text의 최대 줄을 설정하는 maxLines 옵션을 같이 써야 한다. 간단히 테스트 하기 위해 maxLines를 1로 설정하고 Hello Kotlin을 출력해보자.
@Preview(showBackground = true, widthDp = 100, heightDp = 100)
@Composable
fun KotlinWorldTextOverFlowEllipsis() {
Column(
modifier = Modifier
.fillMaxSize()
) {
Text(
text = "Hello Kotlin",
fontSize = 32.sp,
overflow = TextOverflow.Ellipsis,
maxLines = 1
)
}
}
1줄이 넘어가는 값에 대해서 더이상 쓸 공간이 없을 때 "..." 처리가 되는 것을 확인할 수 있다. 이 옵션은 무조건 maxLines와 함께만 동작한다. maxLines를 쓰지 않으면 Text는 그림1과 그림2처럼 수직으로 확장 가능하기 때문이다.
