[Compose] Alignment line

부모 레이아웃에서 자식 Composable 배치할때 참고 할 수 있도록 자식 Composable 에서 제공하는 가이드라인이라고 볼 수 있음.

• Layout 을 사용하거나 layout modifier 를 이용, layout 과정에서 제공해줄 수 있다.

private val CustomAligmentLine = HorizontalAlignmentLine(merger = { old, new ->
    min(old, new)
})

@Composable
private fun SomeComposable(
    modifier: Modifier = Modifier,
) {
    Layout(
        content = {
            // ...
        },
        modifier = modifier
    ) { mesurables, constraints ->
        // ...
        layout(
            width = calculatedWidth,
            height = calculatedHeight,
            alignmentLines = mapOf(
                CustomAligmentLine to height*(2 / 3) // 이렇게 제공할 수 있다.
            )
        ) {
            //...
        }
    }
}

• HorizontalAligmentLine, VerticalAlignmentLine 을 상속하여 구현할 수 있음.
• 부모 레이아웃 내의 자식 레이아웃에서 AlignmentLine 를 제공할때, 부모 레이아웃도 자식의 Alignment 를 상속받아서 부모의 부모에서 배치될때 가이드로 쓰일 수 있게 된다.
• 부모 레이아웃 내에 여러 자식 레이아웃이 있고, 각 자식 레이아웃에서 동일한 AlignmentLine 을 제공하는 경우 부모가 어떻게 AlignmentLine 을 상속해야 하는지가 결정되어야 한다. 이러한 문제를 AlignmentLine의 merger 가 해결하는 역할을 한다.

• Text 와 같은 Composable 은 FirstBaseLine 이나 LastBaseLine 과 같은 기본 AlignmentLine 을 제공한다.
• RowScope 나 ColumnScope 에서 alignBy 와 같은 Modifier 로 자식 컴포저블들을 정렬할 수 있는데, 이때 자식의 AlignmentLine 를 정렬 기준으로 설정할 수도 있다.
• RowScope 내에서 자식이 alignBy 로 정렬 기준을 설정하는 경우 Row 에 제공했던 VerticalAlignment 옵션은 무시되고 항상 VerticalAlignment.Top 이 적용된다.

 

참고 자료

https://developer.android.com/develop/ui/compose/layouts/alignment-lines
https://medium.com/@diegop88/alignment-with-jetpack-compose-9b02d819a773