CoordinatorLayout'u Compose'a Taşı

CoordinatorLayout, karmaşık, üst üste binen ve iç içe yerleştirilmiş düzenlere olanak tanıyan bir ViewGroup'dir. İçerdiği görünümler için araç çubuklarını ve alt sayfaları genişletme/daraltma gibi belirli Materyal Tasarım etkileşimlerini etkinleştirmek amacıyla kapsayıcı olarak kullanılır.

Compose'da CoordinatorLayout için en yakın karşılık Scaffold'dir. Scaffold, Material bileşenlerini yaygın ekran kalıpları ve etkileşimlerle 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 öğesini Scaffold hizmetine 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 barındırır. Kullanıcı arayüzü hiyerarşinizden CoordinatorLayout ve alt öğelerini açıklama satırı yapın ve yerine ComposeView ekleyin.

    ```xml 

    <!-- AppBarLayout contents here -->

    ```

  2. Fragment veya Activity'nizde, yeni eklediğiniz ComposeView için bir referans alın ve bu referansta setContent yöntemini çağırın. Yöntemin gövdesinde, içerik olarak bir Scaffold ayarlayın:

    composeView.setContent {
    Scaffold(Modifier.fillMaxSize()) { contentPadding ->
        // Scaffold contents
        // ...
    }
}

  3. Scaffold içeriğinizde 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 kullanacağız. Scaffold öğesinin content lambda'sı, içerik köküne uygulanması gereken bir PaddingValues örneği de alır. HorizontalPager için aynı PaddingValues değerini uygulamak üzere Modifier.padding kullanabilirsiniz.

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

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

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, kaydırdığınızda araç çubuğunun nasıl daralacağını/genişleyeceğ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.

Compose'da TopAppBarScrollBehavior ile benzer bir etki elde edebilirsiniz. Örneğin, yukarı kaydırdığınızda araç çubuğunun görünmesi için daralan/genişleyen bir araç çubuğu uygulamak istiyorsanız aşağıdaki adımları uygulayın:

  1. TopAppBarScrollBehavior oluşturmak için TopAppBarDefaults.enterAlwaysScrollBehavior() yöntemini çağırın.
  2. Oluşturulan TopAppBarScrollBehavior değerini TopAppBar öğesine sağlayın.

  3. Scaffold üzerindeki Modifier.nestedScroll aracılığıyla NestedScrollConnection'ı bağlayın. Böylece Scaffold, kaydırılabilir içerik yukarı/aşağı kaydırıldığında iç içe yerleştirilmiş kaydırma etkinliklerini alabilir. Bu sayede, içerik kaydırıldığında 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 */
    // ...
}

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 tamamen aşağı kaydırıldığında uygulama çubuğunu genişleten exitUntilCollapsedScrollBehavior gibi başka TopAppBarScrollBehavior da sağlar.

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 yerleştirilmiş kaydırma örneğine bakın.

Çekmeceler

Görünümler'de, kök görünüm olarak DrawerLayout kullanarak gezinme çekmecesi uygularsınız. CoordinatorLayout ise DrawerLayout görünümünün 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.

Compose'da, ModalNavigationDrawer composable'ını kullanarak gezinme çekmecesi uygulayabilirsiniz. ModalNavigationDrawer, çekmece için drawerContent yuvası ve ekranın 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.

Snack barlar

Scaffold, Snackbar göstermek için SnackbarHost composable'ını kabul edebilen bir snackbarHost slotu 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
    // ...
}

Daha fazla bilgi için Snackbars (Snackbar'lar) 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 göz atın: