Liste ayrıntısı düzeni oluşturma

Liste-ayrıntı düzeni, bir bölmede öğe listesinin, diğer bölmede ise listeden seçilen öğelerin ayrıntılarının gösterildiği çift bölmeli bir düzenden oluşan kullanıcı arayüzü kalıbıdır.

Bu kalıp, özellikle büyük koleksiyonların öğeleri hakkında ayrıntılı bilgi sağlayan uygulamalar için kullanışlıdır. Örneğin, e-posta listesi ve her e-posta iletisinin ayrıntılı içeriğini içeren bir e-posta istemcisi. Liste-ayrıntı düzeni, uygulama tercihlerini her kategorinin tercihlerinin ayrıntı bölmesinde bulunduğu bir kategori listesine bölme gibi daha az kritik yollar için de kullanılabilir.

Liste sayfasının yanında gösterilen bir ayrıntılar bölmesi.
Şekil 1. Yeterli ekran boyutu olduğunda ayrıntı bölmesi, liste bölmesiyle birlikte gösterilir.
Bir öğe seçildikten sonra ayrıntı bölmesi tüm ekranı kaplar.
Şekil 2. Ekran boyutu sınırlı olduğunda, ayrıntı bölmesi (bir öğe seçildiğinden) tüm alanı kaplar.

NavigableListDetailPaneScaffold ile Liste-Ayrıntı Düzenini Uygulama

NavigableListDetailPaneScaffold, Jetpack Compose'da liste-ayrıntı düzeninin uygulanmasını kolaylaştıran bir composable'dır. ListDetailPaneScaffold öğesini sarmalar ve yerleşik gezinme ile tahmin edilen geri gitme animasyonları ekler.

Liste-ayrıntı düzeni iskeleti en fazla üç bölmeyi destekler:

  1. Liste bölmesi: Bir öğe koleksiyonunu gösterir.
  2. Ayrıntı bölmesi: Seçilen bir öğenin ayrıntılarını gösterir.
  3. Ek bölme (isteğe bağlı): Gerekli olduğunda ek bağlam sağlar.

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

  • Büyük pencerelerde liste ve ayrıntı bölmeleri yan yana görünür.
  • Küçük pencerelerde aynı anda yalnızca bir bölme görünür ve kullanıcılar gezinirken bölmeler arasında geçiş yapılır.

Bağımlılıkları bildirme

NavigableListDetailPaneScaffold, Material 3 uyarlanabilir gezinme kitaplığının bir parçasıdır.

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

Kotlin

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

Groovy

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 seviyeli yapı taşları
  • adaptive-layout: ListDetailPaneScaffold ve SupportingPaneScaffold gibi uyarlanabilir düzenler
  • adaptive-navigation: Paneller içinde ve arasında gezinmeye yönelik composable'lar, NavigableListDetailPaneScaffold ve NavigableSupportingPaneScaffold gibi varsayılan olarak gezinmeyi destekleyen uyarlanabilir düzenler

Projenizin compose-material3-adaptive 1.1.0-beta1 veya sonraki bir sürümü içerdiğinden emin olun.

Tahmin edilen geri gitme hareketini etkinleştirme

Android 15 veya önceki sürümlerde tahmin edilen geri gitme animasyonlarını etkinleştirmek için tahmin edilen geri gitme hareketini desteklemeyi kabul etmeniz gerekir. Bu özelliği etkinleştirmek için AndroidManifest.xml dosyanızdaki <application> etiketine veya <activity> etiketlerine android:enableOnBackInvokedCallback="true" ekleyin. Daha fazla bilgi için Tahmin edilen geri gitme hareketini etkinleştirme başlıklı makaleyi inceleyin.

Uygulamanız Android 16'yı (API düzeyi 36) veya sonraki sürümleri hedeflediğinde tahmin edilen geri gitme özelliği varsayılan olarak etkinleştirilir.

Temel kullanım

NavigableListDetailPaneScaffold işaretlemesini aşağıdaki şekilde uygulayın:

  1. Seçilen içeriği temsil eden bir sınıf kullanın. Seçilen liste öğesinin kaydedilmesini ve geri yüklenmesini desteklemek için Parcelable sınıfını kullanın. Kodu sizin için oluşturmak üzere kotlin-parcelize eklentisini kullanın.
  2. rememberListDetailPaneScaffoldNavigator ile ThreePaneScaffoldNavigator oluşturun.

Bu gezgin, liste, ayrıntı ve ek paneller arasında geçiş yapmak için kullanılır. Genel bir tür bildirilerek gezinme aracı, iskelenin durumunu (yani hangi MyItem öğesinin görüntülendiğini) da izler. Bu tür paketlenebilir olduğundan, yapılandırma değişikliklerinin otomatik olarak işlenmesi için durum, gezinme aracı tarafından kaydedilip geri yüklenebilir.

  1. Gezgini NavigableListDetailPaneScaffold composable'ına iletin.

  2. Liste bölmesi uygulamanızı NavigableListDetailPaneScaffold öğesine sağlayın. Gezinme sırasında varsayılan bölme animasyonlarını uygulamak için AnimatedPane kodunu kullanın. Ardından, ayrıntılar bölmesine gitmek için ThreePaneScaffoldNavigator tuşunu kullanın, ListDetailPaneScaffoldRole.Detail tuşuna basın ve iletilen öğeyi görüntüleyin.

  3. Ayrıntı bölmesi uygulamanızı NavigableListDetailPaneScaffold'ya ekleyin.

