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, MaterialComponents'i 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'ü Scaffold'a taşımak 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ş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ğinize ekranınızın birincil içeriğini ekleyin. Yukarıdaki XML'deki birincil içerik bir ViewPager2 olduğundan, bunun Compose eşdeğeri olan bir HorizontalPager kullanacağız. Scaffold işlevinin content lambdası, içerik köküne uygulanması gereken bir PaddingValues örneği de alır. Aynı PaddingValues'yi HorizontalPager'ye 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ünümleri taşımak için Scaffold tarafından sağlanan diğer içerik alanlarını kullanın. TopAppBar eklemek için topBar slotunu, FloatingActionButton sağlamak için de floatingActionButton slotunu 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 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 bölümünde, TopAppBarScrollBehavior kullanarak benzer bir etki elde edebilirsiniz. Örneğin, yukarı kaydırdığınızda görünecek şekilde daralan/genişleyen bir araç çubuğu uygulamak 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 Scaffold'un iç içe yerleştirilmiş kaydırma etkinlikleri alabilmesi için Scaffold'daki Modifier.nestedScroll aracılığıyla NestedScrollConnection'yi bağlayın. Bu sayede, içerik kaydırıldığında kapsayıcı uygulama çubuğu 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 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'inizi 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, çekmece için drawerContent ve ekranın içeriği için content yuvasına sahiptir.

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, Snackbar görüntülemek için SnackbarHost bir bileşeni kabul edebilecek 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 için Giriş çubuğu 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: