Image
Android Jetpack Compose UI/Compose Layout

[Compose Layout] 5. BoxWithConstraints 사용법 정리

BoxWithConstraints Layout이란?

BoxWithConstraints Layout은 Box Layout의 SuperSet Layout으로 Box의 기능을 모두 포함하면서 Layout의 Constraint에 접근할 수 있도록 만들어진 layout이다.

*Constraint란 BoxWithConstraints 레이아웃의 최대 크기, 최소 크기 값이다.

그림1. BoxWithCosntraint에서 접근할 수 있는 Constraints

 

BoxWithCosntraints 에서 접근할 수 있는 Constraints

BoxWithConstraints에서는 총 5가지 종류의 변수에 접근할 수 있다. 이 5가지 종류의 변수는 화면을 측정하는 방식에 따라 크게 2가지 종류로 나뉠 수 있다. 하나는 dp에 해당하는 값이고, 나머지 하나는 pixel에 해당하는 값이다. 아래 BoxWithConstraints의 Scope에서 접근할 수 있는 변수들을 살펴보자.

@Stable
interface BoxWithConstraintsScope : BoxScope {
    val constraints: Constraints
    val minWidth: Dp
    val maxWidth: Dp
    val minHeight: Dp
    val maxHeight: Dp
}

 

이를 dp와 pixel에 해당하는 값으로 나누면 다음과 같다.

  • pixel에 해당하는 값 : constraints
  • dp에 해당하는 값 : minWidth, maxWidth, minHeight, maxHeight

 

안드로이드를 개발하다보면 디자이너의 요구사항에 맞춰 dp에 dependent하게 그려야 하는 레이아웃과 pixel에 dependent하게 그려야 하는 레이아웃이 나뉠 수 있다(대부분은 dp에 dependent하다). 원래는 별도의 dp 계산 로직을 확장함수로 만들어서 쓰는 경우가 많았는데, 이제는 dp에 바로 접근할 수 있게 되었다는 점에서 매우 의미있는 기능이라 볼 수 있다.

 

BoxWithConstraints 사용법

자 이제 BoxWithConstraints를 사용해보도록 하자.

 

먼저 @Preview의 widthDp와 heightDp를 200으로 조정함으로써 BoxWithCosntraints가 Modifier.fillMaxSize()를 취했을 때 minHeight, maxHeight, minWidth, maxWidth가 200.dp가 되도록 조정한다. 이후 minHeight가 220dp보다 클 경우에만 Text를 출력하는 코드를 작성한다.  

@Preview(showBackground = true, widthDp = 200, heightDp = 200)
@Composable
fun KotlinWorldBoxWithConstraints() {
    BoxWithConstraints(modifier = Modifier.fillMaxSize()) {
        if (this.minHeight > 220.dp) { // minHeight가 220dp보다 클 경우에만 수행
            Text(text = "Larger then 220dp")
        }
        Text(
            modifier = Modifier.align(Alignment.BottomStart), text = "minHeight :${this.minHeight}"
        )
    }
}

하지만 위의 코드는 BoxWithConstraints의 minHeight는 220dp보다 작은 200dp 이기 때문에 "Larger then 220dp" Text를 출력하지 않는다.

그림2. minHeight가 220dp보다 크지 않아서 "Larger then 220dp"텍스트가 출력되지 않는 화면

 

자 이제 텍스트가 출력되도록 코드를 바꿔보자

@Preview(showBackground = true, widthDp = 200, heightDp = 200)
@Composable
fun KotlinWorldBoxWithConstraints() {
    BoxWithConstraints(Modifier.fillMaxSize()) {
        if (this.minHeight < 220.dp) {
            Text(text = "Smaller then 220dp")
        }
        Text(
            modifier = Modifier.align(Alignment.BottomStart), text = "minHeight :${this.minHeight}"
        )
    }
}

위 코드는 BoxWithConstraints의 minHeight가 220dp  보다 작을 때 "Smaller then 220dp"를 출력하는 코드이다. 위 BoxWithConstraints의 minHeight는 200.dp인 것을 그림2에서 확인했으므로 "Smaller then 220dp"가 출력될 것을 예측할 수 있다. 위 코드의 결과물은 아래 그림3이다.

그림3. minHeight가 220dp보다 작아서 "Smaller then 220dp"가 출력되는 화면

 

BoxWithConstraints의 필요성 및 의의

2010년 이후로 10여년간 고정된 크기의 화면을 가진 휴대폰이 나왔다. 하지만 삼성에서 Galaxy Flip과 Fold 시리즈를 런칭하며 화면이 가변적일 수 있게 되었고, 이는 새로운 휴대폰의 표준을 제시하며 크기에 따라 다른 Layout을 동적으로 보여줘야 할 필요성이 생기게 되었다. 

 

BoxWithCostraints는 이러한 필요성에 부합하는 레이아웃이다.  BoxWithConstraints를 사용하면 휴대폰 상에서 보여지는 Box의 크기에 따라 다른 화면을 내보내도록 할 수 있다. 즉, 다양한 화면 크기에 맞는 레이아웃을 작성할 수 있게 한다는 점에서 의의가 있다.

*기존에도 이러한 동작이 가능했지만, 별도의 코드를 xml과 함께 사용해야 해서 매우 불편했다.

반응형

 

이 글의 저작권은 '조세영의 Kotlin World' 에 있습니다. 글, 이미지 무단 재배포 및 변경을 금지합니다.

 

 

Kotlin, Android, Spring 사용자 오픈 카톡

오셔서 궁금한 점을 질문해보세요!
비밀번호 : kotlin22

open.kakao.com