[Android] Compose Text 양끝으로 정렬하는 여러 방법

안녕하세요 점냥입니다:)

 

Compose의 Text 함수는 텍스트 UI를 구현하는 함수입니다.

Compose는 여러 속성을 지정하기 위해 Modifier 객체를 제공해주고 있는데 android:gravity로 지정했던 텍스트 내부 정렬 기능이 없더라고요. 공식문서에도 관련 내용이 없어서 찾아보며 공부한 내용을 정리했습니다.

 

구현하고자 하는 레이아웃

예시 레이아웃

 

이번 포스팅에서 구현할 레이아웃은 사진처럼 Text가 양 끝에 정렬된 레이아웃입니다.

 

Compose에서 기본적으로 제공해주는 레이아웃

기본적으로 제공해주는 Compose 레이아웃 중 순서대로 가로로 정렬되는 Row 레이아웃을 사용하겠습니다.

Compose용으로 ConstraintLayout 라이브러리를 제공해주지만 아직 알파버전이기 때문에 제외했습니다.

 

 

Row 레이아웃 정렬하는 방법

Row 레이아웃의 속성 중에는 가로, 세로에 대해서 정렬하는 방법이 명시되어 있습니다.

 

 

horizontalArrangement, verticalAlignment 속성이 각각 가로, 세로 정렬하는 방법을 의미합니다.

일단 세로 정렬은 이번 포스팅과 관련이 없어 일단 무시하고 horizontalArrangement에 대해서만 이야기해보자면 기본값이 Arrangement.Start로 되어있습니다.

 

이는 하위 요소들이 왼쪽에서부터 정렬된다는 의미입니다. 따라서 기본값으로 Row를 정의하고 하위 요소로 Text를 지정하면 어떻게 나올지 보겠습니다.

 

@Composable()
fun RowSample() {
 Row(
        modifier = Modifier.fillMaxWidth()
    ) {
        Text("first Text", color = Color.Black)
        Text("second Text", color = Color.Black)
    }
 }

왼쪽에서 부터 차곡차곡 정렬되는 Text

 

 

Arrangement 요소들

그렇다면 Arrangement의 다른 정렬 기준이 되는 객체를 봅시다.

Start, Center, End는 이름에서도 유추하기 쉽습니다. Center는 중앙으로 정렬, End는 오른쪽으로 정렬입니다.

 

Center

 

End

 

Start, Center, End 정렬 방법 모두 알아보았지만 우리가 원하는 레이아웃은 구현하지 못할 듯합니다 ㅠㅠ

 

그렇다면 SpaceBetween, SpaceAround, SpaceEvenly는 어떤 방식으로 정렬할까요? 이름으로는 어떤 방식으로 정렬되는지 감이 안옵니다. 한번 하나씩 알아봅시다!

 

SpaceBetween

각 정렬 방법은 Visually 주석에 명시되어있는 문자들의 규칙으로 유추할 수 있습니다. SpaceBetween은 각 요소들의 간격이 모두 일정하게 계산되어 정렬되지만 부모 레이아웃과 첫 번째 요소의 사이와 마지막 요소와 부모 레이아웃의 사이 간격은 무시된 채 정렬됩니다. 즉 요소들의 간격만 고려됩니다.

 

요소들의 간격을 설명하자면 아래와 같이 간격이 배정됩니다.

first + [ first 요소 오른쪽 간격 ] + [ second 요소 왼쪽 간격] + second

 

SpaceBetween

 

SpaceAround

SpaceAround는 SpaceBetween과 다르게  부모 레이아웃과 첫 번째 요소의 사이와 마지막 요소와 부모 레이아웃의 사이 간격도 계산됩니다. 

 

요소들의 간격을 설명하자면 아래와 같이 간격이 배정됩니다.

[first 요소의 왼쪽 간격] + first + [ first 요소 오른쪽 간격 ] + [ second 요소 왼쪽 간격] + second + [second 요소 오른쪽 간격]

 

 

 

SpaceEvenly

 

마지막으로 SpaceEvenly 정렬 방법을 살펴봅시다. SpaceAround 방법을 돌이켜보면 부모 레이아웃의 간격과 요소의 간격이 달랐습니다. 그 이유는 요소의 간격을 계산할 때는 2개의 요소의 간격이 합쳐져서 계산되기 때문인데요. SpaceEvenly는 요소별로 간격을 계산하지 않고 모든 요소들의 간격을 일정하게 유지하는 방법입니다.

 

 

Row의 모든 가로 정렬을 알아보았습니다. 포스팅의 초반 언급한 양 끝에 정렬된 레이아웃을 구현하기 위해 어떤 정렬 방법을 사용해야 할까요? 한번 고민해보시면 좋을 것 같아요!

 

 

Text 내부 정렬 기준 활용하기

 

Row 레이아웃의 정렬 기능을 활용하지 않고 Text 내부 요소의 정렬 기능을 사용할 수도 있습니다.

xml로 TextView 객체를 만들 때 속성으로 사용한 gravity를 의미합니다.

 

Compose에서 Text 내부 정렬 기능은 modifier가 아닌 TextStyle 객체의 속성으로 설정할 수 있습니다.

Text( modifier = LayoutWidth.Fill, text = message, style = TextStyle(textAlign = TextAlign.Center) )

 

 

만약 커스텀하게 TextStyle을 사용 중이라면 copy 함수로 지정할 수도 있어요!

Text(
     modifier = Modifier.weight(1f),
     text = "secondText",
     style = MaterialTheme.typography.body1.
                copy(textAlign = TextAlign.End)
    )

 

정리하자면 Text를 양쪽으로 정렬하는 방법으로 내부 Text 정렬을 사용한다고 하면은 아래와 같이 사용할 수도 있어요

 Row {
            Text(
                modifier = Modifier.weight(1f),
                text = "firstText"
            )

            Text(
                modifier = Modifier.weight(1f),
                text = "SecondText",
                style = TextStyle(textAlign = TextAlign.Center)
            )
      }