8. 컨테이너와 기초 레이아웃

여러 예제에서 확인했다시피, 화면에 여러 요소를 그려도 순서대로 표시되는 것이 아니라 겹쳐져서 표시됩니다. 앞으로 배울 컨테이너를 사용한다면 아이템의 위치를 편리하고 유연하게 지정할 수 있습니다.

1. Column

Column은 수직으로 뷰를 배치하는 레이아웃입니다. 자식 뷰들은 위에서 아래로 순서대로 배치됩니다.

import androidx.compose.foundation.layout.Column
import androidx.compose.ui.Alignment
import androidx.compose.foundation.layout.Arrangement

Column(
    modifier = Modifier.fillMaxSize(),
    verticalArrangement = Arrangement.SpaceAround,
    horizontalAlignment = Alignment.CenterHorizontally
) {
    Text("First item")
    Text("Second item")
    Text("Third item")
}

modifier: 레이아웃의 크기나 배치를 조정하는 데 사용됩니다.
verticalArrangement: 자식 뷰들 사이의 공간을 조절합니다.
horizontalAlignment: 수평 정렬을 설정합니다.

Untitled

2. Row

Row는 수평으로 뷰를 배치하는 레이아웃입니다. 자식 뷰들은 왼쪽에서 오른쪽으로 순서대로 배치됩니다.

Row(
    modifier = Modifier.fillMaxSize(),
    horizontalArrangement = Arrangement.SpaceBetween,
    verticalAlignment = Alignment.CenterVertically
) {
    Text("First item")
    Text("Second item")
    Text("Third item")
}

horizontalArrangement: 자식 뷰들 사이의 공간을 조절합니다.
verticalAlignment: 수직 정렬을 설정합니다.

Untitled

3. Box

Box는 자식 뷰들을 겹쳐서 배치할 수 있는 레이아웃입니다. 자식 뷰들은 순서대로 쌓입니다.

아까 넙죽이 사진 지우신건 아니죠?

Box(
    modifier = Modifier.fillMaxSize(),
    contentAlignment = Alignment.Center
) {
    Image(painter = painterResource(R.drawable.neopjuk), contentDescription = null)
    Text("Overlay Text")
}

contentAlignment: 모든 자식 뷰들의 기본 정렬을 설정합니다.

Untitled