Google은 흑인 공동체를 위한 인종 간 평등을 진전시키기 위해 노력하고 있습니다. Google에서 어떤 노력을 하고 있는지 확인하세요.

Compose의 레이아웃

Jetpack Compose를 사용하면 앱의 UI를 훨씬 쉽게 디자인하고 빌드할 수 있습니다. 이 문서에서는 개발자가 UI 요소를 배치하는 데 도움이 되도록 Compose에서 제공하는 몇 가지 구성요소를 설명하며 필요시 더 전문적인 레이아웃을 빌드하는 방법을 보여줍니다.

구성 가능한 함수는 Compose의 기본 구성요소입니다. 구성 가능한 함수는 UI의 일부를 형성하는 함수입니다. 이 함수는 몇 가지 입력을 받아서 화면에 표시되는 내용을 생성합니다. 컴포저블에 관한 자세한 내용은 Compose 멘탈 모델 문서를 살펴보세요.

구성 가능한 함수는 여러 UI 요소를 내보낼 수 있습니다. 그러나 개발자가 UI 요소를 어떻게 정렬해야 하는지에 관한 가이드를 제공하지 않으면 Compose는 개발자가 원하지 않는 방식으로 요소를 정렬할 수 있습니다. 예를 들어 다음 코드는 텍스트 요소 두 개를 생성합니다.

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

원하는 정렬 방식에 관한 가이드가 없으면 Compose는 텍스트 요소를 서로 겹치게 표시하므로 텍스트를 읽을 수 없게 됩니다.

두 개의 텍스트 요소가 서로 위에 그려져 텍스트를 읽을 수 없게 됨

Compose는 UI 요소를 정렬하는 데 도움이 되도록 즉시 사용 가능한 레이아웃 컬렉션을 제공하므로 이를 사용하면 더욱 전문적인 고유한 레이아웃을 쉽게 정의할 수 있습니다.

표준 레이아웃 구성요소

많은 경우에 Compose의 표준 레이아웃 요소만 사용할 수 있습니다.

Column을 사용하여 항목을 화면에 세로로 배치합니다.

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

두 개의 텍스트 요소가 열 레이아웃으로 정렬되므로 텍스트를 읽을 수 있음

마찬가지로 Row를 사용하여 항목을 화면에 가로로 배치합니다. ColumnRow는 모두 포함된 요소의 중력 구성을 지원합니다.

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

텍스트 요소의 열 옆에 작은 그래픽이 있는 더 복잡한 레이아웃 예시

Stack을 사용하여 한 요소를 다른 요소 위에 배치합니다.

세 가지 간단한 레이아웃 컴포저블(열, 행, 스택) 비교

흔히 이러한 구성요소만 있으면 됩니다. 고유의 구성 가능한 함수를 작성하여 이러한 레이아웃을 앱에 적합한 더욱 정교한 레이아웃에 결합할 수 있습니다.

이러한 기본 레이아웃은 각각 자체 중력 설정을 정의하여 요소를 어떻게 정렬해야 하는지 지정합니다. 이러한 요소를 구성하려면 제어자를 사용합니다.

제어자

제어자를 사용하면 컴포저블이 표시되는 방식을 조정할 수 있습니다. 제어자를 통해 다음과 같은 종류의 작업을 실행할 수 있습니다.

  • 컴포저블의 동작 및 디자인 변경
  • 접근성 라벨과 같은 정보 추가
  • 사용자 입력 처리
  • 요소를 클릭 가능, 스크롤 가능, 드래그 가능 또는 확대/축소 가능하게 만드는 것과 같은 높은 수준의 상호작용 추가

제어자는 표준 Kotlin 객체입니다. Modifier 클래스 함수 중 하나를 호출하여 제어자를 만듭니다. 다음과 같이 이러한 함수를 함께 연결하여 구성할 수 있습니다.

@Composable
fun ArtistCard(
    artist: Artist,
    onClick: () -> Unit
) {
    val padding = 16.dp
    Column(
        Modifier
            .clickable(onClick = onClick)
            .padding(padding)
            .fillMaxWidth()
    ) {
        Row(verticalGravity = Alignment.CenterVertically) { … }
        Spacer(Modifier.preferredSize(padding))
        Card(elevation = 4.dp) { … }
    }
}

제어자를 사용하여 그래픽이 정렬되는 방식과 사용자 입력에 응답하는 영역을 변경하는 훨씬 더 복잡한 레이아웃

위의 코드에서 다양한 제어자 함수가 함께 사용된 것을 확인할 수 있습니다.

  • clickable() - 컴포저블이 사용자 입력에 반응하도록 합니다.
  • padding() - 요소 주위에 공간을 배치합니다.
  • fillMaxWidth() - 컴포저블이 상위 요소로부터 부여받은 최대 너비를 채우도록 합니다.
  • preferredSize() - 요소의 기본 너비 및 높이를 지정합니다.

제어자 함수의 순서는 중요합니다. 각 함수는 이전 함수에서 반환한 Modifier를 변경하므로 시퀀스는 최종 결과에 영향을 줍니다. 다음 예를 살펴보겠습니다.

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

가장자리 주변의 패딩을 포함한 영역 전체가 클릭에 반응함

위의 코드에서는 padding 제어자가 clickable 제어자 뒤에 적용되었기 때문에 주변 패딩을 포함하여 전체 영역을 클릭할 수 있습니다. 제어자가 다른 순서로 적용되면 다음과 같이 padding으로 추가된 공간은 사용자 입력에 반응하지 않습니다.

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

레이아웃 가장자리 주변의 패딩이 더 이상 클릭에 반응하지 않음

스크롤 가능한 레이아웃

ScrollableRow 또는 ScrollableColumn을 사용하여 Row 또는 Column 내부의 요소를 스크롤 가능하게 합니다.

@Composable
fun Feed(
  feedItems: List<Artist>,
  onSelected: (Artist) -> Unit
) {
  ScrollableColumn(Modifier.fillMaxSize()) {
    feedItems.forEach {
      ArtistCard(it, onSelected(it))
    }
  }
}

스크롤 가능한 열의 몇 가지 유사한 레이아웃

이 접근 방식은 표시할 요소가 거의 없는 경우 잘 작동하지만 대규모 데이터 세트의 경우 빠르게 성능 문제를 야기할 수 있습니다. 화면에 표시되는 요소의 일부만 표시하려면 LazyColumnFor 또는 LazyRowFor를 사용합니다.

@Composable
fun Feed(
  feedItems: List<Artist>,
  onSelected: (Artist) -> Unit
) {
  Surface(Modifier.fillMaxSize()) {
    LazyColumnFor(feedItems) { item ->
      ArtistCard(item, onSelected(item))
    }
  }
}

내장 머티리얼 구성요소

Compose의 가장 높은 UI 추상화 수준은 머티리얼 디자인입니다. Compose는 UI를 쉽게 빌드할 수 있도록 처음부터 매우 다양한 컴포저블을 제공합니다. Drawer, FloatingActionButtonTopAppBar와 같은 요소가 모두 제공됩니다.

머티리얼 구성요소는 Compose가 컴포저블 위에 맞춤설정 레이어를 배치하기 위해 도입한 패턴인 슬롯 API를 많이 사용합니다. 슬롯은 개발자가 원하는 대로 채울 수 있도록 UI에 빈 공간을 남겨둡니다. 예를 들어 다음은 개발자가 TopAppBar에서 맞춤설정할 수 있는 슬롯입니다.

UI 요소를 추가할 수 있는 앱 바의 슬롯 예시

컴포저블은 일반적으로 content 구성 가능한 람다(content: @Composable () -> Unit)를 사용합니다. 슬롯 API는 특정 용도를 위해 여러 content 매개변수를 노출합니다. 예를 들어 TopAppBar를 사용하면 title, navigationIconactions의 콘텐츠를 제공할 수 있습니다.

머티리얼과 함께 가장 높은 수준의 컴포저블은 Scaffold입니다. Scaffold를 사용하면 기본 머티리얼 디자인 레이아웃 구조로 UI를 구현할 수 있습니다. ScaffoldTopAppBar, BottomAppBar, FloatingActionButtonDrawer와 같은 가장 일반적인 최상위 머티리얼 구성요소의 슬롯을 제공합니다. Scaffold를 사용하면 이러한 구성요소가 적절하게 배치되었는지 그리고 함께 올바르게 작동하는지 쉽게 확인할 수 있습니다.

Scaffold를 사용하여 머티리얼 디자인과 일관된 방식으로 요소를 정렬하는 레이아웃 예시

@Composable
fun HomeScreen(...) {
    Scaffold (
        drawerContent = { ... },
        topBar = { ... },
        bodyContent = { ... }
    )
}

ConstraintLayout

ConstraintLayout은 화면에 다른 요소를 기준으로 컴포저블을 배치하는 데 도움이 될 수 있으며 여러 Row, ColumnStack 요소를 사용하는 대신 사용할 수 있습니다. ConstraintLayout은 더 복잡한 정렬 요구사항이 있는 더 큰 레이아웃을 구현할 때 유용합니다.

다음과 같이 Compose의 ConstraintLayoutDSL과 함께 작동합니다.

  • 참조는 createRefs() 또는 createRefFor()를 사용하여 생성되며, ConstraintLayout의 각 컴포저블에는 연결된 참조가 있어야 합니다.
  • 제약 조건은 constrainAs() 제어자를 사용하여 제공됩니다. 이 제어자는 참조를 매개변수로 사용하고 본문 람다에 제약 조건을 지정할 수 있게 합니다.
  • 제약 조건은 linkTo() 또는 다른 유용한 메서드를 사용하여 지정됩니다.
  • parentConstraintLayout 컴포저블 자체에 대한 제약 조건을 지정하는 데 사용할 수 있는 기존 참조입니다.

다음은 ConstraintLayout을 사용하는 컴포저블의 예입니다.

@Composable
fun ConstraintLayoutContent() {
    ConstraintLayout {
        // Create references for the composables to constrain
        val (button, text) = createRefs()

        Button(
            onClick = { /* Do something */ },
            // Assign reference "button" to the Button composable
            // and constrain it to the top of the ConstraintLayout
            modifier = Modifier.constrainAs(button) {
                top.linkTo(parent.top, margin = 16.dp)
            }
        ) {
            Text("Button")
        }

        // Assign reference "text" to the Text composable
        // and constrain it to the bottom of the Button composable
        Text("Text", Modifier.constrainAs(text) {
            top.linkTo(button.bottom, margin = 16.dp)
        })
    }
}

이 코드는 Button의 상단을 여백이 16.dp인 상위 요소로 제한하고 Text를 여백이 16.dpButton의 하단으로 제한합니다.

ConstraintLayout에 정렬된 버튼 및 텍스트 요소 예시

ConstraintLayout을 사용하는 방법에 관한 더 많은 예를 보려면 레이아웃 Codelab을 사용해 보세요.

분리된 API

ConstraintLayout에서 제약 조건은 적용되는 컴포저블의 제어자와 함께 인라인으로 지정됩니다. 그러나 제약 조건이 적용되는 레이아웃에서 제약 조건을 분리하는 것이 더 좋은 상황이 있습니다. 예를 들어 화면 구성을 기반으로 제약 조건을 변경하거나 두 제약 조건 세트 사이에 애니메이션을 적용할 수 있습니다.

이 같은 경우에는 ConstraintLayout을 서로 다른 방식으로 사용할 수 있습니다.

  1. ConstraintSet을 매개변수로 ConstraintLayout에 전달합니다.
  2. tag 제어자를 사용하여 ConstraintSet에 생성된 참조를 컴포저블에 할당합니다.
@Composable
fun DecoupledConstraintLayout() {
    WithConstraints {
        val constraints = if (minWidth < 600.dp) {
            decoupledConstraints(margin = 16.dp) // Portrait constraints
        } else {
            decoupledConstraints(margin = 32.dp) // Landscape constraints
        }

        ConstraintLayout(constraints) {
            Button(
                onClick = { /* Do something */ },
                modifier = Modifier.tag("button")
            ) {
                Text("Button")
            }

            Text("Text", Modifier.tag("text"))
        }
    }
}

private fun decoupledConstraints(margin: Dp): ConstraintSet {
    return ConstraintSet2 {
        val button = createRefFor("button")
        val text = createRefFor("text")

        constrain(button) {
            top.linkTo(parent.top, margin= margin)
        }
        constrain(text) {
            top.linkTo(button.bottom, margin)
        }
    }
}

그러면 제약 조건을 변경해야 할 때 다른 ConstraintSet을 전달하기만 하면 됩니다.

맞춤 레이아웃

일부 구성 가능한 함수는 호출될 때 UI 요소를 내보냅니다. 그러면 이 요소는 화면에 렌더링되는 UI 트리에 추가됩니다. 각 UI 요소에는 하나의 상위 요소와 여러 개의 하위 요소가 있을 수 있습니다. 또한 각 요소에는 (x, y) 위치로 지정된 상위 요소 내 위치와 widthheight로 지정된 크기가 있습니다.

요소는 충족되어야 하는 자체 제약 조건을 정의해야 합니다. 제약 조건은 요소의 최소/최대 widthheight를 제한합니다. 요소에 하위 요소가 있다면 상위 요소는 각 하위 요소를 측정하여 상위 요소의 크기를 결정할 수 있습니다. 요소가 자체 크기를 보고하면 맞춤 레이아웃 만들기에 자세히 설명된 대로 그 요소를 기준으로 하위 요소를 배치할 수 있습니다.

단일 패스 측정은 성능 측면에서 효율적이므로 Compose가 깊은 UI 트리를 효율적으로 처리할 수 있습니다. 레이아웃 요소가 한 하위 요소를 두 번 측정하고 이 하위 요소가 자체 하위 요소들 중 하나를 두 번 측정하는 식으로 측정을 진행하면 전체 UI를 배치하려는 한 번의 시도에도 많은 작업을 실행해야 하므로 앱의 성능을 유지하기가 어렵습니다. 그러나 단일 하위 요소 측정 결과에 따른 정보 외에 추가 정보가 실제로 필요할 때가 있습니다. 이러한 상황에 효율적으로 대처할 수 있는 접근 방식이 있으며, 이는 레이아웃 제어자 사용에서 설명합니다.

레이아웃 제어자 사용

layout 제어자를 사용하여 컴포저블이 측정되고 배치되는 방식을 수정할 수 있습니다. Layout은 람다입니다. 매개변수에는 측정할 수 있는 컴포저블(measurable로 전달됨) 및 이 컴포저블의 전달된 제약 조건(constraints로 전달됨)이 포함됩니다. 대부분의 맞춤 layout 제어자는 다음 패턴을 따릅니다.

fun Modifier.customLayoutModifier(...) =
    Modifier.layout { measurable, constraints ->
  ...
})

화면에 Text를 표시하고 텍스트 첫 줄의 상단에서 기준선까지의 거리를 제어해 보겠습니다. 그렇게 하려면 layout 제어자를 사용하여 화면에 컴포저블을 수동으로 배치해야 합니다. 원하는 동작은 다음과 같으며, 여기서 Text 상단 패딩은 24.dp로 설정됩니다.

요소 사이의 공간을 설정하는 일반 UI 패딩과 한 기준선에서 다음 기준선까지의 공간을 설정하는 텍스트 패딩의 차이를 보여주는 예시

다음은 해당 간격을 생성하는 코드입니다.

fun Modifier.firstBaselineToTop(
  firstBaselineToTop: Dp
) = Modifier.layout { measurable, constraints ->
  // Measure the composable
  val placeable = measurable.measure(constraints)

  // Check the composable has a first baseline
  check(placeable[FirstBaseline] != AlignmentLine.Unspecified)
  val firstBaseline = placeable[FirstBaseline]

  // Height of the composable with padding - first baseline
  val placeableY = firstBaselineToTop.toIntPx() - firstBaseline
  val height = placeable.height + placeableY
  layout(placeable.width, height) {
    // Where the composable gets placed
    placeable.placeRelative(0, placeableY)
  }
})

이 코드에서 이루어지는 작업은 다음과 같습니다.

  1. measurable 람다 매개변수에서 measurable.measure(constraints)를 호출하여 Text를 측정합니다.
  2. layout(width, height) 메서드를 호출하여 컴포저블의 크기를 지정합니다. 이 메서드는 하위 요소 배치에 사용되는 람다도 제공합니다. 이 경우 크기는 마지막 기준선과 추가된 상단 패딩 사이의 높이입니다.
  3. placeable.placeRelative(x, y)를 호출하여 화면에 하위 요소를 배치합니다. 하위 요소를 배치하지 않으면 하위 요소가 표시되지 않습니다. y 위치는 텍스트의 첫 번째 기준선 위치인 상단 패딩에 해당합니다. placeRelative는 오른쪽에서 왼쪽 컨텍스트의 위치를 자동으로 미러링합니다.

예상대로 작동하는지 확인하려면 Text에서 다음 제어자를 사용합니다.

@Preview
@Composable
fun TextWithPaddingToBaselinePreview() {
  MyApplicationTheme {
    Text("Hi there!", Modifier.firstBaselineToTop(32.dp))
  }
}

@Preview
@Composable
fun TextWithNormalPaddingPreview() {
  MyApplicationTheme {
    Text("Hi there!", Modifier.padding(top = 32.dp))
  }
}

텍스트 요소의 여러 미리보기: 하나는 요소 사이의 일반적인 패딩을 보여주고 다른 하나는 한 기준선에서 다음 기준선까지의 패딩을 보여줌

맞춤 레이아웃 만들기

layout 제어자는 하나의 컴포저블만 변경합니다. 여러 컴포저블을 수동으로 제어하려면 Layout 컴포저블을 대신 사용해야 합니다. 이 컴포저블을 사용하면 하위 요소를 수동으로 측정하고 배치할 수 있습니다. ColumnRow와 같은 모든 상위 수준 레이아웃은 Layout 컴포저블을 사용하여 빌드됩니다.

Column의 간단한 구현을 빌드해 보겠습니다. 대부분의 맞춤 레이아웃은 다음 패턴을 따릅니다.

@Composable
fun MyOwnColumn(
    modifier: Modifier = Modifier,
    content: @Composable() () -> Unit
) {
    Layout(
        modifier = modifier,
        children = content
    ) { measurables, constraints ->
        // measure and position children given constraints logic here
    }
}

layout 제어자와 마찬가지로 measurables는 측정해야 하는 하위 요소 목록이며 constraintsLayout에 전달되는 제약 조건입니다. 앞서와 동일한 로직에 따라 MyOwnColumn을 다음과 같이 구현할 수 있습니다.

@Composable
fun MyOwnColumn(
    modifier: Modifier = Modifier,
    children: @Composable() () -> Unit
) {
    Layout(
        modifier = modifier,
        children = children
    ) { measurables, constraints ->
        // Don't constrain child views further, measure them with given constraints
        // List of measured children
        val placeables = measurables.map { measurable ->
            // Measure each children
            measurable.measure(constraints)
        }

        // Set the size of the layout as big as it can
        layout(constraints.maxWidth, constraints.maxHeight) {
            // Track the y co-ord we have placed children up to
            var yPosition = 0

            // Place children in the parent layout
            placeables.forEach { placeable ->
                // Position item on the screen
                placeable.placeRelative(x = 0, y = yPosition)

                // Record the y co-ord placed up to
                yPosition += placeable.height
            }
        }
    }
}

하위 요소 컴포저블은 Layout 제약 조건에 의해 제한되며 이전 컴포저블의 yPosition을 기반으로 배치됩니다.

맞춤 컴포저블을 사용하는 방법은 다음과 같습니다.

@Composable
fun CallingComposable(modifier: Modifier = Modifier) {
    MyOwnColumn(modifier.padding(8.dp)) {
        Text("MyOwnColumn")
        Text("places items")
        Text("vertically.")
        Text("We've done it by hand!")
    }
}

alt_text

레이아웃 방향

LayoutDirection 앰비언트를 사용하여 컴포저블의 레이아웃 방향을 변경합니다.

화면에 컴포저블을 수동으로 배치하는 경우 LayoutDirectionlayout 제어자 또는 Layout 컴포저블의 LayoutScope에 포함되어 있습니다.

layoutDirection을 사용할 때는 place를 사용하여 컴포저블을 배치합니다. placeRelative 메서드와 달리 place는 읽기 방향(왼쪽에서 오른쪽 또는 오른쪽에서 왼쪽)에 따라 변경되지 않습니다.

자세히 알아보기

자세히 알아보려면 Jetpack Compose의 레이아웃 Codelab을 참조하세요.