Uyarlanabilir gezinme oluşturma

Ç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

ziyaret edin.

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:

implementation("androidx.compose.material3:material3-adaptive-navigation-suite")

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),
}
SampleNavigationSuiteScaffold.kt

NavigationSuiteScaffold özelliğini kullanmak için mevcut hedefi takip etmeniz gerekir. rememberSaveable ile şunları yapabilirsiniz:

var currentDestination by rememberSaveable { mutableStateOf(AppDestinations.HOME) }
SampleNavigationSuiteScaffold.kt

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.
}
SampleNavigationSuiteScaffold.kt

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()
    }
}
SampleNavigationSuiteScaffold.kt

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...
}
SampleNavigationSuiteScaffold.kt

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...
}
SampleNavigationSuiteScaffold.kt

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...
}
SampleNavigationSuiteScaffold.kt

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...
}
SampleNavigationSuiteScaffold.kt

Ek kaynaklar

Materyal Tasarım rehberliğini inceleyin:

• Gezinme çubuğu
• Gezinme çubuğu
• Gezinme çekmecesi

Aşağıdaki androidx.compose.material3 kitaplık bileşenine bakın:

• NavigationBar
• NavigationRail
• ModalNavigationDrawer
• PermanentNavigationDrawer