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 alanları 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 uygulamasını Scaffold uygulamasına taşımak için şu 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ı yapın ve bunları değiştirmek için bir ComposeView ekleyin.

    ```xml 

    <!-- AppBarLayout contents here -->

    ```

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

  3. Scaffold içeriğinde ekranınızın birincil içeriğini ekleyin. Yukarıdaki XML'deki birincil içerik ViewPager2 olduğu için bunun Compose'daki karşılığı olan HorizontalPager öğesini kullanacağız. Scaffold content lambdası, içerik köküne uygulanması gereken PaddingValues örneğini de alır. Modifier.padding 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 */ }
    }
}

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

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 araç çubuğunun kapsayıcısı olarak AppBarLayout kullanırsınız. Ardından, araç çubuğunun kaydırma sırasında nasıl daraltılacağını/genişletileceğini tanımlamak için ilişkili kaydırılabilir View'da (ör. RecyclerView veya NestedScrollView) XML'de layout_behavior aracılığıyla bir Behavior belirtebilirsiniz.

Oluşturma bölümünde, TopAppBarScrollBehavior kullanarak 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() oluşturmak için TopAppBarScrollBehavior numaralı telefonu arayın.
  2. Oluşturulan TopAppBarScrollBehavior öğesini TopAppBar öğesine verin.

  3. NestedScrollConnection öğesini Scaffold üzerindeki 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 */
    // ...
}

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 exitUntilCollapsedScrollBehavior gibi başka TopAppBarScrollBehavior da sunar. Bu özellik, yalnızca içerik tamamen aşağı kaydırıldığında uygulama çubuğunu genişletir.

Tamamen özel bir efekt (ör. 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 kaydırma örneğine bakın.

Çekmeceler

Görünümler ile kök görünüm olarak DrawerLayout kullanarak 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'ı kullanarak 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
        // ...
    }
}

Daha fazla bilgi için Çekmeceler bölümünü inceleyin.

Snackbar'lar

Scaffold, snackbarHost alanı sağlar. Bu alan, SnackbarHost Snackbar göstermek için birleştirilebilir bir öğeyi 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
    // ...
}

Daha fazla bilgi için Snackbars (Snack çubukları) bölümüne bakın.

Daha fazla bilgi

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