CoordinatorLayout'u Compose'a Taşı

CoordinatorLayout, karmaşık, örtüşen ve iç içe yerleştirilmiş düzenleri etkinleştiren bir ViewGroup'dir. İçinde bulunan Görseller için belirli Material Design etkileşimlerini (ör. araç çubuklarını ve alt sayfaları genişletme/daraltma) etkinleştirmek amacıyla bir kapsayıcı olarak kullanılır.

Oluşturma bölümünde, CoordinatorLayout'e en yakın eşdeğer Scaffold'dir. Scaffold, Material bileşenlerini ortak ekran kalıpları ve etkileşimleriyle birleştirmek için içerik yuvaları sağlar. Bu sayfada, CoordinatorLayout uygulamanızı Compose'da Scaffold kullanmak üzere nasıl taşıyacağınız 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, şunun için bir AppBarLayout içerir: bir ToolBar, bir ViewPager ve bir FloatingActionButton içeren. Kullanıcı arayüzü hiyerarşinizde CoordinatorLayout ve alt öğelerini yorumla ve bunların yerine bir ComposeView ekle.

    <!--  <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. Fragment'inizde veya Etkinliğinizde, yeni eklediğiniz ComposeView öğesine referans alın ve bu öğede 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 somut olarak ortaya koyar. Yukarıdaki XML'deki birincil içerik bir ViewPager2 olduğundan, bunun Compose eşdeğeri olan bir HorizontalPager kullanacağız. 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üntüleme sisteminde, araç çubuğunu CoordinatorLayout ile daraltmak ve genişletmek için araç çubuğu için bir AppBarLayout kullanırsınız. Ardından, kaydırırken araç çubuğunun nasıl daraltıldığını/genişletildiğini belirtmek için ilişkili kaydırılabilir görünümde (RecyclerView veya NestedScrollView gibi) XML'de layout_behavior aracılığıyla bir Behavior belirtebilirsiniz.

Oluşturma aracında, arkadaki 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. TopAppBarScrollBehavior oluşturmak için TopAppBarDefaults.enterAlwaysScrollBehavior()'ü arayın.
  2. Oluşturulan TopAppBarScrollBehavior'ü TopAppBar'a sağlayın.

  3. Kaydırılabilir içerik yukarı/aşağı kaydırıldığında iskeletin iç içe yerleştirilmiş kaydırma etkinlikleri alabilmesi için Scaffold'daki Modifier.nestedScroll aracılığıyla NestedScrollConnection'yi bağlayın. 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

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

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

Tamamen özel bir efekt (ör. paralaks efekti) oluşturmak için kendi NestedScrollConnection'nizi de oluşturabilir ve içerik kaydırıldığında 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 ile, kök görünüm olarak bir DrawerLayout kullanarak gezinme çekmecesi uygularsınız. CoordinatorLayout, DrawerLayout'un alt görünümüdür. DrawerLayout, çekmecedeki gezinme seçeneklerini görüntülemek için NavigationView gibi başka bir alt görünüm de içerir.

Oluşturma bölümünde, ModalNavigationDrawer bileşenini kullanarak bir gezinme çekmecesi uygulayabilirsiniz. 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))
            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üne 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'leri Oluştur'a taşıma hakkında daha fazla bilgi için aşağıdaki kaynaklara göz atın: