BoxWithConstraints

BoxWithConstraints는 Box의 SuperSet Layout으로 Box의 기능을 모두 포함하면서 추가로 Constraint에 접근할 수 있는 Composable이다.

Outer를 만들고 그 안에 Inner를 만드는 형태로 만들어볼것이다.

@Composable
fun Outer() { //outer 하나에 inner가 연결되어 있는 구조 따라서 
			 //inner에 있는 내용이 outer에 들어간다고 생각하면 됨
    Column {
        Inner()
    }
}

@Composable
private fun Inner() {
    BoxWithConstraints {
        Text("maxW:$maxWidth maxH:$maxHeight minW:$minWidth minH:$minHeight")
    }
}

BoxWithConstraints에서는 Box의 기본 기능에 추가로 constraints, minWidth, minHeight, maxWidth, minHeight 을 사용할 수 있다.

1. Inner의 인자로 Modifier를 받아서 BoxConstraints에 전달해보자

@Composable
private fun Inner(modifier: Modifier = Modifier) {
    BoxWithConstraints(
        modifier = modifier
    ) {
        Text("maxW:$maxWidth maxH:$maxHeight minW:$minWidth minH:$minHeight")
    }
}

2. Outer에 Modifier를 만들어서 Inner에 전달해주자!

@Composable
fun Outer() {
    Column {
        Inner(
            Modifier
                .widthIn(min = 100.dp, max= 150.dp)
                .height(160.dp)
        )
    }
}

Modifier의 widthIn을 통해서 너비의 min,max를 설정하였고, height를 사용하여 높이가 고정 되는 것을 볼 수 있다.

반대로 heightIn, width도 사용할 수 있다.

3. maxHeight 값이 100dp가 넘을 때만 추가로 텍스트를 출력해보자!

@Composable
private fun Inner(modifier: Modifier = Modifier) {
    BoxWithConstraints(
        modifier = modifier
    ) {
        if(maxHeight > 100.dp){
            Text(
                text = "여기 꽤 길군요!",
                modifier = Modifier.align(Alignment.BottomCenter)
                )
        }
        Text("maxW:$maxWidth maxH:$maxHeight minW:$minWidth minH:$minHeight")
    }
}

이런식으로 min,max 값들을 이용하여 원하는 조건일 때 다양한 요소들을 추가할 수 있다.

4. Column에 width를 지정해서 제한해보자!

@Composable
fun Outer() {
    Column(
        modifier = Modifier.width(120.dp)
    ) {
        Inner(
            Modifier
                .widthIn(min = 100.dp, max= 150.dp)
                .height(160.dp)
        )
    }
}

Inner의 maxWidth를 150dp로 설정하였음에도 Column의 width가 120dp로 제한이 되어있기에 maxWidth도 자동적으로 120dp로 변하는 것을 볼 수 있다.

BoxWithConstraints가 자주 사용되지는 않는다고 하지만, 특정 width, height일 때 무언가를 넣겠다! 이런 경우에 사용할 수 있다

jetpack compose 연습 깃헙 링크
https://github.com/unso99/jetpack_compose_practice