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 yuvaları 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 öğesinin content lambdası, içerik köküne uygulanması gereken PaddingValues öğesinin bir örneğini de alır. Modifier.padding simgesini kullanarak PaddingValues ile aynı HorizontalPager'yi uygulayabilirsiniz.

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

  4. Scaffold tarafından sağlanan diğer içerik alanlarını kullanarak daha fazla ekran öğesi ekleyin ve kalan alt görünümleri taşıyı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 layout_behavior aracılığıyla bir Behavior belirterek araç çubuğunun kaydırdıkça nasıl daralıp 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 dosyasını TopAppBar'ye gönderin.

  3. NestedScrollConnection öğesini Scaffold üzerinde Modifier.nestedScroll aracılığıyla bağlayın. Böylece, kaydırılabilir içerik yukarı/aşağı kaydırılırken Scaffold, iç içe kaydırma etkinliklerini alabilir. 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 TopAppBarScrollBehavior gibi başka TopAppBarScrollBehavior da sunar. exitUntilCollapsedScrollBehavior, 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 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, snackbarHost alanı sağlar. Bu alan, Snackbar öğesini göstermek için SnackbarHost composable'ı kabul edebilir.

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ünü inceleyin.

Daha fazla bilgi

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