[공식 문서] compose 단계

frame의 세 단계

compose에는 세 단계를 가지고 있다.

1) Composition

UI를 보여준다. compose가 composable 함수를 실행하고 UI를 생성한다.

 

2) Layout

UI가 위치한 곳이다. 레이아웃 요소가 확인되면 요소와 자식 요소를 각 레이아웃 트리의 노드의 2D 좌표에 배치한다.

 

3) Drawing 

어떻게 렌더링되는지를 보여준다. UI 요소는 캔버스에 그려진다. 일반적으로 디바이스 화면에 그려진다.

 

이 단계의 순서는 일반적으로 동일하지만 composition에서 layout, drawing으로 데이터가 한 방향으로 흘러갈 수 있게 하여 frame을 생성한다. BoxWithConstraints와 LazyColumn, LazyRow는 부모 레이아웃 단계에 종속되기에 예외.

물론 compose는 이전에 렌더링된 결과가 존재한다면 같은 작업을 반복하지 않도록 설계되어 있다.

 

Compose

 

 compose 런타임은 composable 함수를 실행하며 UI를 표시하기 위해 트리 구조를 출력한다. 그리고 이 트리는 다음 단계를 위해 필요한 모든 정보를 포함하고 있다.

 

Layout

compose는 입력으로 들어와 생성된 UI 트리를 사용한다. 레이아웃 노드는 각 노드의 크기와 2차원 공간의 위치를 결정할 필요가 있는 모든 정보들을 포함한다. layout 단계에서는 트리는 다음의 세 단계의 알고리즘이 사용된다.

1. 자식노드가 존재하는지 확인한다.
2. 측정된 자식 노드의 자체 사이즈를 결정한다.
3. 각 자식노드를 상대적 위치에 배치시킨다.

이 세단계가 끝나면 각 레이아웃 노드는 너비와 높이가 결정되고 그려질 수 있는 x,y 좌표가 생성된다. 이 과정 속에서 각 노드는 한 번만 방문할 수 있어 성능이 증가한다.

 

Drawing

레이아웃을 그리기 위해 트리는 한 번더 위에서 아래로 횡단한다. 각 노드는 화면에 자기 자신을 그린다.