Compose의 레이아웃 - 기본사항

Composable 함수 기본사항

컴포저블 함수는 UI의 일부를 설명하는 Unit을 내보내는 함수이다.

정렬 방식에 관한 가이드가 없으면 Unit을 서로 겹치게 표시한다.

 

예시

@Composable
fun ArtistCard() {
    Text("Alfred Sisley")
    Text("3 minutes ago")
}

위 코드는 텍스트 요소를 서로 겹치게 표시한다.

Compose는 UI요소를 정렬하기위한 레이아웃 컬렉션을 제공한다.

표준 레이아웃

Column

화면에 세로로 배치한다.

Column 내에서 하위 요소의 위치를 설정하려면 verticalArrangement 및 horizontalAlignment를 설정하면 된다.

예시

@Composable
fun ArtistCard() {
    Column {
        Text("Alfred Sisley")
        Text("3 minutes ago")
    }
}

Row

화면에 가로로 배치한다.

Column, Row는 함께 섞어서 쓸 수 있다.

Row 내에서 하위 요소의 위치를 설정하려면 horizontalArrangement와 verticalAlignment를 설정하면 된다.

 

예시

@Composable
fun ArtistCard(artist: Artist) {
    Row(
        verticalAlignment = Alignment.CenterVertically,
        horizontalArrangement = Arrangement.End
    ) {
        Image(/*...*/)
        Column {
            Text(artist.name)
            Text(artist.lastSeenOnline)
        }
    }
}

Box

Box는 요소를 다른 요소 위에 놓는다.

포함된 요소의 특정 정렬 구성도 지원한다.

 

예시

@Composable
fun ArtistAvatar(artist: Artist) {
    Box {
        Image(/*...*/)
        Icon(/*...*/)
    }
}

 

---

레이아웃 모델

레이아웃 모델에서 UI트리는 단일 패스로 배치된다.

1. 각 노드는 먼저 자체 측정을 요청받는다.
2. 하위 요소를 반복적으로 측정한다.
3. 크기 제약 조건을 트리 아래 하위 요소로 전달한다.
4. 리프노드가 크기 지정 및 배치된다.
5. 확인된 크기 및 배치 안내는 다시 트리 위로 전달된다.

→ 상위 요소는 하위 요소보다 먼저 측정되지만 크기와 위치는 하위 요소 다음에 지정된다.

예시)

@Composable
fun SearchResult(...) {
  Row(...) {
    Image(...)
    Column(...) {
      Text(...)
      Text(..)
    }
  }
}

이 함수는 다음과 같은 UI 트리를 생성한다.

SearchResult
  Row
    Image
    Column
      Text
      Text

1. 루트 노드 Row에 즉정을 요청
2. 루트 노드 Row는 첫번째 하위 요소 Image에 측정을 요청
3. Image는 리프노드가 없으므로 크기를 보고하고 배치 안내를 반환
4. 루트노드 Row는 두번째 하위 요소 Column에 측정을 요청
5. Column노드는 첫번째 하위요소 Text에 측정을 요청
6. 첫번째 Text노드는 리프노드이므로 크기를 보고하고 배치 안내를 반환
7. Column노드가 하위 요소를 측정하여 크기를 지정하고 배치했으므로 자체 크기와 배치를 결정할 수 있음
8. 루트노드 Row가 하위 요소를 측정하여 크기를 지정하고 배치했으므로 자체 크기와 배치를 결정할 수 있음

---

성능

• Compose는 하위 요소를 한 번만 측정하여 높은 성능을 발휘한다.요소가 하위 요소를 두 번 측정한 후 하위 요소가 각각의 하위 요소가 각각의 자체 하위 요소를 두 번 측정하는 방식은 전체 UI를 배치하려는 한 번의 시도에서 많은 작업을 실행해야 하므로 앱의 성능을 유지하기 어렵다.
• 레이아웃에서 여러 측정이 필요하면 Compose는 내장 측정 기능을 제공한다. (다른 페이지에서 설명!)
• 단일 패스 측정은 성능 측면에서 효율적이므로 Compose가 깊은 UI트리를 효율적으로 처리할 수 있다.
• 측정과 배치는 레이아웃 패스의 별개 하위 단계이므로, 항목의 측정이 아닌 배치에만 영향을 미치는 모든 변경사항은 별도로 실행할 수 있다.