CoordinatorLayout'u Compose'a Taşı

CoordinatorLayout, karmaşık, çakışan ve iç içe yerleşimlere olanak tanıyan bir ViewGroup'dir. İçerdiği Görünümler için araç çubuklarını ve alt sayfaları genişletme/daraltma gibi belirli Material Design etkileşimlerini etkinleştirmek amacıyla kapsayıcı olarak kullanılır.

Oluşturma'da CoordinatorLayout öğesinin en yakın karşılığı Scaffold şeklindedir. Scaffold, Material bileşenlerini ortak ekran desenleri ve etkileşimler halinde birleştirmek için içerik yuvaları sağlar. Bu sayfada, CoordinatorLayout uygulamanızı Compose'da Scaffold kullanacak şekilde nasıl taşıyabileceğiniz açıklanmaktadır.

Taşıma adımları

CoordinatorLayout adresinden Scaffold adresine geçmek için aşağıdaki adımları uygulayın:

  1. Aşağıdaki snippet'te CoordinatorLayout, ToolBar, ViewPager ve FloatingActionButton içeren bir AppBarLayout içeriyor. Kullanıcı arayüzü hiyerarşinizdeki CoordinatorLayout ve alt öğelerini yorum dışı bırakın ve bunları değiştirmek için bir ComposeView ekleyin.

    <!--  <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. Parçanızda veya etkinliğinizde, yeni eklediğiniz ComposeView öğesine referans alın ve üzerinde setContent yöntemini çağırın. Yöntemin gövdesinde, içeriği olarak bir Scaffold ayarlayın:

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

  3. Scaffold içeriğinde ekranınızın birincil içeriğini ekleyin. Yukarıdaki XML'deki birincil içerik ViewPager2 olduğundan, bunun Compose'daki karşılığı olan HorizontalPager öğesini kullanacağız. Scaffold öğesinin content lambda'sı da PaddingValues örneğini alır. Bu örnek, içerik köküne uygulanmalıdır. Modifier.padding simgesini kullanarak PaddingValues ile aynı HorizontalPager'yi uygulayabilirsiniz.

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

  4. Scaffold tarafından sağlanan diğer içerik alanlarını kullanarak daha fazla ekran öğesi ekleyin ve kalan alt görünümleri taşıyın. topBar yuvasını kullanarak TopAppBar ekleyebilir, floatingActionButton yuvasını kullanarak FloatingActionButton sağlayabilirsiniz.

    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

Yaygın kullanım alanları

Araç çubuklarını daraltma ve genişletme

Görünüm sisteminde, araç çubuğunu CoordinatorLayout ile daraltıp genişletmek için AppBarLayout öğesini araç çubuğu için kapsayıcı olarak kullanırsınız. Ardından, araç çubuğunun kaydırma sırasında nasıl daraltılacağını/genişletileceğini bildirmek için ilişkili kaydırılabilir görünümdeki (ör. RecyclerView veya NestedScrollView) XML'de Behavior ile layout_behavior arasında bir değer belirtebilirsiniz.

Oluşturma bölümünde, TopAppBarScrollBehavior ile benzer bir efekt elde edebilirsiniz. Örneğin, yukarı kaydırdığınızda araç çubuğunun görünmesi için daraltılabilir/genişletilebilir bir araç çubuğu uygulamak istiyorsanız aşağıdaki adımları uygulayın:

  1. TopAppBarDefaults.enterAlwaysScrollBehavior() numaralı telefonu arayarak TopAppBarScrollBehavior oluşturun.
  2. Oluşturulan TopAppBarScrollBehavior öğesini TopAppBar öğesine sağlayın.

  3. NestedScrollConnection öğesini Modifier.nestedScroll üzerinden Scaffold öğesine bağlayın. Böylece, kaydırılabilir içerik yukarı/aşağı kaydırıldığında Scaffold, iç içe kaydırma etkinliklerini alabilir. Bu sayede, içerilen uygulama çubuğu içerik kaydırıldıkça uygun şekilde daraltılabilir/genişletilebilir.

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

Daraltma/genişletme kaydırma efektini özelleştirme

Daraltma/genişletme animasyon efektini özelleştirmek için enterAlwaysScrollBehavior ile ilgili çeşitli parametreler sağlayabilirsiniz. TopAppBarDefaults ayrıca TopAppBarScrollBehavior gibi başka TopAppBarScrollBehavior da sunar. Bu, yalnızca içerik tamamen aşağı kaydırıldığında uygulama çubuğunu genişletir. exitUntilCollapsedScrollBehavior

Tamamen özel bir efekt (ör. paralaks efekti) oluşturmak için kendi NestedScrollConnection öğenizi oluşturabilir ve içerik kaydırıldıkça araç çubuğunu manuel olarak kaydırabilirsiniz. Kod örneği için AOSP'deki İç içe kaydırma örneğine bakın.

Çekmeceler

Görünümler ile kök görünüm olarak DrawerLayout kullanarak bir gezinme çekmecesi uygularsınız. Buna karşılık, CoordinatorLayout, DrawerLayout öğesinin alt görünümüdür. DrawerLayout, çekmecedeki gezinme seçeneklerini göstermek için NavigationView gibi başka bir alt görünüm de içerir.

Compose'da, ModalNavigationDrawer composable'ını kullanarak bir gezinme çekmecesi uygulayabilirsiniz. ModalNavigationDrawer, çekmece için drawerContent yuvası ve ekran içeriği için content yuvası sunar.

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

Daha fazla bilgi için Çekmeceler bölümünü inceleyin.

Snackbar'lar

Scaffold, snackbarHost yuvası sağlar. Bu yuva, Snackbar öğesini görüntülemek için SnackbarHost kabul edebilir.

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

Daha fazla bilgi edinmek için Snackbars (Snack çubukları) bölümüne bakın.

Daha fazla bilgi

CoordinatorLayout uygulamasını Compose'a taşıma hakkında daha fazla bilgi için aşağıdaki kaynaklara bakın: