CoordinatorLayout'u Compose'a Taşı

CoordinatorLayout karmaşık, çakışan ve iç içe yerleştirilmiş düzenler sağlayan bir ViewGroup öğesidir. İçindeki Görünümler için genişletme/daraltma araç çubukları ve alt sayfalar gibi belirli Materyal Tasarım etkileşimlerini etkinleştirmek için bir kapsayıcı olarak kullanılır.

Compose'da CoordinatorLayout öğesinin en yakın eşdeğeri Scaffold şeklindedir. Scaffold, Malzeme Bileşenlerini ortak ekran kalıpları ve etkileşimlerde birleştirmek için içerik alanları sağlar. Bu sayfada, Compose'da Scaffold kullanmak için CoordinatorLayout uygulamanızı nasıl taşıyabileceğiniz açıklanmaktadır.

Taşıma adımları

CoordinatorLayout dosyasını Scaffold hizmetine taşımak için şu adımları uygulayın:

  1. Aşağıdaki snippet'te CoordinatorLayout, bir ToolBar, bir ViewPager ve bir FloatingActionButton içeren AppBarLayout öğesi içeriyor. Kullanıcı arayüzü hiyerarşinizdeki CoordinatorLayout ve alt öğelerini yorumlayın ve 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ça veya Etkinliğinizde, az önce eklediğiniz ComposeView için referans alın ve setContent yöntemini çağırın. Yöntemin gövdesinde Scaffold öğesini içerik olarak 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 buna ekleyin. Yukarıdaki XML'de yer alan birincil içerik ViewPager2 olduğundan, Compose'un eşdeğeri olan HorizontalPager öğesini kullanacağız. Scaffold öğesinin content lambdası da içerik köküne uygulanması gereken bir PaddingValues örneği alır. Aynı PaddingValues öğesini HorizontalPager öğesine uygulamak için Modifier.padding kullanabilirsiniz.

    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üntüleme sayısını taşımak için Scaffold tarafından sağlanan diğer içerik alanlarını kullanın. topBar alanını TopAppBar eklemek için, floatingActionButton alanını da FloatingActionButton eklemek için kullanabilirsiniz.

    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 daraltmak ve genişletmek için araç çubuğu için kapsayıcı olarak bir AppBarLayout kullanırsınız. Daha sonra, ilişkili kaydırılabilir Görünümde (RecyclerView veya NestedScrollView gibi) XML'de Behavior ile layout_behavior arasında bir değer belirterek araç çubuğunun siz kaydırdıkça nasıl daraldığını/genişlediğini belirtebilirsiniz.

E-posta Yazma'da, TopAppBarScrollBehavior aracılığıyla benzer bir efekt elde edebilirsiniz. Örneğin, yukarı kaydırdığınızda araç çubuğunun görünmesi amacıyla daraltılabilen/genişleyen bir araç çubuğu uygulamak için aşağıdaki adımları uygulayın:

  1. TopAppBarScrollBehavior oluşturmak için TopAppBarDefaults.enterAlwaysScrollBehavior() numaralı telefonu arayın.
  2. Oluşturulan TopAppBarScrollBehavior öğesini TopAppBar ile paylaşın.

  3. Kaydırılabilir içerik yukarı/aşağı kaydırılırken İskele'nin iç içe yerleştirilmiş kaydırma etkinliklerini alabilmesi için Scaffold üzerinde NestedScrollConnection aracını Modifier.nestedScroll aracılığıyla bağlayın. Böylece, içerik kaydırılırken içerilen uygulama çubuğu uygun şekilde daralabilir/genişleyebilir.

    // 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şleme kaydırma efektini özelleştirme

Daraltma/genişleyen animasyon efektini özelleştirmek için enterAlwaysScrollBehavior'e çeşitli parametreler sağlayabilirsiniz. TopAppBarDefaults, uygulama çubuğunu yalnızca içerik tamamen aşağı kaydırıldığında genişleten exitUntilCollapsedScrollBehavior gibi başka bir TopAppBarScrollBehavior de sunar.

Tamamen özel bir efekt (örneğin, 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 yerleştirilmiş kaydırma örneğine bakın.

Çekmeceler

Görünümler'de, kök görünüm olarak bir DrawerLayout kullanarak gezinme çekmecesi uygulayabilirsiniz. Bu durumda CoordinatorLayout, DrawerLayout öğesinin alt görünümüdür. DrawerLayout, çekmecede gezinme seçeneklerini görüntülemek için NavigationView gibi başka bir alt görünüm de içerir.

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

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

Daha fazla bilgi edinmek için Çekmeceler başlıklı makaleye bakın.

Snackbar'lar

Scaffold, Snackbar görüntülemek için SnackbarHost composable'ı kabul edebilen snackbarHost alanı 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 Snackbar'lar bölümüne bakın.

Daha fazla bilgi

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