Uygulamanızın kullanıma sunulmasını sağlayın

Katlanmamış büyük ekranlar ve benzersiz katlanmış durumlar, katlanabilir cihazlarda yeni kullanıcı deneyimlerine olanak tanır. Uygulamanızın Jetpack Compose'da katlanabilir cihazlara uygun olması için Compose Material 3 Adaptive kitaplığını kullanın. Bu kitaplık, katlanabilir cihazların pencere özellikleriyle (ör. katlanma yerleri, menteşeler ve cihaz duruşları) ilgili API'ler sağlar. Uygulamanız katlanabilir cihazlara uygun olduğunda, önemli içerikleri katlanma veya menteşe alanına yerleştirmemek için düzenini uyarlayabilir ve katlanma ile menteşeleri doğal ayırıcılar olarak kullanabilir.

Bir cihazın masaüstü veya kitap duruşu gibi yapılandırmaları destekleyip desteklemediğini anlamak, farklı düzenleri destekleme veya belirli özellikler sunma konusundaki kararlara yön verebilir.

Pencere bilgileri

Jetpack Compose'da pencere katlama bilgilerini gözlemlemek için collectFoldingFeaturesAsState() composable işlevini kullanın. collectFoldingFeaturesAsState(), WindowInfoTracker'daki mevcut pencere katlama özelliklerini, FoldingFeature nesnelerinin listesini içeren bir Compose State'a toplar.

collectFoldingFeaturesAsState(), bir Compose State döndürdüğünden, cihazın katlanma durumu veya duruşu her değiştiğinde composable'larınız manuel yaşam döngüsü yönetimi ya da akış toplama gerektirmeden otomatik olarak yeniden oluşturulur:

@Composable
fun FoldAwareScreen() {
    val foldingFeatures by collectFoldingFeaturesAsState()

    // Access folding features for the current window.
    val foldFeature = foldingFeatures.firstOrNull()
    if (foldFeature != null) {
        // Adapt layout based on the fold feature.
    }
}

Katlanabilir ekranların özellikleri

FoldingFeature tarafından döndürülen FoldingFeature öğelerinin listesi (DisplayFeature alt türü), aşağıdaki özellikler de dahil olmak üzere katlanabilir ekranlar hakkında bilgi sağlar:collectFoldingFeaturesAsState()

  • state: Cihazın katlanmış durumu, FLAT veya HALF_OPENED

  • orientation: Katlama veya menteşenin yönü, HORIZONTAL veya VERTICAL

  • occlusionType: Katlama veya menteşe, ekranın bir kısmını gizliyor mu? NONE veya FULL

  • isSeparating: Katlama veya menteşe, iki mantıksal ekran alanı oluşturuyor mu? Doğru veya yanlış.

Ekran iki görüntüleme alanına ayrıldığından HALF_OPENED her zaman isSeparating olarak rapor veren katlanabilir bir cihaz. Ayrıca, uygulama her iki ekrana da yayıldığında çift ekranlı bir cihazda isSeparating her zaman doğrudur.

FoldingFeature bounds özelliği (DisplayFeature öğesinden devralınır), katlama veya menteşe gibi katlanabilir bir özelliğin sınırlayıcı dikdörtgenini temsil eder. Sınırlar, ekrandaki öğeleri özelliğe göre konumlandırmak için kullanılabilir:

@Composable
fun FoldFeatureDemo() {
    val foldingFeatures by collectFoldingFeaturesAsState()
    val foldFeature = foldingFeatures.firstOrNull()

    if (foldFeature != null) {
        val isSeparating = foldFeature.isSeparating
        val occlusionType = foldFeature.occlusionType
        val bounds = foldFeature.bounds
        // Use bounds and properties to position content.
    }
}

Masaüstü duruşu

Uygulamanız, FoldingFeature nesnesinde yer alan bilgileri kullanarak telefonu bir yüzeye yerleştirme, menteşeyi yatay konuma getirme ve katlanabilir ekranı yarıya kadar açma gibi duruşları destekleyebilir.

Masaüstü duruşu, kullanıcıların telefonlarını ellerinde tutmadan kullanabilmelerini sağlar. Masa üstü duruşu, medya izlemek, fotoğraf çekmek ve görüntülü görüşme yapmak için idealdir.

Masaüstü duruşunda, ekranın dikey kısmında video oynatma ve yatay kısmında oynatma kontrolleri bulunan bir video oynatıcı uygulaması.
Şekil 1. Masaüstü duruşunda bir video oynatıcı uygulaması: Ekranın dikey kısmında video, yatay kısmında oynatma kontrolleri.

Cihazın masaüstü duruşunda olup olmadığını belirlemek için collectFoldingFeaturesAsState() konumundan FoldingFeature.State ve FoldingFeature.Orientation değerlerini kullanın:

