CoordinatorLayout'u Compose'a Taşı

CoordinatorLayout; karmaşık, üst üste binen veViewGroup iç içe yerleştirilmiş düzenler. Belirli Materyal Tasarım'ı etkinleştirmek için bir kapsayıcı olarak kullanılır Görüntülemeler için genişleyen/daraltılabilen araç çubukları ve alt sayfalar gibi etkileşimler belirler.

Compose'da CoordinatorLayout öğesinin en yakın eşdeğeri Scaffold Scaffold, Materyalleri birleştirmek için içerik alanları sağlar Ortak ekran kalıplarına ve etkileşimlere ait bileşenler. Bu sayfada, Scaffold kullanmak için CoordinatorLayout uygulamanızı taşıyabilirsiniz Oluştur'u tıklayın.

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, şunun için bir AppBarLayout içerir: bir ToolBar, bir ViewPager ve bir FloatingActionButton içeren. Yorum yapma CoordinatorLayout ve alt öğelerini kullanıcı arayüzü hiyerarşinizden çıkarıp bir Bunun yerine ComposeView.

   <!--  <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, kullandığınız ComposeView ile ilgili referans alın setContent yöntemini ekleyin ve ç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 somut olarak ortaya koyar. Yukarıdaki XML'deki temel içerik bir ViewPager2 olduğundan, HorizontalPager (E-posta Yazma eşdeğeri). content lambda Scaffold öğesinin, olması gereken PaddingValues örneğini de alması uygulanır. Aynısını uygulamak için Modifier.padding kullanabilirsiniz HorizontalPager - PaddingValues.

   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 için Scaffold tarafından sağlanan diğer içerik alanlarını kullanın kalan alt Görünümleri taşıyabilirsiniz. topBar aralığını kullanarak bir TopAppBar ve floatingActionButton zaman aralığı, 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

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ın. Daha sonra İlişkili kaydırılabilir öğede XML'de Behavior ile layout_behavior arasında Araç çubuğununRecyclerViewNestedScrollView siz kaydırdıkça daralır/genişler.

Oluşturma işleminde TopAppBarScrollBehavior. Örneğin, bir genişletme veya genişletme işlevini uygulamak için araç çubuğunu yukarı kaydırdığınızda araç çubuğunun görünmesi için aşağıdaki adımları uygulayın:

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

3. Şu bağlantıdan Modifier.nestedScroll üzerinden NestedScrollConnection'e bağlanın: Scaffold; böylece İskele, iç içe yerleştirilmiş kaydırma etkinliklerini Kaydırılabilir içerik yukarı/aşağı kaydırılır. Böylece, içerdiği uygulama çubuğu uygun şekilde daralmasını/genişletmesini sağlar.

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

ziyaret edin.

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

enterAlwaysScrollBehavior için birkaç parametre sağlayabilirsiniz. daraltma/genişleme animasyon efektini özelleştirin. TopAppBarDefaults adlı kullanıcı da gibi diğer TopAppBarScrollBehavior exitUntilCollapsedScrollBehavior, içerik en alta kaydırılır.

Tamamen özel bir efekt (örneğin, paralaks efekti) oluşturmak için şunları yapabilirsiniz: kendi NestedScrollConnection oluşturabilir ve araç çubuğunu manuel olarak içerik kaydırılır. AOSP'de iç içe yerleştirilmiş kaydırma örneğini kod örneğidir.

Çekmeceler

Görünümler'de gezinme çekmecesi aşağıdakileri yapmak için kullanılır: Kök görünüm olarak DrawerLayout. Bu durumda CoordinatorLayout metriğiniz DrawerLayout için alt öğe görünümü. DrawerLayout, başka bir alt öğe de içeriyor NavigationView gibi bir dizi görünüm kullanarak çekmecesi.

Compose'da gezinme çekmecesi uygulamak için ModalNavigationDrawer composable. ModalNavigationDrawer şunları sunar: Çekmece için drawerContent, ekran çekmecesi için content içerik.

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, SnackbarHost kabul edebilecek bir snackbarHost alanı sağlıyor composable'ı kullanarak bir Snackbar görüntüleyin.

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 için şu kaynakları inceleyin:

• Malzeme Bileşenleri ve düzenleri: Materyal Tasarım ile ilgili belgeler desteklenen bileşenlerden oluşur (örneğin, Scaffold).
• Sunflower'ı Jetpack Compose'a taşıma: ayçiçeği örneğinin Görünümler'den Compose'a geçiş sürecini belgeler (CoordinatorLayout içeren bir öğe).

ziyaret edin.

Sizin için önerilenler

• Not: JavaScript kapalıyken bağlantı metni gösterilir
• Malzeme Bileşenleri ve düzenleri
• Compose'da pencere içleri
• Kaydırma

ziyaret edin.