Compose - Box

Box: 요소를 다른 요소 위에 놓음

• 기존 relative layout, constraint layout, frame layout과 같이 뷰를 겹칠 수 있음
• 겹치는 순서에 주의(배경이 되는 가장 큰 박스가 먼저 나와야 함)

---

• alignment
  • row, column보다 다양하게 지원
    
    
  • Alignment.BottomCenter: 컨테이너의 아래 중앙
  • Alignment.BottomStart: 컨테이너의 아래 왼쪽
  • Alignment.BottomEnd: 컨테이너의 아래 오른쪽
  • Alignment.Center: 컨테이너의 정 중앙
  • Alignment.CenterStart: 컨테이너의 중앙 왼쪽
  • Alignment.CenterEnd: 컨테이너의 중앙 오른쪽
  • Alignment.TopCenter: 컨테이너의 위 중앙
  • Alignment.TopStart: 컨테이너의 위 왼쪽
  • Alignment.topEnd: 컨테이너의 위 오른쪽
    
    
  • propagateMinConstraints 해당 옵션을 true로 하면
    박스 안에 있는 제일 작은 크기의 뷰를 컨테이너 박스의 크기만큼 constarint를 건다(꽉 채움)

예시코드

@Composable
fun BoxContainer() {
    Box(
        modifier = Modifier
            .background(Color.White)
            .fillMaxSize(),
        contentAlignment = Alignment.Center,
//        propagateMinConstraints = true
    ) {
        DummyBox2(modifier = Modifier.size(200.dp), color = Color.Green)
        DummyBox2(modifier = Modifier.size(150.dp), color = Color.Yellow)
        DummyBox2(color = Color.Blue)
    }
}

---

BoxWithConstraints

• 조건에 따라 다른 Box 출력
• 화면이 회전되는 등 Box 크기 변화에 따라 조건문 실행

@Composable
fun BoxWithConstraintContainer() {
    BoxWithConstraints(
        modifier = Modifier
            .background(Color.White)
            .fillMaxSize(),
        contentAlignment = Alignment.Center
    ) {
        if (this.minHeight > 400.dp) {
            DummyBox2(modifier = Modifier.size(200.dp), color = Color.Green)
        }
        else {
            DummyBox2(modifier = Modifier.size(200.dp), color = Color.Yellow)
        }
        Text(text = "minHeight: ${this.minHeight}")
    }
}

• function을 따로 분리하여 파라미터에 제시되는 값을 통해 조건문을 실행할 수 있음

@Composable
fun BoxWithConstraintContainer() {
    Box(
        modifier = Modifier
            .background(Color.White)
            .fillMaxSize(),
        contentAlignment = Alignment.Center
    ) {
        Column() {
            BoxWithConstraintItem(modifier = Modifier
                .size(200.dp)
                .background(Color.Yellow)
            )
            BoxWithConstraintItem(modifier = Modifier
                .size(300.dp)
                .background(Color.Green)
            )
        }
    }
}

@Composable
fun BoxWithConstraintItem(modifier: Modifier = Modifier) {
    BoxWithConstraints(
        modifier = modifier,
        contentAlignment = Alignment.Center
    ) {
        if (this.minWidth > 200.dp) {
            Text(text = "이것은 큰 상자이다")
        }
        else {
            Text(text = "이것은 작은 상자이다")
        }

    }
}