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

CoordinatorLayout을 Compose로 이전

CoordinatorLayout은 ViewGroup로서 복잡하고 중복되며 중첩 레이아웃입니다. 특정 Material Design을 사용 설정하는 컨테이너로 사용됩니다. 확장/축소 툴바 및 하단 시트 등의 상호작용을 지원합니다. 확인할 수 있습니다

Compose에서 CoordinatorLayout에 가장 가까운 것은 다음과 같습니다. Scaffold Scaffold는 Material 결합을 위한 콘텐츠 슬롯을 제공합니다. 일반적인 화면 패턴 및 상호작용의 구성요소입니다. 이 페이지에서는 CoordinatorLayout 구현을 이전하여 다음 위치에서 Scaffold를 사용할 수 있습니다. 편지쓰기를 클릭합니다.

이전 단계

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

아래 스니펫에서 CoordinatorLayout에는 AppBarLayout 이 클래스는 ToolBar, ViewPager, FloatingActionButton를 포함합니다. 설명 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" />

Fragment 또는 Activity에서 개발자가 제공한 ComposeView의 참조를 가져옵니다. 방금 추가하고 setContent 메서드를 호출합니다. 메서드 본문에서 Scaffold를 콘텐츠로 설정합니다.
```
composeView.setContent {
    Scaffold(Modifier.fillMaxSize()) { contentPadding ->
        // Scaffold contents
        // ...
    }
}MigrationCommonScenariosSnippets.kt
```
Scaffold의 콘텐츠에서 화면의 주요 콘텐츠를 있습니다. 위 XML의 기본 콘텐츠는 ViewPager2이므로 HorizontalPager: Compose와 동등한 것입니다. content 람다 Scaffold의 인스턴스도 다음과 같아야 하는 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를 툴바의 컨테이너로 사용합니다. 그런 다음 연결된 스크롤 가능 항목의 XML에서 Behavior부터 layout_behavior까지 뷰 (예: RecyclerView 또는 NestedScrollView)를 사용하여 툴바가 스크롤할 때 접히거나 펼칠 수 있습니다.

Compose에서는 TopAppBarScrollBehavior 예를 들어 접기/펼치기를 구현하려면 위로 스크롤할 때 툴바가 표시되도록 하려면 다음 단계를 따르세요.

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

다음에서 Modifier.nestedScroll를 통해 NestedScrollConnection를 연결합니다. Scaffold를 사용하면 Scaffold가 중첩된 스크롤 이벤트를 스크롤 가능한 콘텐츠가 위/아래로 스크롤되는 경우 이렇게 하면 포함된 앱 바가 콘텐츠를 스크롤할 때 적절하게 접거나 펼칠 수 있어야 합니다.

// 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 다음과 같은 다른 TopAppBarScrollBehavior를 제공합니다. exitUntilCollapsedScrollBehavior: 다음 경우에만 앱 바를 펼칩니다. 콘텐츠를 아래로 스크롤할 수도 있습니다.

완전한 맞춤 효과 (예: 시차 효과)를 만들려면 다음 작업을 수행합니다. 또한 자체 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를 허용할 수 있는 snackbarHost 슬롯을 제공합니다. 컴포저블을 사용하여 Snackbar를 표시합니다.

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 구성요소 및 레이아웃: Material Design 문서 Compose에서 지원되는 구성요소(예: Scaffold)
Sunflower에서 Jetpack Compose로 이전: 뷰에서 Compose로의 Sunflower 샘플의 이전 여정 문서 CoordinatorLayout가 포함된 앱을 표시합니다.