[Android] 단어 단위의 개행하기 (Compose)

지난번 나는 Jetpack Compose로 단어 단위의 개행을 하기 위해 LineBreak 속성에 대해 알아보았었다.

정리한 내용: https://comyou.tistory.com/131

[Android] LineBreak 속성 알아보기

 

그러나, LineBreak의 경우, 한국어는 제대로 반영이 되지 않았다.

LineBreak의 Simple, Paragraph 속성을 사용하면 아무것도 반영되지 않았고, Heading은 문단을 이상하게 자르곤 했다. (커스텀도 통하지 않았다)

 

그래서 나는 이를 FlowRow를 활용해 보기로 했다.

 

FlowRow는 자식 요소를 가로 방향으로 배치하다가 공간이 부족하면 자동으로 줄바꿈을 수행한다.

이 특성 덕분에 단어가 한 줄에 다 들어가지 않으면 자동으로 다음 줄로 넘어가게 된다.

 

그래서 Text를 공백을 기준으로 잘라, 단어 하나를 Text로 표시해서 이를 FlowRow에 넣어주는 것이다.

 

코드는 아래와 같다.

text에는 원하는 문장을 넣어주면 된다.

// 1
text.split("\n").forEach { line ->
    FlowRow {
    	//2
        line.split(" ").forEachIndexed { index, word ->
            Text(
                text = word,
            )
            // 3
            if (index != line.split(" ").lastIndex) {
                Text(
                    text = " ",
                )
            }
        }
    }
}

 

코드를 위 번호 순대로 다시 설명해보겠다.

 

1. 문장을 우선 줄 단위로 분리해준다. 그래야 여러 줄이 입력되었을 때 독립적으로 처리할 수 있다.

 text = "줄 수가 두 줄 이상이 되는 스낵바 메시지입니다. \n좌측 정렬을 해주세요.",

 

1번을 작성하지 않았을 때 위처럼 개행을 해주는 \n이 들어갈 경우, 이를 구분하지 않고 처리하므로 원래의 줄바꿈 위치가 적용되지 않는다. 

 

2. 각 줄을 공백을 기준으로 분리하여(= 단어 단위 분리) FlowRow안에 배치한다.

 

3. 마지막 인덱스(단어)가 아닐 경우, 공백의 Text를 넣어준다. 

3번을 작성하지 않았을 시, 아무리 단어 단위로 분리를 하더라도 그 단어 사이에 공백이 없기 때문에 아래처럼 한 문장으로 출력된다.

 

 

---

마지막으로 결과 화면을 보여주면서 마무리 하도록 하겠다.

text = "줄 수가 두 줄 이상이 되는 스낵바 메시지입니다. 좌측 정렬을 해주세요."