안녕하세요. 이번에는 compose에서 사용하는 맞춤 레이아웃의 기능을 볼 것입니다. 저는 lazycolumn을 사용하는데 일부 영역에서만 사용할 수 있는 lazycolumn을 사용할때 해당 내용을 응용하여 사용하게 되었습니다.

내장 기능 실제 사례

• 하위 요소가 실제로 측정되기 전에 하위 요소를 쿼리할 수 있습니다.

예시

해당 컴포저블을 만드는 방법

@Composable
fun TwoTexts(
    text1: String,
    text2: String,
    modifier: Modifier = Modifier
) {
    Row(modifier = modifier.height(IntrinsicSize.Min)) {
        Text(
            modifier = Modifier
                .weight(1f)
                .padding(start = 4.dp)
                .wrapContentWidth(Alignment.Start),
            text = text1
        )
        Divider(
            color = Color.Black,
            modifier = Modifier.fillMaxHeight().width(1.dp)
        )
        Text(
            modifier = Modifier
                .weight(1f)
                .padding(end = 4.dp)
                .wrapContentWidth(Alignment.End),
            text = text2
        )
    }
}

• divider 가 fillMaxHeight() 를 사용하여 가용 공간을 채우기 위해 Row에 height(IntrinsicSize.Min) 수정자를 사용하여 하위 요소의 크기를 고유한 최소 높이로 강제 지정 할 수 있습니다.
• Row 하위에 있는 compose 객체들의 제약조건이 하나도 없다고 생각할 경우 text의 크기가 바로 minIntrinsicHeight에 해당하기 때문입니다.

Use

제가 적용해 준 앱에 경우에는 조금은 다른 레이아웃이지만 이 코드에서 확장하여
더 크게 보았을때 divider 가 lazycolumn 으로 대체된 것이라 IntrinsicSize 을 적용해주었습니다.
이전에 해당 내용과 같은 Realative-layout에서 레이아웃을 적용했을때 그저 match-parent를 해주면 적용되었었는데요. 역시 제가 아는 것 외로 compose는 레이아웃을 정의할때가 조금 신선하였습니다.