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 satırı haline getirin ve bunları değiştirmek için 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 lambdası, içerik köküne uygulanması gereken PaddingValues öğesinin bir örneğini de alı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, kaydırırken araç çubuğunun nasıl daraltılacağını/genişletileceğini bildirmek için ilişkili kaydırılabilir View'da (ö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()'ı arayarak TopAppBarScrollBehavior oluşturun.
  2. Oluşturulan TopAppBarScrollBehavior öğesini TopAppBar öğesine iletin.

  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. exitUntilCollapsedScrollBehavior, uygulama çubuğunu yalnızca içerik tamamen aşağı kaydırıldığında genişletir.

Tamamen özel bir efekt (ör. paralaks efekti) oluşturmak için kendi NestedScrollConnection öğenizi de oluşturabilir ve içerik kaydırılırken 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 composable'ı 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ünü inceleyin.

Daha fazla bilgi

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