[Compose Text] text overflow를 이용해 Text가 영역을 벗어났을 때 처리하기. Clip, Visible, Ellipsis

Text OverFlow 란?

overflow: TextOverflow = TextOverflow.Clip

Text의 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
        )
    }
}

그림1. 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
        )
    }
}

그림2. 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
        )
    }
}

그림3. TextOverflow.Ellipsis

1줄이 넘어가는 값에 대해서 더이상 쓸 공간이 없을 때 "..." 처리가 되는 것을 확인할 수 있다. 이 옵션은 무조건 maxLines와 함께만 동작한다. maxLines를 쓰지 않으면 Text는 그림1과 그림2처럼 수직으로 확장 가능하기 때문이다.