레이아웃과 modifier 정리
Row, Column 배치
layout 컴포저블 안에 컴포저블들을 배치할 수 있다.
row, column, box 등의 레이아웃 컴포저블이 있으며 row, column의 정렬 기준은 아래 사진과 같다.
만약 배치 정보를 통해 레이아웃의 자식 컴포넌트의 위치를 정할 수 있다.
예외 적인 컴포저블을 만들고 싶다면 아래 사진과 같이 자식 컴포저블의 Modifier.align 을 설정해주면 된다.
크기 및 비중
- weight()
Modifier.weight() // 가중치 설정
- screenWidth
-
fillMaxSize() 상위 컴포저블로부터 사용할 수 있는 가장 큰 면적을 차지하도록 함. Box 의 경우 자식의 크기가 Box 크기에 영향을 미치는데 자식이 fillMaxSize()를 갖으면 Box가 가능한 큰 면적을 차지함.
-
matchParentSize() Box 안에서만 쓸 수 있음(BoxScope interface에 포함됨) Box 크기를 키우지 않고 Box의 크기에 맞춰 자식 크기가 결정됨.
From Data to UI
데이터로부터 화면을 그리는데 아래 3가지 단계를 거치게 된다.
- Composition
- Layout
- Drawing
- Composition
컴포지션 단계에서는 아래 그림과 같이 Layout 컴포저블 함수들을 UI tree 의 layout node 로 만든다.
하나의 Layout 컴포저블은 하나의 layout node가 된다.
- Layout
Layout 단계에서는 3단계의 알고리즘에 따라 layout node 의 배치를 결정한다.
- 자식이 있는지 확인.
- 자신의 크기를 결정한다.(width, height, x, y)
- 자식이 있다면(layout의 경우) 자식들의 내부 배치를 결정한다.
위 알고리즘을 따라서 UI tree 안의 모든 layout node 의 배치를 결정하면 모든 node 는 정학히 한 번 만 방문한다.
즉, UI tree 형태가 복잡해져도 성능이 기하급수적으로 저하되지 않고 선형적인 부답을 갖게되는 장점이 있다.
- Drawing
배치가 완료된 node를 렌더링한다.
clip() 같은 Modifier 가 적용될 수 있으며 데이터에 따라 화면에 그려지게 된다.
Modifier Order - modfier 체이닝 및 순서의 중요성
UI를 그리는 3가지 단계중 Layout 단계를 깊이 있게 살펴보자.
-
Constraints
UI tree 에서 부모가 자식에게 할당하는 면적의 제약(minimum, maximum)
- unbounded: 제약이 없음, 무한
- exact: 정확한 수치로 제약 되어있음
- combined: 위 제약이 섞여 있음
부모가 자식에게 constraints를 준다면 자식은 거스를 수 없다.
즉, 최대 제약보다 큰 이미지를 넣어도 최대 값을 넘길 수 없고 최소 제약보다 작은 size를 자식에게 할당해도 최소 제약 만큼 확대된다.
Modifier의 체이닝 순서에 따라서 Constraints가 달라지므로 순서에 유의해야한다.
- size(50.dp)를 넣었지만 최소 제약에 맞춰 확대된 경우
- wrapContentSize() Modifier를 설정해 최소 제약을 0으로 바꿔 size(50.dp)를 지킨 경우
- requireSize 를 통해 최대 제약을 넘길 수도 있음
- clip().padding(10.dp) 순서 때문에 동그라미가 짤린 경우
Subcompose
UI 그리는 3단계 중 2단계 Layout 안에서 실행 됨.
보이지 않는 UI를 나중에 바로 그리지 않음.
부모 Layout에 크기와 자식의 Layout의 크기를 통해 최대 들어갈 수 있는 자식의 수를 결정, 수 만큼 먼저 그린다.
컴포지션보다 측정이 먼저 진행되고 이렇게 지연된 컴포지션이 Subcomposition
참고: https://www.youtube.com/watch?v=xc8nAcVvpxY