Destekleyici bölme düzeni oluşturma

Koleksiyonlar ile düzeninizi koruyun İçeriği tercihlerinize göre kaydedin ve kategorilere ayırın.

Destekleyici bölme düzeni, kullanıcının odağını uygulamanın ana içeriğinde tutarken alakalı destekleyici bilgileri gösterir. Örneğin, ana bölmede bir filmle ilgili ayrıntılar gösterilirken yardımcı bölmede benzer filmler, aynı yönetmenin filmleri veya aynı oyuncuların yer aldığı çalışmalar listelenir.

Daha fazla bilgi için 3. materyal destek paneli yönergelerine bakın.

NavigableSupportingPaneScaffold ile destekleyici bir bölme uygulama

NavigableSupportingPaneScaffold, Jetpack Compose'da destekleyici bir bölme düzenini uygulamayı basitleştiren bir bileşendir. SupportingPaneScaffold öğesini sarmalayarak yerleşik gezinme ve tahmine dayalı geri işleme ekler.

Destekleyici panel iskelesi en fazla üç paneli destekler:

• Ana bölme: Birincil içeriği gösterir.
• Destekleyici panel: Ana panelle ilgili ek bağlam veya araçlar sağlar.
• Ekstra bölme (isteğe bağlı): Gerekirse ek içerik için kullanılır.

İskele, pencere boyutuna göre uyarlanır:

• Büyük pencerelerde ana ve destekleyici paneller yan yana görünür.

• Küçük pencerelerde, kullanıcılar gezinirken tek bir bölme görünür.

  

Bağımlılıklar ekleme

NavigableSupportingPaneScaffold, Material 3 uyarlanabilir düzen kitaplığının bir parçasıdır.

Uygulamanızın veya modülünüzün build.gradle dosyasına aşağıdaki üç ilgili bağımlılığı ekleyin:

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

implementation 'androidx.compose.material3.adaptive:adaptive'
implementation 'androidx.compose.material3.adaptive:adaptive-layout'
implementation 'androidx.compose.material3.adaptive:adaptive-navigation'

• Uyarlanabilir: HingeInfo ve Posture gibi düşük düzey yapı taşları
• adaptive-layout: ListDetailPaneScaffold ve SupportingPaneScaffold gibi uyarlanabilir düzenler
• adaptive-navigation: Bölmelerde ve bölmeler arasında gezinmek için kullanılan bileşenler ve NavigableListDetailPaneScaffold ve NavigableSupportingPaneScaffold gibi varsayılan olarak gezinmeyi destekleyen uyarlanabilir düzenler

Projenizde compose-material3-adaptive 1.1.0-beta1 sürümü veya daha yeni bir sürüm bulunduğundan emin olun.

Tahmini geri gitme hareketini etkinleştirme

Android 15 veya önceki sürümlerde tahmine dayalı geri animasyonlarını etkinleştirmek için tahmine dayalı geri hareketini desteklemeyi etkinleştirmeniz gerekir. Özelliği etkinleştirmek için AndroidManifest.xml dosyanızdaki <application> etiketine android:enableOnBackInvokedCallback="true" veya <application> etiketine ya da ayrı <activity> etiketlerine android:enableOnBackInvokedCallback="true" ekleyin.

Uygulamanız Android 16 (API düzeyi 36) veya sonraki sürümleri hedeflediğinde tahmini geri düğmesi varsayılan olarak etkinleştirilir.

Gezinme paneli oluşturma

Küçük pencerelerde aynı anda yalnızca bir bölme gösterilir. Bölmelere gitmek ve bölmeler arasında geçiş yapmak için ThreePaneScaffoldNavigator simgesini kullanın. rememberSupportingPaneScaffoldNavigator ile gezgin örneği oluşturun.

val scaffoldNavigator = rememberSupportingPaneScaffoldNavigator()
val scope = rememberCoroutineScope()
SampleSupportingPaneScaffold.kt

Gezgin'i iskeleye iletin

İskele için ThreePaneScaffoldNavigator gerekir. Bu, iskelenin durumunu temsil eden bir arayüzdür. ThreePaneScaffoldValue ve PaneScaffoldDirective de gereklidir.

NavigableSupportingPaneScaffold(
    navigator = scaffoldNavigator,
    mainPane = { /*...*/ },
    supportingPane = { /*...*/ },
)
SampleSupportingPaneScaffold.kt

Ana bölme ve destekleyici bölme, içeriğinizi içeren birer bileşendir. Gezinme sırasında varsayılan bölme animasyonlarını uygulamak için AnimatedPane simgesini kullanın. Destekleyici bölmenin gizli olup olmadığını kontrol etmek için iskelet değerini kullanın. Gizliyse destekleyici bölmeyi görüntülemek için navigateTo(SupportingPaneScaffoldRole.Supporting) değerini çağıran bir düğme görüntüleyin.

İskeletin tam bir uygulaması aşağıda verilmiştir:

val scaffoldNavigator = rememberSupportingPaneScaffoldNavigator()
val scope = rememberCoroutineScope()

NavigableSupportingPaneScaffold(
    navigator = scaffoldNavigator,
    mainPane = {
        AnimatedPane(
            modifier = Modifier
                .safeContentPadding()
                .background(Color.Red)
        ) {
            if (scaffoldNavigator.scaffoldValue[SupportingPaneScaffoldRole.Supporting] == PaneAdaptedValue.Hidden) {
                Button(
                    modifier = Modifier
                        .wrapContentSize(),
                    onClick = {
                        scope.launch {
                            scaffoldNavigator.navigateTo(SupportingPaneScaffoldRole.Supporting)
                        }
                    }
                ) {
                    Text("Show supporting pane")
                }
            } else {
                Text("Supporting pane is shown")
            }
        }
    },
    supportingPane = {
        AnimatedPane(modifier = Modifier.safeContentPadding()) {
            Text("Supporting pane")
        }
    }
)
SampleSupportingPaneScaffold.kt

Bölmede birleştirilebilir öğeleri ayıklama

Yeniden kullanılabilir ve test edilebilir hale getirmek için SupportingPaneScaffold'ün ayrı panellerini kendi bileşenlerine ayırın. Varsayılan animasyonları kullanmak istiyorsanız AnimatedPane'e erişmek için ThreePaneScaffoldScope'u kullanın:

@OptIn(ExperimentalMaterial3AdaptiveApi::class)
@Composable
fun ThreePaneScaffoldPaneScope.MainPane(
    shouldShowSupportingPaneButton: Boolean,
    onNavigateToSupportingPane: () -> Unit,
    modifier: Modifier = Modifier,
) {
    AnimatedPane(
        modifier = modifier.safeContentPadding()
    ) {
        // Main pane content
        if (shouldShowSupportingPaneButton) {
            Button(onClick = onNavigateToSupportingPane) {
                Text("Show supporting pane")
            }
        } else {
            Text("Supporting pane is shown")
        }
    }
}

@OptIn(ExperimentalMaterial3AdaptiveApi::class)
@Composable
fun ThreePaneScaffoldPaneScope.SupportingPane(
    modifier: Modifier = Modifier,
) {
    AnimatedPane(modifier = modifier.safeContentPadding()) {
        // Supporting pane content
        Text("This is the supporting pane")
    }
}
SampleSupportingPaneScaffold.kt

Panelleri birleştirilebilir öğelere ayrıştırmak, SupportingPaneScaffold'ün kullanımını basitleştirir (aşağıdakileri önceki bölümdeki iskeletin tam uygulamasıyla karşılaştırın):

val scaffoldNavigator = rememberSupportingPaneScaffoldNavigator()
val scope = rememberCoroutineScope()

NavigableSupportingPaneScaffold(
    navigator = scaffoldNavigator,
    mainPane = {
        MainPane(
            shouldShowSupportingPaneButton = scaffoldNavigator.scaffoldValue.secondary == PaneAdaptedValue.Hidden,
            onNavigateToSupportingPane = {
                scope.launch {
                    scaffoldNavigator.navigateTo(ThreePaneScaffoldRole.Secondary)
                }
            }
        )
    },
    supportingPane = { SupportingPane() },
)
SampleSupportingPaneScaffold.kt

İskelenin belirli yönleri üzerinde daha fazla kontrole ihtiyacınız varsa NavigableSupportingPaneScaffold yerine SupportingPaneScaffold kullanmayı düşünebilirsiniz. Bu, PaneScaffoldDirective ve ThreePaneScaffoldValue veya ThreePaneScaffoldState öğelerini ayrı ayrı kabul eder. Bu esneklik, bölme aralığı için özel mantık uygulamanıza ve aynı anda kaç bölmenin gösterileceğini belirlemenize olanak tanır. ThreePaneScaffoldPredictiveBackHandler ekleyerek tahmini geri desteği de etkinleştirebilirsiniz.

ThreePaneScaffoldPredictiveBackHandler ekle

Bir iskelet gezgini örneği alan ve backBehavior değerini belirten tahmini geri işleyiciyi ekleyin. Bu, geri gezinme sırasında hedeflerin arka yığından nasıl pop-up olarak gösterileceğini belirler. Ardından scaffoldDirective ve scaffoldState öğelerini SupportingPaneScaffold öğesine iletin. ThreePaneScaffoldState kabul eden ve scaffoldNavigator.scaffoldState değerini gönderen aşırı yüklemeyi kullanın.

SupportingPaneScaffold içinde ana ve destekleyici bölmeleri tanımlayın. Varsayılan bölme animasyonları için AnimatedPane simgesini kullanın.

Bu adımları uyguladıktan sonra kodunuz aşağıdaki gibi görünmelidir:

val scaffoldNavigator = rememberSupportingPaneScaffoldNavigator()
val scope = rememberCoroutineScope()

ThreePaneScaffoldPredictiveBackHandler(
    navigator = scaffoldNavigator,
    backBehavior = BackNavigationBehavior.PopUntilScaffoldValueChange
)

SupportingPaneScaffold(
    directive = scaffoldNavigator.scaffoldDirective,
    scaffoldState = scaffoldNavigator.scaffoldState,
    mainPane = {
        MainPane(
            shouldShowSupportingPaneButton = scaffoldNavigator.scaffoldValue.secondary == PaneAdaptedValue.Hidden,
            onNavigateToSupportingPane = {
                scope.launch {
                    scaffoldNavigator.navigateTo(ThreePaneScaffoldRole.Secondary)
                }
            }
        )
    },
    supportingPane = { SupportingPane() },
)
SampleSupportingPaneScaffold.kt