Uyarlanabilir gezinme oluşturma

Ç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:

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

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

NavigationSuiteScaffold özelliğini kullanmak için mevcut varış noktasını izlemeniz gerekir. Bunu rememberSaveable kullanarak yapabilirsiniz:

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

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

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

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

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

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

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

Ek kaynaklar

Materyal Tasarım kılavuzuna bakın:

• Gezinme çubuğu
• Navigasyon treni
• Gezinme çekmecesi

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

• NavigationBar
• NavigationRail
• ModalNavigationDrawer
• PermanentNavigationDrawer