[Android Compose] Box란?

Compose 기본 레이아웃 3개 중 마지막으로 Box를 알아본다.

 

https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/package-summary#Box(androidx.compose.ui.Modifier,androidx.compose.ui.Alignment,kotlin.Boolean,kotlin.Function1) 

androidx.compose.foundation.layout  |  Android Developers

content로 구성할 수 있는 레이아웃이다. Box는 들어오는 제약 조건에 따라 컨텐츠에 맞게 자체 크기를 조정한다. 자식이 부모보다 작으면 기본적으로 contentAlignment에 따라 Box 안에 배치된다. 하위 레이아웃의 정렬을 개별 지정하려면 BoxScope.align modifier를 사용하라. 기본적으로 propagateMinConstraints가 true가 아닌 경우 컨텐츠는 Box의 수신 최소 제약 조건 없이 측정된다. 예를 들어 propagateMinConstraints를 true로 설정하면 Box에 modifier를 직접 지정할 수 없는 컨텐츠가 있고 Box의 컨텐츠에 최소 크기를 설정해야 하는 경우 유용할 수 있다. propagateMinConstraints가 true로 설정되면 Box에 설정된 최소 크기가 컨텐츠에도 적용되지만 그렇지 않으면 최소 크기가 Box에만 적용된다. 컨텐츠에 둘 이상의 레이아웃 자식이 있는 경우 레이아웃 자식은 컴포지션 순서에서 다른 하나 위에 쌓인다

< 파라미터 목록 >

- modifier : 레이아웃에 적용할 modifier
- contentAlignment: Alignment = Alignment.TopStart : 상자 내부의 기본 정렬
- propagateMinConstraints: Boolean = false : 들어오는 최소 제약 조건을 컨텐츠에 전달해야 하는지 여부
- content: @Composable BoxScope.() -> Unit : Box의 내용(content)

 

Box에 거는 조건에 따라 알아서 크기가 변하는 레이아웃이란 건 알겠는데 그 뒤의 말들은 뭐라는지 모르겠다.

구글링해보니 프레임 레이아웃처럼 여러 뷰들을 겹칠 수 있는 용도로 쓸 수 있다.

 

https://mypark.tistory.com/entry/JETPACK-COMPOSE-Box%EC%97%90-%EB%8C%80%ED%95%B4-%EC%95%8C%EC%95%84%EB%B3%B4%EC%9E%90

 

한번 써 보자.

 

@Preview(showBackground = true, widthDp = 120, heightDp = 200)
@Composable
fun BoxTest() {
    Box(contentAlignment = Alignment.TopStart) {
        Text("1")
        Text("2")
        Text("3")
    }
}

 

뭔가 이상하다. 숫자들은 잘 나오는 것 같은데 Box 생성자 안에 지정한 위치에 모든 숫자들이 출력되고 있다.

그러면 자식 레이아웃들에게 각각 align을 걸어서 어떻게 되는지 확인해 본다.

 

@Preview(showBackground = true, widthDp = 120, heightDp = 200)
@Composable
fun BoxTest() {
    Box(contentAlignment = Alignment.TopStart) {
        Text(modifier = Modifier.align(Alignment.TopStart), text = "1")
        Text(modifier = Modifier.align(Alignment.TopCenter), text = "2")
        Text(modifier = Modifier.align(Alignment.TopEnd), text = "3")
    }
}

 

이제 숫자가 각각 잘 보이는데 1과 3이 각각 끝에 착 달라붙어 있다.

이번엔 이 상태에서 propagateMinConstraints를 true로 설정해 본다.

 

@Preview(showBackground = true, widthDp = 120, heightDp = 200)
@Composable
fun BoxTest() {
    Box(contentAlignment = Alignment.TopStart, propagateMinConstraints = true) {
        Text(modifier = Modifier.align(Alignment.TopStart), text = "1")
        Text(modifier = Modifier.align(Alignment.TopCenter), text = "2")
        Text(modifier = Modifier.align(Alignment.TopEnd), text = "3")
    }
}

 

떨어져 있던 숫자들이 붙었다. 원래대로 돌리면 숫자들이 떨어져서 각각 잘 보이는 걸 확인할 수 있다.

정리하면 Box는 레이아웃들을 서로 겹쳐서 쌓을 수 있고, Box 안에 포함된 요소들의 정렬을 내가 구성할 수 있는 레이아웃이다.