Çoğu uygulama, uygulamanın birincil gezinme arayüzü. Standart telefon gibi küçük pencerelerde hedefler genellikle ekranın üst kısmındaki gezinme çubuğunda görüntülenir. tıklayın. Genişletilmiş bir pencerede (ör. bir uygulamanın yanında gezinme çubuğu olması genellikle daha iyi bir seçimdir çünkü sol ve sağ taraf kullanılırken gezinme kontrollerine daha kolay erişilebilir ekleyebilirsiniz.
NavigationSuiteScaffold
, geçiş sürecini kolaylaştırır
composable uygun gezinme kullanıcı arayüzünü görüntüleyerek gezinme kullanıcı arayüzleri arasında
WindowSizeClass
bazında. Bu, dinamik olarak
çalışma zamanı pencere boyutu
değişiklikleri sırasında kullanıcı arayüzünü değiştirmek. Varsayılan davranış
aşağıdaki kullanıcı arayüzü bileşenlerinden birini gösterir:
- Genişlik veya yükseklik küçükse ya da cihaz cihazın içindeyse gezinme çubuğu masa üstü duruşu
- Diğer her şey için gezinme treni
![](https://developer.android.google.cn/static/develop/ui/compose/images/layouts/adaptive/navigationsuitescaffold_with_nav_bar.png?authuser=5&hl=tr)
NavigationSuiteScaffold
küçük pencerelerde bir gezinme çubuğu görüntüler.
![](https://developer.android.google.cn/static/develop/ui/compose/images/layouts/adaptive/navigationsuitescaffold_with_nav_rail.png?authuser=5&hl=tr)
NavigationSuiteScaffold
, genişletilmiş pencerelerde bir gezinme çubuğu gösterir.
Bağımlılıkları ekleme
NavigationSuiteScaffold
şunun parçasıdır:
Material3 uyarlanabilir gezinme paketi
kitaplığını tanıtır. Uygulamanızın build.gradle
dosyasındaki kitaplık için bir bağımlılık ekleyin.
veya modül:
Kotlin
implementation("androidx.compose.material3:material3-adaptive-navigation-suite")
Eski
implementation 'androidx.compose.material3:material3-adaptive-navigation-suite'
Yapı iskelesi oluşturma
NavigationSuiteScaffold
uygulamasının iki ana bölümü, gezinme paketi öğeleridir
ve seçilen hedefe yönelik içerik. Her bir ekip üyesinin
bir composable'daki gezinme paketi öğelerini içerir, ancak bunların
başka bir yerde, örneğin bir sıralamada:
enum class AppDestinations( @StringRes val label: Int, val icon: ImageVector, @StringRes val contentDescription: Int ) { HOME(R.string.home, Icons.Default.Home, R.string.home), FAVORITES(R.string.favorites, Icons.Default.Favorite, R.string.favorites), SHOPPING(R.string.shopping, Icons.Default.ShoppingCart, R.string.shopping), PROFILE(R.string.profile, Icons.Default.AccountBox, R.string.profile), }
NavigationSuiteScaffold
özelliğini kullanmak için mevcut hedefi takip etmeniz gerekir.
rememberSaveable
ile şunları yapabilirsiniz:
var currentDestination by rememberSaveable { mutableStateOf(AppDestinations.HOME) }
Aşağıdaki örnekte, navigationSuiteItems
parametresi (type
NavigationSuiteScope
, item
işlevini kullanır
kullanabilirsiniz. Hedef kullanıcı arayüzü:
gezinme çubukları, kılavuz çizgileri ve çekmecelerde kullanılır. Gezinme öğeleri oluşturmak için:
AppDestinations
üzerinden döngü (önceki snippet'te tanımlanır):
NavigationSuiteScaffold( navigationSuiteItems = { AppDestinations.entries.forEach { item( icon = { Icon( it.icon, contentDescription = stringResource(it.contentDescription) ) }, label = { Text(stringResource(it.label)) }, selected = it == currentDestination, onClick = { currentDestination = it } ) } } ) { // TODO: Destination content. }
Hedef içerik lambda içinde currentDestination
değerini kullanarak
hangi kullanıcı arayüzünün görüntüleneceğine
karar verir. Uygulamanızda gezinme kitaplığı kullanıyorsanız bu kitaplığı kullanın
uygun hedefi görüntüleyin. Ne zaman ifadesi yeterli olabilir?
NavigationSuiteScaffold( navigationSuiteItems = { /*...*/ } ) { // Destination content. when (currentDestination) { AppDestinations.HOME -> HomeDestination() AppDestinations.FAVORITES -> FavoritesDestination() AppDestinations.SHOPPING -> ShoppingDestination() AppDestinations.PROFILE -> ProfileDestination() } }
Renkleri değiştir
NavigationSuiteScaffold
, tüm alan üzerinde Surface
oluşturur
İskele, genellikle pencerenin tamamını kaplar. Üzerindeki yapı
NavigationBar
gibi belirli bir gezinme kullanıcı arayüzünü çizer.
Hem yüzey hem de gezinme kullanıcı arayüzü, uygulamanızın
tema değerlerini geçersiz kılabilirsiniz.
containerColor
parametresi, yüzeyin rengini belirtir. Varsayılan
renk şemanızın arka plan rengidir. contentColor
parametresi
bu yüzeydeki içeriğin rengini belirtir. Varsayılan ayar "on"dur renk
containerColor
için belirtilen değer ile aynı olmalıdır. Örneğin, containerColor
background
rengini, ardından contentColor
renk onBackground
rengini kullanır.
Compose'da Materyal Tasarım 3 teması oluşturma başlıklı makaleye bakın.
ziyaret edin. Bu değerleri geçersiz kılarken
Uygulamanızın koyu ve açık renkli ekranı desteklemesi için temanızda tanımlanan değerleri kullanın
modlar:
NavigationSuiteScaffold( navigationSuiteItems = { /* ... */ }, containerColor = MaterialTheme.colorScheme.primary, contentColor = MaterialTheme.colorScheme.onPrimary, ) { // Content... }
Gezinme kullanıcı arayüzü, NavigationSuiteScaffold
yüzeyinin önüne çizilir.
Kullanıcı arayüzü renklerinin varsayılan değerleri
NavigationSuiteDefaults.colors()
, ancak siz
bu değerleri de geçersiz kılabilir. Örneğin, bir arka planın
gezinme çubuğu şeffaf, diğer değerler ise varsayılan olacak.
navigationBarContainerColor
geçersiz kılma:
NavigationSuiteScaffold( navigationSuiteItems = { /* ... */ }, navigationSuiteColors = NavigationSuiteDefaults.colors( navigationBarContainerColor = Color.Transparent, ) ) { // Content... }
Sonuç olarak, gezinme kullanıcı arayüzündeki her bir öğeyi özelleştirebilirsiniz.
item
işlevi için herhangi bir
NavigationSuiteItemColors
. Sınıf,
gezinme çubuğu, gezinme çubuğu ve gezinme çubuğundaki öğelerin renkleri
çekmecesi. Bu, her gezinme arayüzü türünde aynı renklerin olabileceği anlamına gelir.
veya renkleri ihtiyaçlarınıza göre değiştirebilirsiniz. Renkleri tanımlamak için
Tüm öğelerde aynı nesne örneğini kullanmak için NavigationSuiteScaffold
düzeyi
ve NavigationSuiteDefaults.itemColors()
işlevini yalnızca geçersiz kılmak için
değiştirmek istedikleriniz:
val myNavigationSuiteItemColors = NavigationSuiteDefaults.itemColors( navigationBarItemColors = NavigationBarItemDefaults.colors( indicatorColor = MaterialTheme.colorScheme.primaryContainer, selectedIconColor = MaterialTheme.colorScheme.onPrimaryContainer ), ) NavigationSuiteScaffold( navigationSuiteItems = { AppDestinations.entries.forEach { item( icon = { Icon( it.icon, contentDescription = stringResource(it.contentDescription) ) }, label = { Text(stringResource(it.label)) }, selected = it == currentDestination, onClick = { currentDestination = it }, colors = myNavigationSuiteItemColors, ) } }, ) { // Content... }
Gezinme türlerini özelleştirin
Varsayılan NavigationSuiteScaffold
davranışı, gezinme kullanıcı arayüzünü değiştirir.
pencere boyutuna göre
sınıfları inceleyin. Ancak,
bu davranışı geçersiz kılmak isteyebilir. Örneğin, uygulamanızda
büyük bir içerik bölmesine sahip olması durumunda, uygulamada
çekmecesi vardır. Genişletilmiş pencerelerde ise bu çekmece
kompakt ve orta boy pencere sınıfları:
val adaptiveInfo = currentWindowAdaptiveInfo() val customNavSuiteType = with(adaptiveInfo) { if (windowSizeClass.windowWidthSizeClass == WindowWidthSizeClass.EXPANDED) { NavigationSuiteType.NavigationDrawer } else { NavigationSuiteScaffoldDefaults.calculateFromAdaptiveInfo(adaptiveInfo) } } NavigationSuiteScaffold( navigationSuiteItems = { /* ... */ }, layoutType = customNavSuiteType, ) { // Content... }
Ek kaynaklar
Materyal Tasarım rehberliğini inceleyin:
Aşağıdaki androidx.compose.material3
kitaplık bileşenine bakın: