이 페이지는 Cloud Translation API를 통해 번역되었습니다.

CoordinatorLayout을 Compose로 이전

CoordinatorLayout는 복잡하고 중첩되며 중첩된 레이아웃을 사용 설정하는 ViewGroup입니다. 내부에 포함된 뷰의 확장/축소 툴바, 하단 시트와 같은 특정 Material Design 상호작용을 사용 설정하기 위한 컨테이너로 사용됩니다.

Compose에서 CoordinatorLayout에 가장 가까운 항목은 Scaffold입니다. Scaffold는 Material 구성요소를 일반적인 화면 패턴과 상호작용으로 결합하기 위한 콘텐츠 슬롯을 제공합니다. 이 페이지에서는 Compose에서 Scaffold를 사용하도록 CoordinatorLayout 구현을 이전하는 방법을 설명합니다.

이전 단계

CoordinatorLayout를 Scaffold로 이전하려면 다음 단계를 따르세요.

아래 스니펫에서 CoordinatorLayout에는 ToolBar, ViewPager, FloatingActionButton를 포함하는 AppBarLayout가 포함되어 있습니다. UI 계층 구조에서 CoordinatorLayout 및 하위 요소를 주석 처리하고 ComposeView를 추가하여 바꿉니다.

<!--  <androidx.coordinatorlayout.widget.CoordinatorLayout-->
<!--      android:id="@+id/coordinator_layout"-->
<!--      android:layout_width="match_parent"-->
<!--      android:layout_height="match_parent"-->
<!--      android:fitsSystemWindows="true">-->

<!--    <androidx.compose.ui.platform.ComposeView-->
<!--        android:id="@+id/compose_view"-->
<!--        android:layout_width="match_parent"-->
<!--        android:layout_height="match_parent"-->
<!--        app:layout_behavior="@string/appbar_scrolling_view_behavior" />-->

<!--    <com.google.android.material.appbar.AppBarLayout-->
<!--        android:id="@+id/app_bar_layout"-->
<!--        android:layout_width="match_parent"-->
<!--        android:layout_height="wrap_content"-->
<!--        android:fitsSystemWindows="true"-->
<!--        android:theme="@style/Theme.Sunflower.AppBarOverlay">-->

    <!-- AppBarLayout contents here -->

<!--    </com.google.android.material.appbar.AppBarLayout>-->

<!--  </androidx.coordinatorlayout.widget.CoordinatorLayout>-->

<androidx.compose.ui.platform.ComposeView
    android:id="@+id/compose_view"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

프래그먼트 또는 활동에서 방금 추가한 ComposeView의 참조를 가져와서 setContent 메서드를 호출합니다. 메서드 본문에서 Scaffold를 콘텐츠로 설정합니다.
```
composeView.setContent {
    Scaffold(Modifier.fillMaxSize()) { contentPadding ->
        // Scaffold contents
        // ...
    }
}MigrationCommonScenariosSnippets.kt
```
Scaffold의 콘텐츠에서 화면의 주요 콘텐츠를 추가합니다. 위 XML의 기본 콘텐츠는 ViewPager2이므로 Compose와 동등한 HorizontalPager를 사용합니다. Scaffold의 content 람다는 콘텐츠 루트에 적용되어야 하는 PaddingValues 인스턴스도 수신합니다. Modifier.padding를 사용하여 동일한 PaddingValues를 HorizontalPager에 적용할 수 있습니다.
```
composeView.setContent {
    Scaffold(Modifier.fillMaxSize()) { contentPadding ->
        val pagerState = rememberPagerState {
            10
        }
        HorizontalPager(
            state = pagerState,
            modifier = Modifier.padding(contentPadding)
        ) { /* Page contents */ }
    }
}MigrationCommonScenariosSnippets.kt
```

Scaffold가 제공하는 다른 콘텐츠 슬롯을 사용하여 화면 요소를 더 추가하고 나머지 하위 뷰를 이전합니다. topBar 슬롯을 사용하여 TopAppBar를 추가하고 floatingActionButton 슬롯을 사용하여 FloatingActionButton를 제공할 수 있습니다.

composeView.setContent {
    Scaffold(
        Modifier.fillMaxSize(),
        topBar = {
            TopAppBar(
                title = {
                    Text("My App")
                }
            )
        },
        floatingActionButton = {
            FloatingActionButton(
                onClick = { /* Handle click */ }
            ) {
                Icon(
                    Icons.Filled.Add,
                    contentDescription = "Add Button"
                )
            }
        }
    ) { contentPadding ->
        val pagerState = rememberPagerState {
            10
        }
        HorizontalPager(
            state = pagerState,
            modifier = Modifier.padding(contentPadding)
        ) { /* Page contents */ }
    }
}MigrationCommonScenariosSnippets.kt

일반적인 사용 사례

툴바 접기 및 펼치기

뷰 시스템에서 CoordinatorLayout로 툴바를 접거나 펼치려면 AppBarLayout를 툴바의 컨테이너로 사용합니다. 그런 다음 연결된 스크롤 가능한 뷰 (예: RecyclerView 또는 NestedScrollView)의 XML에서 layout_behavior를 통해 Behavior를 지정하여 스크롤할 때 툴바가 접히/펼치는 방식을 선언할 수 있습니다.

Compose에서는 TopAppBarScrollBehavior를 통해 유사한 효과를 달성할 수 있습니다. 예를 들어 위로 스크롤할 때 툴바가 표시되도록 접기/펼치기 툴바를 구현하려면 다음 단계를 따르세요.

TopAppBarDefaults.enterAlwaysScrollBehavior()를 호출하여 TopAppBarScrollBehavior를 만듭니다.
생성된 TopAppBarScrollBehavior를 TopAppBar에 제공합니다.

스크롤 가능한 콘텐츠가 위/아래로 스크롤될 때 Scaffold가 중첩 스크롤 이벤트를 수신할 수 있도록 Scaffold의 Modifier.nestedScroll를 통해 NestedScrollConnection를 연결합니다. 이렇게 하면 콘텐츠가 스크롤될 때 포함된 앱 바가 적절하게 접히거나 펼칠 수 있습니다.

// 1. Create the TopAppBarScrollBehavior
val scrollBehavior = TopAppBarDefaults.enterAlwaysScrollBehavior()

Scaffold(
    topBar = {
        TopAppBar(
            title = {
                Text("My App")
            },
            // 2. Provide scrollBehavior to TopAppBar
            scrollBehavior = scrollBehavior
        )
    },
    // 3. Connect the scrollBehavior.nestedScrollConnection to the Scaffold
    modifier = Modifier
        .fillMaxSize()
        .nestedScroll(scrollBehavior.nestedScrollConnection)
) { contentPadding ->
    /* Contents */
    // ...
}MigrationCommonScenariosSnippets.kt

접기/펼치기 스크롤 효과 맞춤설정

enterAlwaysScrollBehavior에 여러 매개변수를 제공하여 접기/펼치기 애니메이션 효과를 맞춤설정할 수 있습니다. TopAppBarDefaults는 exitUntilCollapsedScrollBehavior와 같은 다른 TopAppBarScrollBehavior도 제공합니다. 이는 콘텐츠가 맨 아래로 스크롤될 때만 앱 바를 확장합니다.

완전한 맞춤 효과 (예: 시차 효과)를 만들려면 자체 NestedScrollConnection를 만들고 콘텐츠가 스크롤될 때 수동으로 툴바를 오프셋하면 됩니다. 코드 예는 AOSP의 중첩 스크롤 샘플을 참고하세요.

창

뷰를 사용하면 DrawerLayout를 루트 뷰로 사용하여 탐색 창을 구현할 수 있습니다. 따라서 CoordinatorLayout는 DrawerLayout의 하위 뷰입니다. DrawerLayout에는 NavigationView와 같은 다른 하위 뷰도 포함되어 창에 탐색 옵션을 표시합니다.

Compose에서 ModalNavigationDrawer 컴포저블을 사용하여 탐색 창을 구현할 수 있습니다. ModalNavigationDrawer는 창의 drawerContent 슬롯과 화면 콘텐츠를 위한 content 슬롯을 제공합니다.

ModalNavigationDrawer(
    drawerContent = {
        ModalDrawerSheet {
            Text("Drawer title", modifier = Modifier.padding(16.dp))
            Divider()
            NavigationDrawerItem(
                label = { Text(text = "Drawer Item") },
                selected = false,
                onClick = { /*TODO*/ }
            )
            // ...other drawer items
        }
    }
) {
    Scaffold(Modifier.fillMaxSize()) { contentPadding ->
        // Scaffold content
        // ...
    }
}MigrationCommonScenariosSnippets.kt

자세한 내용은 창을 참고하세요.

스낵바

Scaffold는 SnackbarHost 컴포저블을 허용하여 Snackbar를 표시할 수 있는 snackbarHost 슬롯을 제공합니다.

val scope = rememberCoroutineScope()
val snackbarHostState = remember { SnackbarHostState() }
Scaffold(
    snackbarHost = {
        SnackbarHost(hostState = snackbarHostState)
    },
    floatingActionButton = {
        ExtendedFloatingActionButton(
            text = { Text("Show snackbar") },
            icon = { Icon(Icons.Filled.Image, contentDescription = "") },
            onClick = {
                scope.launch {
                    snackbarHostState.showSnackbar("Snackbar")
                }
            }
        )
    }
) { contentPadding ->
    // Screen content
    // ...
}MigrationCommonScenariosSnippets.kt

자세한 내용은 스낵바를 참고하세요.

자세히 알아보기

CoordinatorLayout를 Compose로 이전하는 방법에 관한 자세한 내용은 다음 리소스를 참고하세요.

Material 구성요소 및 레이아웃: Compose에서 지원되는 Material Design 구성요소(예: Scaffold)에 관한 문서입니다.
Sunflower를 Jetpack Compose로 이전: CoordinatorLayout가 포함된 Sunflower 샘플 앱의 뷰에서 Compose로의 이전 과정을 설명하는 블로그 게시물입니다.