Przenieś układ koordynatora do tworzenia wiadomości

CoordinatorLayout to ViewGroup, który umożliwia korzystanie ze złożonych, nakładających się układy zagnieżdżone. Jest używany jako kontener do obsługi konkretnego stylu Material Design. interakcji, np. rozwijanie/zwijanie paska narzędzi i arkuszy u dołu, w nim zawarte.

W funkcji Compose najbliższy odpowiednik klasy CoordinatorLayout to Scaffold Scaffold udostępnia przedziały na treści do łączenia elementów Material elementów składowych typowych wzorców ekranów i interakcji; Na tej stronie dowiesz się, możesz przenieść swoją implementację CoordinatorLayout, aby korzystała z Scaffold Utwórz.

Etapy migracji

Aby przenieść usługę CoordinatorLayout do Scaffold, wykonaj te czynności:

  1. We fragmencie kodu poniżej sekcja CoordinatorLayout zawiera element AppBarLayout w przypadku: zawierające ToolBar, ViewPager i FloatingActionButton. Skomentuj usuń obiekt CoordinatorLayout i jego elementy podrzędne z hierarchii interfejsu użytkownika, a następnie dodaj element ComposeView, aby ją zastąpić.

    <!--  <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" />

  2. W swoim fragmencie lub aktywności znajdź odniesienie do ComposeView, dodano i wywołaj dla niego metodę setContent. W treści metody ustaw element Scaffold jako jego treść:

    composeView.setContent {
    Scaffold(Modifier.fillMaxSize()) { contentPadding ->
        // Scaffold contents
        // ...
    }
}
    MigrationCommonScenariosSnippets.kt

  3. W treści urządzenia Scaffold dodaj główną zawartość ekranu w: . Ponieważ główną treścią w powyższym kodzie XML jest ViewPager2, użyjemy funkcji ViewPager2 HorizontalPager, co jest jego odpowiednikiem w usłudze Compose. Lambda: content instancji Scaffold również otrzymuje instancję PaddingValues, która powinna zostać został zastosowany do katalogu głównego treści. Aby zastosować to samo, możesz użyć polecenia Modifier.padding PaddingValues do: HorizontalPager.

    composeView.setContent {
    Scaffold(Modifier.fillMaxSize()) { contentPadding ->
        val pagerState = rememberPagerState {
            10
        }
        HorizontalPager(
            state = pagerState,
            modifier = Modifier.padding(contentPadding)
        ) { /* Page contents */ }
    }
}
    MigrationCommonScenariosSnippets.kt

  4. Użyj innych boksów na treści dostępnych w usłudze Scaffold, aby dodać więcej elementów na ekranie i przenieść pozostałe widoki podrzędne. Możesz użyć przedziału topBar, aby dodać TopAppBar oraz floatingActionButton na miejsce 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

Częste zastosowania

Zwijanie i rozwijanie pasków narzędzi

Aby w systemie widoku zwinąć i rozwinąć pasek narzędzi za pomocą przycisków CoordinatorLayout, używasz tagu AppBarLayout jako kontenera dla paska narzędzi. Możesz wtedy podać Behavior do layout_behavior w formacie XML na powiązanym elemencie przewijanym Wyświetl (np. RecyclerView lub NestedScrollView), aby zadeklarować, jak pasek narzędzi zwija się podczas przewijania.

Podobny efekt możesz uzyskać w sekcji Compose TopAppBarScrollBehavior Aby na przykład zaimplementować funkcje zwijania/rozwijania aby pasek narzędzi pojawiał się, gdy przewiniesz w górę, wykonaj te czynności:

  1. Zadzwoń pod numer TopAppBarDefaults.enterAlwaysScrollBehavior(), aby utworzyć TopAppBarScrollBehavior
  2. Przekaż utworzony element TopAppBarScrollBehavior elementowi TopAppBar.

  3. Połącz urządzenie NestedScrollConnection przez: Modifier.nestedScroll na Scaffold, dzięki czemu Scaffold może odbierać zagnieżdżone zdarzenia przewijania jako przewijana zawartość przewija się w górę i w dół. Dzięki temu pasek aplikacji może odpowiednio zwijać/rozwijać się podczas przewijania treści.

    // 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

.

Dostosuj efekt zwijania/rozwijania przewijania

Możesz podać kilka parametrów enterAlwaysScrollBehavior, aby dostosować efekt animacji zwijania/rozwijania. TopAppBarDefaults również udostępnia inne TopAppBarScrollBehavior, takie jak exitUntilCollapsedScrollBehavior, która rozwija pasek aplikacji tylko wtedy, zawartość zostanie przewinięta do końca.

Aby utworzyć całkowicie niestandardowy efekt (np. efekt paralaksy), możesz: utwórz własny NestedScrollConnection i przesuń pasek narzędzi ręcznie jako treść przewija się. Zapoznaj się z przykładem przewijania zagnieżdżonego na stronie AOSP, aby dowiedzieć się przykładowy kod.

Szuflady

Dzięki Widokiom implementujesz panel nawigacji, korzystając z DrawerLayout jako widok główny. Z kolei CoordinatorLayout to DrawerLayout w widoku podrzędnym. DrawerLayout zawiera też inny element podrzędny np. NavigationView, aby wyświetlić opcje nawigacji w szuflady.

W funkcji tworzenia wiadomości możesz wdrożyć panel nawigacji za pomocą ModalNavigationDrawer kompozycyjne. ModalNavigationDrawer oferuje drawerContent gniazdo na szufladę i content na ekran treści.

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

Więcej informacji znajdziesz w sekcji Suflady.

Paski powiadomień

Scaffold udostępnia przedział snackbarHost, który może zaakceptować SnackbarHost w funkcji kompozycyjnej, aby wyświetlić 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

Więcej informacji znajdziesz w sekcji Paski powiadomień.

Więcej informacji

Więcej informacji o migracji wiadomości CoordinatorLayout do Compose znajdziesz w następujące zasoby:

. .