BoxWithConstraints Layout이란?
BoxWithConstraints Layout은 Box Layout의 SuperSet Layout으로 Box의 기능을 모두 포함하면서 Layout의 Constraint에 접근할 수 있도록 만들어진 layout이다.
*Constraint란 BoxWithConstraints 레이아웃의 최대 크기, 최소 크기 값이다.
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를 출력하지 않는다.
자 이제 텍스트가 출력되도록 코드를 바꿔보자
@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이다.
BoxWithConstraints의 필요성 및 의의
2010년 이후로 10여년간 고정된 크기의 화면을 가진 휴대폰이 나왔다. 하지만 삼성에서 Galaxy Flip과 Fold 시리즈를 런칭하며 화면이 가변적일 수 있게 되었고, 이는 새로운 휴대폰의 표준을 제시하며 크기에 따라 다른 Layout을 동적으로 보여줘야 할 필요성이 생기게 되었다.
BoxWithCostraints는 이러한 필요성에 부합하는 레이아웃이다. BoxWithConstraints를 사용하면 휴대폰 상에서 보여지는 Box의 크기에 따라 다른 화면을 내보내도록 할 수 있다. 즉, 다양한 화면 크기에 맞는 레이아웃을 작성할 수 있게 한다는 점에서 의의가 있다.
*기존에도 이러한 동작이 가능했지만, 별도의 코드를 xml과 함께 사용해야 해서 매우 불편했다.
