Çoğu uygulamada, uygulamanın birincil gezinme kullanıcı arayüzünden erişilebilen birkaç üst düzey hedef bulunur. Standart telefon ekranı gibi kompakt pencerelerde, hedefler genellikle pencerenin alt kısmındaki bir gezinme çubuğunda görüntülenir. Tam ekran uygulama gibi genişletilmiş bir pencerede, uygulamanın yanındaki gezinme çubuğu genellikle daha iyi bir seçenektir. Çünkü, cihazın sol ve sağ tarafını basılı tutarken navigasyon kontrollerine daha kolay erişilebilir.
NavigationSuiteScaffold
, WindowSizeClass
'e göre composable uygun gezinme kullanıcı arayüzünü görüntüleyerek gezinme kullanıcı arayüzleri arasında geçişi kolaylaştırır. Bu, çalışma zamanı pencere boyutu değişiklikleri sırasında kullanıcı arayüzünün dinamik olarak değiştirilmesini de içerir. Varsayılan davranış, aşağıdaki kullanıcı arayüzü bileşenlerinden birini gösterir:
- Gezinme çubuğu: Genişlik veya yükseklik kompaktsa ya da cihaz masa üstünde duruyorsa
- Diğer her şey için gezinme yolu
Bağımlılık ekleme
NavigationSuiteScaffold
, Material3 uyarlanabilir gezinme paketi kitaplığının bir parçasıdır. Uygulamanızın veya modülünüzün build.gradle
dosyasında kitaplık için bir bağımlılık ekleyin:
Kotlin
implementation("androidx.compose.material3:material3-adaptive-navigation-suite")
Modern
implementation 'androidx.compose.material3:material3-adaptive-navigation-suite'
İskele oluşturun
NavigationSuiteScaffold
öğesinin iki ana bölümü, gezinme paketi öğeleri ve seçilen hedefe ilişkin içeriktir. Gezinme paketi öğelerini doğrudan bir composable içinde tanımlayabilirsiniz ancak bunların başka bir yerde (örneğin, bir numaralandırmada) tanımlanması yaygındır:
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 varış noktasını izlemeniz gerekir. Bunu rememberSaveable
kullanarak yapabilirsiniz:
var currentDestination by rememberSaveable { mutableStateOf(AppDestinations.HOME) }
Aşağıdaki örnekte, navigationSuiteItems
parametresi (NavigationSuiteScope
türü, bağımsız bir hedef için gezinme kullanıcı arayüzünü tanımlamak üzere item
işlevini kullanır.) Hedef kullanıcı arayüzü, gezinme çubukları, raylar ve çekmeceler boyunca kullanılır. Gezinme öğeleri oluşturmak için AppDestinations
öğesinin (bir önceki snippet'te tanımlanır) üzerinden döngüye alını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'sında hangi kullanıcı arayüzünün gösterileceğine karar vermek için currentDestination
değerini kullanın. Uygulamanızda gezinme kitaplığı kullanıyorsanız uygun hedefi görüntülemek için bu kitaplığı burada kullanın. Bir "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
, iskelenin kapladığı alanın tamamında (genellikle pencerenin tamamı) Surface
oluşturur. Buna ek olarak, iskele belirli bir gezinme kullanıcı arayüzünü (ör. NavigationBar
) çizer.
Hem yüzey hem de gezinme kullanıcı arayüzü, uygulamanızın temasında belirtilen değerleri kullanır ancak tema değerlerini geçersiz kılabilirsiniz.
containerColor
parametresi, yüzeyin rengini belirtir. Varsayılan renk, renk şemanızın arka plan rengidir. contentColor
parametresi, üzerinde bulunan içeriğin rengini belirtir. Varsayılan olarak, containerColor
için belirtilen rengin "on" rengi kullanılır. Örneğin, containerColor
background
rengini kullanıyorsa contentColor
, onBackground
rengini kullanır.
Renk sisteminin nasıl çalıştığı hakkında daha fazla ayrıntı için Oluşturma'da Materyal Tasarım 3 temasına bakın. Bu değerleri geçersiz kılarken uygulamanızın koyu ve açık ekran modlarını desteklemesi için temanızda tanımlanan değerleri kullanın:
NavigationSuiteScaffold( navigationSuiteItems = { /* ... */ }, containerColor = MaterialTheme.colorScheme.primary, contentColor = MaterialTheme.colorScheme.onPrimary, ) { // Content... }
Gezinme kullanıcı arayüzü, NavigationSuiteScaffold
yüzeyinin önüne çizilmiştir.
Kullanıcı arayüzü renklerinin varsayılan değerleri NavigationSuiteDefaults.colors()
tarafından sağlanır ancak bu değerleri de geçersiz kılabilirsiniz. Örneğin, gezinme çubuğu arka planının şeffaf olmasını ancak diğer değerlerin varsayılan değerler olmasını istiyorsanız navigationBarContainerColor
değerini geçersiz kılın:
NavigationSuiteScaffold( navigationSuiteItems = { /* ... */ }, navigationSuiteColors = NavigationSuiteDefaults.colors( navigationBarContainerColor = Color.Transparent, ) ) { // Content... }
Sonuç olarak, gezinme kullanıcı arayüzündeki her bir öğeyi özelleştirebilirsiniz. item
işlevini çağırırken NavigationSuiteItemColors
örneğini geçirebilirsiniz. Sınıf, gezinme çubuğu, gezinme çubuğu ve gezinme çekmecesindeki öğelerin renklerini belirtir. Diğer bir deyişle, her gezinme kullanıcı arayüzü türünde aynı renklere sahip olabilir veya
renkleri ihtiyaçlarınıza göre değiştirebilirsiniz. Tüm öğelerde aynı nesne örneğini kullanmak için renkleri NavigationSuiteScaffold
düzeyinde tanımlayın ve yalnızca değiştirmek istediklerinizi geçersiz kılmak için NavigationSuiteDefaults.itemColors()
işlevini çağırın:
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ştirme
NavigationSuiteScaffold
işlevinin varsayılan davranışı, gezinme kullanıcı arayüzünü pencere boyutu sınıflarına göre değiştirir. Ancak bu davranışı geçersiz kılmak isteyebilirsiniz. Örneğin, uygulamanız bir feed için tek ve büyük bir içerik bölmesi gösteriyorsa uygulama, genişletilmiş pencereler için kalıcı bir gezinme çekmecesi kullanabilir ancak kompakt ve orta pencere boyutu sınıflarında varsayılan davranışı kullanmaya devam edebilir:
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 kılavuzuna bakın:
Aşağıdaki androidx.compose.material3
kitaplık bileşenlerine bakın: