Column의 verticalArrangement 속성에 대하여

Compose를 사용하여 Android 앱의 사용자 인터페이스를 디자인할 때 다양한 레이아웃 구성요소와 작동 방식을 이해하는 것이 중요합니다. 가장 일반적으로 사용되는 레이아웃 구성 요소 중 하나는 Column으로, 자식을 단일 열에 수직으로 정렬합니다. 이 문서에서는 자식이 열 내에서 수직으로 정렬되는 방법을 결정하는 Column의 verticalArrangement 속성을 살펴보겠습니다.

verticalArrangement Option

Column의 verticalArrangement 속성은 수직 정렬에 대한 다양한 옵션을 정의하는 VerticalArrangement 열거형을 허용합니다. 가능한 값은 다음과 같습니다.

Top: 하위 항목을 열 상단에 정렬합니다.
Bottom: 하위 항목을 열의 하단에 정렬합니다.
Center: 열에서 세로로 자식을 중앙에 배치합니다.
SpaceEvenly: 열의 높이를 따라 자식을 균등하게 분배합니다.
SpaceBetween: 열 높이를 따라 자식을 균등하게 분배하지만 첫 번째 자식 앞이나 마지막 자식 뒤에 공백이 없습니다.
SpaceAround: 열 높이를 따라 자식을 균등하게 분배합니다. 첫 번째 자식 앞과 마지막 자식 뒤에 동일한 공간을 둡니다.

Compose의 열에 verticalArrangement를 적용하는 방법의 예를 살펴보겠습니다.

Column(
    verticalArrangement = Arrangement.Center
) {
    Text(text = "First item")
    Text(text = "Second item")
    Text(text = "Third item")
}

이 예에서는 세 개의 텍스트 구성 요소가 있는 열을 자식으로 만듭니다. 우리는 verticalArrangement 속성을 Arrangement.Center로 설정하고 있습니다. 이 속성은 자식을 열에서 수직으로 가운데에 배치합니다.

다음 예제와 같이 중첩 열에 verticalArrangement를 적용할 수도 있습니다.

Column(
    verticalArrangement = Arrangement.Center
) {
    Text(text = "First item")
    Column {
        Text(text = "Nested item 1")
        Text(text = "Nested item 2")
    }
    Text(text = "Third item")
}

이 예에서는 3개의 자식이 있는 열이 있습니다. 두 개의 텍스트 구성 요소와 두 개의 텍스트 구성 요소가 있는 중첩 열입니다. 우리는 다시 verticalArrangement 속성을 Arrangement.Center로 설정하고 있습니다. 그러면 모든 자식이 기본 열에 수직으로 가운데에 배치됩니다.

결론

결론적으로 Column의 verticalArrangement 속성은 Compose에서 열 내 자식의 수직 정렬을 제어하는 ​​중요한 도구입니다. 이 속성을 사용 가능한 enum 값 중 하나로 설정하면 사용자 인터페이스에 대해 원하는 수직 정렬을 쉽게 얻을 수 있습니다.