@Composable
fun TabletopContent() {
    val foldingFeatures by collectFoldingFeaturesAsState()
    val foldFeature = foldingFeatures.firstOrNull()

    val isTableTopPosture = foldFeature != null &&
        foldFeature.state == FoldingFeature.State.HALF_OPENED &&
        foldFeature.orientation == FoldingFeature.Orientation.HORIZONTAL

    if (isTableTopPosture) {
        // Tabletop layout: separate content and controls across the fold.
    } else {
        // Standard layout.
    }
}

Alternatif olarak, pencerenin masaüstü duruşunda olup olmadığını currentWindowAdaptiveInfoV2() tarafından döndürülen Posture özelliğini kontrol ederek belirleyebilirsiniz:

val adaptiveInfo = currentWindowAdaptiveInfoV2()
val isTabletop = adaptiveInfo.windowPosture.isTabletop

Cihazın masaüstü duruşunda olduğunu öğrendikten sonra uygulama düzeninizi buna göre güncelleyin. Medya uygulamalarında bu genellikle oynatmanın katlanma çizgisinin üzerinde yerleştirilmesi ve kontroller ile ek içeriklerin, eller serbest görüntüleme veya dinleme deneyimi için hemen ardından konumlandırılması anlamına gelir.

Örnekler

Kitap duruşu

Bir diğer benzersiz katlanabilir özellik ise cihazın yarıya kadar açıldığı ve menteşenin dikey olduğu kitap duruşudur. Kitap duruşu, e-kitap okumak için idealdir. Büyük ekranlı, katlanabilir ve ciltli kitap gibi açılan cihazlarda iki sayfalık düzenle kitap duruşu, gerçek kitap okuma deneyimini yakalar.

Ellerinizi kullanmadan fotoğraf çekerken farklı bir en-boy oranı kullanmak istiyorsanız fotoğrafçılık için de kullanılabilir.

Kitap duruşunu, masaüstü duruşu için kullanılan tekniklerle aynı şekilde uygulayın. Katlama özelliğinin yönünün yatay değil dikey olduğundan emin olun:

@Composable
fun BookContent() {
    val foldingFeatures by collectFoldingFeaturesAsState()
    val foldFeature = foldingFeatures.firstOrNull()

    val isBookPosture = foldFeature != null &&
        foldFeature.state == FoldingFeature.State.HALF_OPENED &&
        foldFeature.orientation == FoldingFeature.Orientation.VERTICAL

    if (isBookPosture) {
        // Book posture layout: two-page layout across the vertical fold.
    } else {
        // Standard single-page layout.
    }
}

Pencere boyutu değişiklikleri

Bir uygulamanın görüntüleme alanı, cihaz yapılandırmasında yapılan değişiklikler sonucunda değişebilir. Örneğin, cihaz katlandığında veya açıldığında, döndürüldüğünde ya da çoklu pencere modunda yeniden boyutlandırıldığında bu durum yaşanabilir.

Mevcut pencere boyutu sınıfını almak ve Jetpack Compose'daki boyut değişikliklerine uyum sağlamak için Compose Material 3 Adaptive kitaplığındaki currentWindowAdaptiveInfoV2() composable işlevini kullanın. currentWindowAdaptiveInfoV2() Mevcut pencerenin WindowAdaptiveInfo örneğini döndürür (varsayılan olarak büyük ve çok büyük kesme noktaları desteklenir). Ayrıca cihazın WindowSizeClass değerini de döndürür: windowPosture:

@Composable
fun AdaptiveApp() {
    val adaptiveInfo = currentWindowAdaptiveInfoV2()
    val windowSizeClass = adaptiveInfo.windowSizeClass

    when {
        windowSizeClass.isWidthAtLeastBreakpoint(
            WIDTH_DP_EXPANDED_LOWER_BOUND
        ) -> {
            // Expanded layout
        }
        windowSizeClass.isWidthAtLeastBreakpoint(
            WIDTH_DP_MEDIUM_LOWER_BOUND
        ) -> {
            // Medium layout
        }
        else -> {
            // Compact layout
        }
    }
}

Pencere boyutu sınıflarını kullanma başlıklı makaleyi inceleyin.

Ek kaynaklar

Katlanabilir cihazlar ve katlanmaya duyarlı düzenler hakkında daha fazla bilgi edinmek için aşağıdaki kaynaklara göz atın:

Örnekler

  • Jetpack WindowManager örneği: Jetpack WindowManager kitaplığının nasıl kullanılacağına dair örnek
  • Jetcaster : Compose ile masaüstü duruşu uygulama

Codelab uygulamaları

Önceki
Katlanabilir öğeler hakkında bilgi edinin
Sonraki
Katlanabilir ekran modlarını destekleme