[Compose Text] Text에 max line 설정하기 : maxLines

maxLines란?

maxLines란 Text의 줄이 최대 몇 줄까지만 가능한지를 설정하는 옵션이다.

 

maxLines: Int = Int.MAX_VALUE

maxLines의 기본값은 Int의 최대값으로 설정되어 있어 Text는 무제한으로 Line을 가질 수 있다. maxLines은 그 자체로도 많이 쓰이고, TextOverFlow.Ellipsis 등과도 함께 쓰이니 어떻게 사용하는지 잘 알아두도록 하자.

 

Default 값에서의 동작

실습을 위해 같은 3줄짜리 text를 가진 Text 컴포저블을 생성하자.

maxLines에 아무 값도 설정하지 않으면 maxLines = Int.MAX_VALUE가 되므로 3줄이 모두 보이게 된다.

@Preview(showBackground = true, widthDp = 100, heightDp = 150)
@Composable
fun KotlinWorldTextSoftWrapFalse() {
    Column(
        modifier = Modifier
            .fillMaxSize()
    ) {
        Text(
            text = "Hello\nKotlin\nWorld",
            fontSize = 32.sp
        )
    }
}

그림1. Default값

 

maxLines 설정하기

자 그러면 이번에는 maxLines를 2로 설정해보자.

@Preview(showBackground = true, widthDp = 100, heightDp = 150)
@Composable
fun KotlinWorldTextMaxLines2() {
    Column(
        modifier = Modifier
            .fillMaxSize()
    ) {
        Text(
            text = "Hello\nKotlin\nWorld",
            fontSize = 32.sp,
            maxLines = 2
        )
    }
}

그림2. maxLines = 2 

2줄만 보이는 것을 확인할 수 있다.

 

마찬가지로 1줄만 설정하려면 다음과 같이 설정하면 된다.

@Preview(showBackground = true, widthDp = 100, heightDp = 150)
@Composable
fun KotlinWorldTextMaxLines1() {
    Column(
        modifier = Modifier
            .fillMaxSize()
    ) {
        Text(
            text = "Hello\nKotlin\nWorld",
            fontSize = 32.sp,
            maxLines = 1
        )
    }
}

그림3. maxLines = 1

 

maxLines와 TextOverflow.Ellipse 함께 사용하기

만약 클라이언트한테 위의 그림2 처럼 maxLines를 2로 하고 더 Text가 있는 것을 명시적으로 나타내면 좋겠다는 요청사항이 왔다고 하자. 이때 우리는 TextOverflow.Ellipse 옵션을 함께 사용해서 Hello뒤에 텍스트가 maxLines로 인해 짤렸다는 것을 보여줄 수 있다.

 

@Preview(showBackground = true, widthDp = 100, heightDp = 150)
@Composable
fun KotlinWorldTextMaxLines1() {
    Column(
        modifier = Modifier
            .fillMaxSize()
    ) {
        Text(
            text = "Hello\nKotlin\nWorld",
            fontSize = 32.sp,
            maxLines = 2,
            overflow = TextOverflow.Ellipsis
        )
    }
}

그림4. maxLine과 ellipse 함께 사용