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:
Aşağıdaki snippet'te
CoordinatorLayout
, şunun için birAppBarLayout
içerir: birToolBar
, birViewPager
ve birFloatingActionButton
içeren. Kullanıcı arayüzü hiyerarşinizdeCoordinatorLayout
ve alt öğelerini yorumla ve bunların yerine birComposeView
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" />
Fragment'inizde veya Etkinliğinizde, yeni eklediğiniz
ComposeView
öğesine referans alın ve bu öğedesetContent
yöntemini çağırın. Yöntemin gövdesinde, içeriği olarak birScaffold
ayarlayın:composeView.setContent { Scaffold(Modifier.fillMaxSize()) { contentPadding -> // Scaffold contents // ... } }
Scaffold
içeriğinde ekranınızın birincil içeriğini somut olarak ortaya koyar. Yukarıdaki XML'deki birincil içerik birViewPager2
olduğundan, bunun Compose eşdeğeri olan birHorizontalPager
kullanacağız.content
lambdaScaffold
öğesinin, olması gerekenPaddingValues
örneğini de alması uygulanır. Aynısını uygulamak içinModifier.padding
kullanabilirsinizHorizontalPager
-PaddingValues
.composeView.setContent { Scaffold(Modifier.fillMaxSize()) { contentPadding -> val pagerState = rememberPagerState { 10 } HorizontalPager( state = pagerState, modifier = Modifier.padding(contentPadding) ) { /* Page contents */ } } }
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 birTopAppBar
vefloatingActionButton
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 */ } } }
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:
TopAppBarScrollBehavior
oluşturmak içinTopAppBarDefaults.enterAlwaysScrollBehavior()
'ü arayın.- Oluşturulan
TopAppBarScrollBehavior
'üTopAppBar
'a sağlayın. 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
'dakiModifier.nestedScroll
aracılığıylaNestedScrollConnection
'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 */ // ... }
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 // ... } }
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 // ... }
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:
- Malzeme Bileşenleri ve düzenleri: Materyal Tasarım ile ilgili belgeler
desteklenen bileşenlerden oluşur (örneğin,
Scaffold
). - Sunflower'ı Jetpack Compose'a taşıma:
ayçiçeği örneğinin Görünümler'den Compose'a geçiş sürecini belgeler
(
CoordinatorLayout
içeren bir öğe).
Sizin için önerilenler
- Not: JavaScript kapalıyken bağlantı metni gösterilir
- Material bileşenleri ve düzenler
- Oluştur'daki pencere iç içe eklemeleri
- Kayan