Uyarlanabilir gezinme oluşturma

Çoğu uygulamada, uygulamanın birincil gezinme kullanıcı arayüzü üzerinden erişilebilen birkaç üst düzey hedef bulunur. Standart telefon ekranı gibi kompakt pencerelerde hedefler genellikle pencerenin alt kısmındaki gezinme çubuğunda gösterilir. Tabletteki tam ekran uygulama gibi genişletilmiş bir pencerede, uygulamanın yanındaki gezinme sütunu genellikle daha iyi bir seçimdir. Çünkü cihazın sol ve sağ taraflarını tutarken gezinme kontrollerine ulaşmak daha kolaydır.

NavigationSuiteScaffold, WindowSizeClass değerine göre uygun gezinme kullanıcı arayüzü composable'ını göstererek gezinme kullanıcı arayüzleri arasında geçiş yapmayı kolaylaştırır. Çalışma zamanında pencere boyutu değiştiğinde kullanıcı arayüzünün dinamik olarak değiştirilmesi de buna dahildir. Varsayılan davranış, aşağıdaki kullanıcı arayüzü bileşenlerinden birini göstermektir:

  • Genişlik veya yükseklik kompakt ise ya da cihaz masaüstü duruşundaysa gezinme çubuğu
  • Diğer her şey için gezinme sütunu
Şekil 1. NavigationSuiteScaffold, kompakt pencerelerde bir gezinme çubuğu gösterir.
Şekil 2. NavigationSuiteScaffold, genişletilmiş pencerelerde bir gezinme çubuğu gösterir.

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ına 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şturma

NavigationSuiteScaffold uygulamasının iki ana bölümü, gezinme paketi öğeleri ve seçilen hedefin içeriğidir. Gezinme paketi öğelerini doğrudan bir composable'da tanımlayabilirsiniz ancak bunları başka bir yerde (ör. enum'da) tanımlamak 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 hedefi izlemeniz gerekir. Bunu yapmak için rememberSaveable özelliğini kullanabilirsiniz:

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

Aşağıdaki örnekte, navigationSuiteItems parametresi (NavigationSuiteScope türü), tek 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 çekmecelerde kullanılır. Gezinme öğeleri oluşturmak için AppDestinations (önceki snippet'te tanımlanmıştır) üzerinde döngü oluşturursunuz:

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 bir gezinme kitaplığı kullanıyorsanız uygun hedefi görüntülemek için bu kitaplığı burada kullanın. "when" 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ığı tüm alan (genellikle tüm pencere) üzerinde bir Surface oluşturur. Bunun yanı sıra iskele, NavigationBar gibi belirli gezinme kullanıcı arayüzünü de çizer. Hem yüzey hem de navigasyon 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, bu yüzeydeki içeriğin rengini belirtir. Varsayılan renk, containerColor için belirtilen rengin "açık" rengidir. Örneğin, containerColor background rengini kullanıyorsa contentColor onBackground rengini kullanır. Renk sisteminin işleyiş şekli hakkında daha fazla bilgi için Compose'da Materyal Tasarım 3 teması başlıklı makaleyi inceleyin. 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...
}

Navigasyon kullanıcı arayüzü, NavigationSuiteScaffold yüzeyinin önünde çizilir. 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ğunun 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 öğeyi özelleştirebilirsiniz. item işlevini çağırırken bir NavigationSuiteItemColors örneği iletebilirsiniz. Sınıf, gezinme çubuğu, gezinme rayı ve gezinme çekmecesindeki öğelerin renklerini belirtir. Bu, her gezinme kullanıcı arayüzü türünde aynı renkleri kullanabileceğiniz veya renkleri ihtiyaçlarınıza göre değiştirebileceğiniz anlamına gelir. Tüm öğeler için aynı nesne örneğini kullanmak üzere 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 öğesinin 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 bir büyük içerik bölmesi gösteriyorsa genişletilmiş pencereler için kalıcı bir gezinme çekmecesi kullanabilir ancak kompakt ve orta pencere boyutu sınıfları için varsayılan davranışa geri dönebilir:

val adaptiveInfo = currentWindowAdaptiveInfo()
val customNavSuiteType = with(adaptiveInfo) {
    if (windowSizeClass.isWidthAtLeastBreakpoint(WIDTH_DP_EXPANDED_LOWER_BOUND)) {
        NavigationSuiteType.NavigationDrawer
    } else {
        NavigationSuiteScaffoldDefaults.calculateFromAdaptiveInfo(adaptiveInfo)
    }
}

NavigationSuiteScaffold(
    navigationSuiteItems = { /* ... */ },
    layoutType = customNavSuiteType,
) {
    // Content...
}

Ek kaynaklar

Önceki
Destekleyici bölme düzeni oluşturma
Sonraki
Uygulama kullanılabilirliğini artırma