CoordinatorLayout'u Compose'a Taşı

CoordinatorLayout, karmaşık, çakışan ve iç içe yerleştirilmiş düzenlere olanak tanıyan bir ViewGroup'dır. İç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 alanları 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 content lambdası, içerik köküne uygulanması gereken PaddingValues örneğini de alır. Modifier.padding kullanarak aynı PaddingValues öğesini HorizontalPager öğesine uygulayabilirsiniz.

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

  4. Daha fazla ekran öğesi eklemek ve kalan alt görünümleri taşımak için Scaffold tarafından sağlanan diğer içerik alanlarını kullanı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ılabilir ilişkili View'da (ör. RecyclerView veya NestedScrollView) XML'de Behavior ile layout_behavior arasında bir değer belirterek araç çubuğunun kaydırdıkça nasıl daralacağını/genişleyeceğini bildirebilirsiniz.

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. İskele, kaydırılabilir içerik yukarı/aşağı kaydırıldığında iç içe kaydırma etkinliklerini alabilmesi için NestedScrollConnection öğesini Scaffold üzerinde Modifier.nestedScroll aracılığıyla bağlayın. 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 exitUntilCollapsedScrollBehavior gibi başka TopAppBarScrollBehavior da sunar. Bu, 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, Snackbar öğesini görüntülemek için SnackbarHost composable öğesini kabul edebilen bir snackbarHost yuvası sağlar.

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 öğesini Compose'a taşıma hakkında daha fazla bilgi için aşağıdaki kaynaklara bakın: