컴포즈의 규칙 중 하나는 하위 요소를 한번만 측정해야 한다는 것
두 번 측정하면 런타임 예외가 발생한다.
그러나 '내장기능' 을 사용하면 하위 요소가 실제로 측정되기 전에 하위 요소를 쿼리할수 있다.
(min|max)IntrinsicWidth // 이 높이에서 콘텐츠를 적절하게 그릴 수 있는 최소/최대 너비
(min|max)IntrinsicHeight // 이 너비에서 콘텐츠를 적절하게 그릴 수 있는 최소/최대 높이
위의 내장 기능을 사용하면 컴포저블에게 최대/최소 width, height를 가져올 수있게 된다.
이 기능을 사용해 동적 너비/높이에 의존하는 레이아웃이 있는 경우 컨텐츠가 설정 된 후에 너비/높이의 값을 얻을 수 있게된다.
예시 #1
Column 컴포즈안에 Hello World라는 텍스트가 존재한다. Column컴포즈 왼쪽에 높이가 똑같은 삭제버튼을 추가하고 싶다.
Row {
Box(
modifier = Modifier
.width(100.dp)
.fillMaxHeight()
.background(Color.Red)
) {
Text("삭제", color=Color.White)
}
Column {
Text("Hello")
Text("World")
}
}
삭제버튼에 fillMaxHeight를 준다면 Column 요소의 높이에 맞춰질것이라 생각했다.
그러나 결과는 다르다. 삭제버튼의 높이가 디바이스의 최대 높이 영역만큼 차지했다.
컴포즈는 렌더링될때 하위 요소를 한번만 측정하며 그려지는 시점에서 Box와 Column 컴포즈의 사용가능한 최대높이를 알수 없다.
Row(
modifier = Modifier
.height(IntrinsicSize.Min)
) {
Box(
modifier = Modifier
.width(100.dp)
.fillMaxHeight()
.background(Color.Red)
) {
Text(
"삭제",
color = Color.White,
modifier = Modifier
.align(Alignment.Center)
)
}
Column {
Text("Hello")
Text("World")
}
}
상위 컴포즈(=Row) 에 height(IntrinsicSize.Min) 을 이용해 하위 컴포즈요소들의 최대 사용가능한 높이를 맞춰줄수있다.
예시 #2
Row {
// 빨간박스
Box(
modifier = Modifier
.fillMaxWidth(0.3f)
.fillMaxHeight()
.background(Color.Red)
) {
Text(text = "빨간박스", color = Color.White)
}
// 파란박스
Column(
modifier = Modifier
.background(Color.Blue)
.fillMaxWidth(0.4f)
) {
Text("제목", color = Color.White)
Text("내용", color = Color.White)
}
// 노란박스
Column(
modifier = Modifier
.background(Color.Yellow)
.fillMaxHeight()
.fillMaxWidth()
) {
Text("노란박스", color = Color.Black)
}
}
나는 빨간색 / 노란색 Box들에게 fillMaxHeight를 사용했다.
파란색 박스의 높이는 현재 "제목" / "내용" 이라는 텍스트 컴포즈들이 그려진 높이이다.
fillMaxHeight를 이용하면 Row안에 있는 컴포즈들의 최대 결합높이를 계산해줄것을 기대했다.
(=빨간색 / 파란색 / 노란색 박스들의 높이를 계산해서 최대 결합높이를 계산해줄것을 기대)
그러나 높이의 결과값은 컴포즈블마다 제각각 그려졌다. 빨간색/노란색 박스의 높이가 화면에 남은 높이만큼 전부 다 채워졌다.
이러한 이유는 Row하위 항목을 개별적으로 한번만 측정하며, 그리는 시점에서 빨간색 / 파란색 / 노란색 박스 컴포저블들의 사용 가능한 최대 높이를 알수 없기 때문이다.
이 문제를 해결할수있는 방법은 height(IntrinsicSize.Min)를 사용하는것이다.
Row(modifier = Modifier.height(IntrinsicSize.Min)) {
// 빨간박스
Box(
modifier = Modifier
.fillMaxWidth(0.3f)
.fillMaxHeight()
.background(Color.Red)
) {
Text(text = "빨간박스", color = Color.White)
}
// 파란박스
Column(
modifier = Modifier
.background(Color.Blue)
.fillMaxWidth(0.4f)
) {
Text("제목", color = Color.White)
Text("내용", color = Color.White)
}
// 노란박스
Column(
modifier = Modifier
.background(Color.Yellow)
.fillMaxHeight()
.fillMaxWidth()
) {
Text("노란박스", color = Color.Black)
}
}
IntrinsicSize 수정자는 Row 자식 컴포즈들의 최소 고유 크기(너비 or 높이) 를 사용하도록 강제한다.
Reference
https://developer.android.com/jetpack/compose/layouts/intrinsic-measurements
https://medium.com/rocknnull/jetpack-compose-filling-max-width-or-height-94e3af129a7b
