CoordinatorLayout
; karmaşık, üst üste binen veViewGroup
iç içe yerleştirilmiş düzenler. Belirli Materyal Tasarım'ı etkinleştirmek için bir kapsayıcı olarak kullanılır
Görüntülemeler için genişleyen/daraltılabilen araç çubukları ve alt sayfalar gibi etkileşimler
belirler.
Compose'da CoordinatorLayout
öğesinin en yakın eşdeğeri
Scaffold
Scaffold
, Materyalleri birleştirmek için içerik alanları sağlar
Ortak ekran kalıplarına ve etkileşimlere ait bileşenler. Bu sayfada,
Scaffold
kullanmak için CoordinatorLayout
uygulamanızı taşıyabilirsiniz
Oluştur'u tıklayın.
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. Yorum yapmaCoordinatorLayout
ve alt öğelerini kullanıcı arayüzü hiyerarşinizden çıkarıp bir Bunun yerineComposeView
.<!-- <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" />
Parça veya Etkinliğinizde, kullandığınız
ComposeView
ile ilgili referans alınsetContent
yöntemini ekleyin ve ç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 temel içerik birViewPager2
olduğundan,HorizontalPager
(E-posta Yazma eşdeğeri).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ünüm sisteminde araç çubuğunu CoordinatorLayout
ile daraltmak ve genişletmek için
araç çubuğu için kapsayıcı olarak bir AppBarLayout
kullanın. Daha sonra
İlişkili kaydırılabilir öğede XML'de Behavior
ile layout_behavior
arasında
Araç çubuğununRecyclerView
NestedScrollView
siz kaydırdıkça daralır/genişler.
Oluşturma işleminde
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:
- Oluşturmak için
TopAppBarDefaults.enterAlwaysScrollBehavior()
numaralı telefonu arayınTopAppBarScrollBehavior
. - Oluşturulan
TopAppBarScrollBehavior
öğesiniTopAppBar
ile paylaşın. Şu bağlantıdan
Modifier.nestedScroll
üzerindenNestedScrollConnection
'e bağlanın:Scaffold
; böylece İskele, iç içe yerleştirilmiş kaydırma etkinliklerini Kaydırılabilir içerik yukarı/aşağı kaydırılır. 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şleme kaydırma efektini özelleştirme
enterAlwaysScrollBehavior
için birkaç parametre sağlayabilirsiniz.
daraltma/genişleme animasyon efektini özelleştirin. TopAppBarDefaults
adlı kullanıcı da
gibi diğer TopAppBarScrollBehavior
exitUntilCollapsedScrollBehavior
,
içerik en alta kaydırılır.
Tamamen özel bir efekt (örneğin, paralaks efekti) oluşturmak için şunları yapabilirsiniz:
kendi NestedScrollConnection
oluşturabilir ve araç çubuğunu manuel olarak
içerik kaydırılır. AOSP'de iç içe yerleştirilmiş kaydırma örneğini
kod örneğidir.
Çekmeceler
Görünümler'de gezinme çekmecesi aşağıdakileri yapmak için kullanılır:
Kök görünüm olarak DrawerLayout
. Bu durumda CoordinatorLayout
metriğiniz
DrawerLayout
için alt öğe görünümü. DrawerLayout
, başka bir alt öğe de içeriyor
NavigationView
gibi bir dizi görünüm kullanarak
çekmecesi.
Compose'da gezinme çekmecesi uygulamak için
ModalNavigationDrawer
composable. 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)) Divider() NavigationDrawerItem( label = { Text(text = "Drawer Item") }, selected = false, onClick = { /*TODO*/ } ) // ...other drawer items } } ) { Scaffold(Modifier.fillMaxSize()) { contentPadding -> // Scaffold content // ... } }
Daha fazla bilgi edinmek için Çekmeceler başlıklı makaleye 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
öğesini Compose'a taşıma hakkında daha fazla bilgi için
şu kaynakları inceleyin:
- 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
- Malzeme Bileşenleri ve düzenleri
- Compose'da pencere içleri
- Kaydırma