Gezinme tamamlandığında currentDestination, uygulamanızın gezindiği bölmeyi (bölmede gösterilen içerik de dahil) içerir. contentKey özelliği, orijinal çağrıda belirtilen türle aynıdır. Bu nedenle, göstermeniz gereken tüm verilere erişebilirsiniz.

  1. İsteğe bağlı olarak, defaultBackBehavior simgesini NavigableListDetailPaneScaffold olarak değiştirin. Varsayılan olarak, NavigableListDetailPaneScaffold, defaultBackBehavior için PopUntilScaffoldValueChange kullanır.

Uygulamanız farklı bir geri gezinme kalıbı gerektiriyorsa başka bir BackNavigationBehavior seçeneği belirterek bu davranışı geçersiz kılabilirsiniz.

BackNavigationBehavior seçeneği

Aşağıdaki bölümde, bir bölmede e-posta listesi, diğer bölmede ise ayrıntılı görünüm bulunan bir e-posta uygulaması örneği kullanılmaktadır.

Bu davranış, genel düzen yapısındaki değişikliklere odaklanır. Çok panelli bir kurulumda, ayrıntılı bölmedeki e-posta içeriğinin değiştirilmesi temel düzen yapısını değiştirmez. Bu nedenle, geri düğmesi uygulamadan veya mevcut gezinme grafiğinden çıkabilir. Bunun nedeni, mevcut bağlamda geri dönülecek bir düzen değişikliği olmamasıdır. Tek bölmeli düzende, geri düğmesine basıldığında ayrıntı görünümündeki içerik değişiklikleri atlanarak liste görünümüne dönülür. Bu, net bir düzen değişikliğini temsil eder.

Aşağıdaki örnekleri inceleyin:

  • Çok Panelli: Ayrıntı bölmesinde bir e-postayı (Öğe 1) görüntülüyorsunuz. Başka bir e-postayı (Öğe 2) tıkladığınızda ayrıntı bölmesi güncellenir ancak liste ve ayrıntı bölmeleri görünür kalır. Geri tuşuna basıldığında uygulamadan veya mevcut gezinme akışından çıkılabilir.
  • Tek Bölmeli: 1. öğeyi, ardından 2. öğeyi görüntülersiniz. Geri düğmesine bastığınızda doğrudan e-posta listesi bölmesine dönersiniz.

Kullanıcıların her geri gitme işleminde farklı düzen geçişleri algılamasını istediğinizde bu yöntemi kullanın.

Gezinme değeri değişikliği.
PopUntilContentChange

Bu davranış, görüntülenen içeriğe öncelik verir. 1. Öğeyi ve ardından 2. Öğeyi görüntülerseniz düzenden bağımsız olarak geri düğmesine bastığınızda 1. Öğeye geri dönersiniz.

Aşağıdaki örnekleri inceleyin:

  • Çoklu Bölme: Ayrıntı bölmesinde 1. Öğeyi görüntüleyip listede 2. Öğeyi tıklarsınız. Ayrıntılar bölmesi güncellenir. Geri düğmesine basıldığında ayrıntı bölmesi 1. Öğeye geri yüklenir.
  • Tek bölmeli: Aynı içerik geri döndürme işlemi gerçekleşir.

Kullanıcınız, geri işlemiyle daha önce görüntülenen içeriğe dönmeyi beklediğinde bu yöntemi kullanın.

iki ayrıntı bölmesi arasındaki geçiş
PopUntilCurrentDestinationChange

Bu davranış, mevcut gezinme hedefi değişene kadar eski yığını çıkarır. Bu durum, tek ve çok panelli düzenler için eşit şekilde geçerlidir.

Aşağıdaki örnekleri inceleyin:

Tek veya çok panelli düzende olmanızdan bağımsız olarak, geri tuşuna bastığınızda odak her zaman vurgulanan gezinme öğesinden önceki hedefe taşınır. E-posta uygulamamızda bu, seçilen bölmenin görsel göstergesinin değişeceği anlamına gelir.

Mevcut gezinmeyle ilgili net bir görsel göstergeyi korumanın kullanıcı deneyimi açısından çok önemli olduğu durumlarda bu yöntemi kullanın.

Ayrıntı ve liste bölmeleri arasında gezinme
PopLatest

Bu seçenek, yalnızca en son hedefi geri yığından kaldırır. Ara durumları atlamadan geri gitmek için bu seçeneği kullanın.

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

NavigableListDetailPaneScaffold(
    navigator = navigator,
    listPane = {
        AnimatedPane {
            ListContent(
                words = sampleWords,
                selectionState = navigator.currentDestination?.contentKey?.let {
                    SelectionVisibilityState.ShowSelection(it)
                } ?: SelectionVisibilityState.NoSelection,
                onWordClick = { word ->
                    scope.launch {
                        navigator.navigateTo(ListDetailPaneScaffoldRole.Detail, word)
                    }
                },
                animatedVisibilityScope = this@AnimatedPane,
                sharedTransitionScope = this@SharedTransitionLayout
            )
        }
    },
    detailPane = {
        AnimatedPane {
            DetailContent(
                definedWord = navigator.currentDestination?.contentKey,
                animatedVisibilityScope = this@AnimatedPane,
                sharedTransitionScope = this@SharedTransitionLayout,
                onClosePane = {
                    scope.launch {
                        navigator.navigateBack(
                            backNavigationBehavior = BackNavigationBehavior.PopUntilScaffoldValueChange
                        )

                    }
                }
            )
        }
    }
ListDetailSample.kt

Önceki
Uyarlanabilir gezinme oluşturma
Sonraki
Destekleyici bölme düzeni oluşturma