Layout in Jetpack Compose

Composable

Composable은 UI의 일부를 설명하는 Unit을 반환하는 함수이다. 함수 내부에 다른 Composable을 넣어 화면에 표시할 내용을 만들 수 있다.

Composable은 여러 UI 요소를 넣을 수 있지만 개발자가 UI 요소를 정렬하는 가이드를 제공해야 원하는 대로 배치할 수 있다.

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

기본 제공 레이아웃 구성요소

위와 같은 문제를 해결하기 위해 Compose는 미리 제공하고 있는 레이아웃 컬렉션을 제공하고 있다.

Column

UI 요소를 세로로 배치한다.

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

Row

UI 요소를 가로로 배치한다.

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

Box

Box를 이용하여 한 요소를 다른 요소 위에 배치한다.

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

Modifier

Modifier 를 이용하여 Composable을 장식할 수 있다. Modifier를 통해 할 수 있는 일은 다음과 같다.

• Composable의 크기, 레이아웃, 동작, 모양 변경
• 접근성 라벨 등의 정보 추가
• 사용자 입력 처리
• 요소를 클릭/드래그/스크롤/확대축소 등의 고수준 상호작용 추가 Modifier는 interface이면서 companion object이다.

  @Composable
  fun ArtistCard(
    artist: Artist,
    onClick: () -> Unit
  ) {
    val padding = 16.dp
    Column(
        Modifier
            .clickable(onClick = onClick) // 해당 컴포저블에 클릭 이벤트 추가
            .padding(padding) // 패딩 추가
            .fillMaxWidth() // 가로 길이 채우기
    ) {
        Row(verticalAlignment = Alignment.CenterVertically) { /*...*/ }
        Spacer(Modifier.size(padding))
        Card(elevation = 4.dp) { /*...*/ }
    }
  }
  

  Modifier는 연쇄 호출이 가능하며 순서를 가린다.

  Modifier 호출 순서

  Modifier는 순서에 따라 그 결과가 달라질 수 있다.

  @Composable
  fun ArtistCard(/*...*/) {
    val padding = 16.dp
    Column(
        Modifier
            .clickable(onClick = onClick)
            .padding(padding)
            .fillMaxWidth()
    ) {
        // rest of the implementation
    }
  }
  

  

@Composable
fun ArtistCard(/*...*/) {
    val padding = 16.dp
    Column(
        Modifier
            .padding(padding)
            .clickable(onClick = onClick)
            .fillMaxWidth()
    ) {
        // rest of the implementation
    }
}