[Android] UI architecture - Phases

#1 개요

Jetpack Compose 단계  |  Android Developers

위 공식 문서를 나의 언어로 정리했다.

 

#2 Compose Runtime의 3단계

#2-1 도식도

Jetpack Compose가 UI를 그려내는 과정의 도식도. Layout 단계는 이 단계는 측정(measurement)과 배치(placement)라는 두 가지의 하위 단계로 구성된다. 각 단계에 대한 간락한 설명은 다음과 같다.

 

1. Composition: '무엇'(What)을 보여줄지 결정. '무엇'이란, 후술할 UI Tree를 말한다.
2. Layout: 어디(Where)에, 어떤 크기로 둘 지 결정. 
    2-1. Measurement (측정): 컨테이너 요소와 그 컨테이너에 들어갈 자식 요소들이 자신의 크기를 결정.
    2-2. Placement (배치): 각각의 컨테이너 요소와 자식 요소를 2D 좌표계에서 적절한 위치에 배치.
3. Drawing: Layout 단계에서 결정된대로 화면에 UI를 그림.

 

#2-2 단방향 데이터 흐름

https://developer.android.com/develop/ui/compose/architecture#udf

마치 물이 위에서 아래로 흐르듯, Compose의 3단계는 각 단계의 순서를 지키며 단방향 데이터 흐름(Unidirectional Data Flow, UDF)을 따른다. 일부 특별한 컴포저블에서는 이 흐름에 역행하기도 하는데 가령 BoxWithConstraints, LazyColumn나 LazyRow는 부모의 Layout 단계가 자식의 Composition 단계에 의존한다.

 

#3 Composition phase

https://developer.android.com/develop/ui/compose/phases#composition

영상 속의 'layout node'는 컨테이너 역할을 수행하는 node라고 보면 된다 (어떻게 부르는 지는 전혀 중요하지 않기 때문에 무시하고 넘어가도 된다). 이러한 UI Tree 각 노드의 생성엔 프로그래머의 의도대로 작동하는 반복문ㆍ조건문이 관여하기도 한다. 즉 코드 자체는 같더라도, 내부 변수 등의 변화로 UI Tree의 모양이 얼마든지 변화할 수 있다는 얘기다.

 

#4 Layout phase

#4-1 애니메이션

https://developer.android.com/develop/ui/compose/phases#layout

Layout 단계는 Composition 단계에서 생성했던 UI Tree에 의존한다. Layout 단계에서는 각 노드의 화면 상 크기를 측정(Measurement)하고 어디에 배치(Placement)할 지를 결정한다.

 

#4-2 순서

https://kenel.tistory.com/299

자세한 설명이 곁들여진 측정 및 배치의 순서다.

 

#5 Drawing phase

#5-1 애니메이션

https://developer.android.com/develop/ui/compose/phases#drawing

각 노드를 그려내어 실제 우리가 보는 화면으로 만드는 단계다.

#5-2 순서

https://developer.android.com/develop/ui/compose/phases#drawing

Composition 단계에서 만들었던 UI Tree를 다시 순회한다. 위에서 아래로 가는 방향으로 순회하기 때문에 반드시 부모가 먼저 그려진다.

 

#6 이어지는 글

[Android] UI architecture - Phase와 State

위 게시글에서 이어진다.