Izgara ve mediaQuery ile masa üstü duruş düzeni

4 yıldız puan simgesi

Katlanabilir cihazlarda masaüstü duruşu, tek bir ekranı fiziksel katlama (veya menteşe) ile ayrılmış iki işlevsel görüntüleme alanına böler. Masaüstü duruşu, uygulamanızın ana içeriğini (ör. video oynatıcı veya oyun tuvali) üst yarıya yerleştirmenize, etkileşimli öğeleri (ör. medya kontrolleri veya kontrol panelleri) ise alt yarıya konumlandırmanıza olanak tanır.

Masaüstü duruşunda katlanabilir cihaz. Üst ekranda video içeriği, alt ekranda ise oynatma kontrolleri gösteriliyor.
Şekil 1. Masaüstü duruşunda içerik ve etkileşimli kontroller, fiziksel katlama boyunca bölünür.

En iyi uygulamalar

Uygulamanıza masaüstü desteği eklemek için Grid API'yi kullanarak iki satır ve bir sütun içeren bir düzen tanımlayın ve masaüstü pencere duruşu medya sorgusunu uygulayın.

  • Masa üstü duruşunu reaktif olarak algılama: Cihaz durumunu gözlemlemek için mediaQuery composable'ı kullanın. Cihazı masaüstü duruşuna (windowPosture == Posture.Tabletop) getirdiğinizde, etkinlikleri yeniden başlatmaya veya karmaşık yaşam döngüsü yönetimine gerek kalmadan düzeninizi dinamik olarak değiştirebilirsiniz.
  • Grid ile düzenleri yapılandırma: Masaüstü duruşundayken Grid API'sini (2 rows, 1 column) kullanarak birincil görsel içeriği katlanma çizgisinin üstündeki en üst satırda, etkileşimli kontrolleri ise katlanma çizgisinin altındaki en alt satırda net bir şekilde ayırın.
  • Yer paylaşımları için örtülü z dizininden yararlanma: Standart (masaüstü olmayan) durumlarda, oynatıcı üzerindeki kontrolleri yerleştirmek için aynı hücreye birden fazla alan kimliği atayın. Grid Öğeleri, bildirim sırasına göre otomatik olarak arkadan öne doğru oluşturur.
  • Sorunsuz geçişler sağlama: Standart tam ekran düzenleri ile masa üstü duruşu arasında geçiş yaparken durumun ve kaydırma konumlarının korunmasını sağlayın.

Malzemeler

  • Grid: Öğeleri yapılandırılabilir satır ve sütunlara yerleştirmenize olanak tanıyan uyarlanabilir bir düzen kapsayıcısıdır. İçeriği farklı ekran bölgelerine bölmek için idealdir.
  • mediaQuery: Uygulamanın mevcut pencere duruşunu, boyut sınıflarını ve donanım özelliklerini doğrudan composable'lerinizde sorgulamak için kullanılan bir Jetpack Compose API'sidir.

Adımlar

mediaQuery() kullanarak cihaz duruşunu sorgulayın. Cihaz masaüstü konumundayken uygulamanızın içeriğini iki satır ve bir sütundan oluşan dikey bir ızgara şeklinde düzenleyin. Birincil içeriğin üstte, kontrollerin ise altta erişilebilir durumda kalmasını sağlayın.

1. Masaüstü modu için ızgara yapılandırmalarını tanımlama

Bir composable işlevinde, düzen alanı kimliklerini bir enum kullanarak tanımlayın ve varsayılan ve masaüstü duruşları için GridConfigurationScope blokları oluşturun.

defaultConfig içinde her iki alan da aynı hücreye (row = 1, column = 1) atanır. Grid, düzen içinde daha sonra bildirilen composable'ların daha önce bildirilenlerin üzerinde oluşturulduğu örtülü z-indeksleme kullanır. Bu sayede denetleyici, ek kapsayıcı iç içe yerleştirme olmadan oynatıcıyı kaplayabilir (daha fazla bilgi için Grid ile kullanıcı arayüzü öğesi katmanları bölümüne bakın).

enum class VideoPlayerArea { Player, Controller }

object PlayerGridConfig {
    // Default: Single area layout with overlay (controls on top of player)
    val defaultConfig: GridConfigurationScope.() -> Unit = {
        row(1f)
        column(1f)
        area(areaId = VideoPlayerArea.Player, row = 1, column = 1)
        area(areaId = VideoPlayerArea.Controller, row = 1, column = 1)
    }

    // Tabletop: Two rows splitting content across the fold
    val tabletopConfig: GridConfigurationScope.() -> Unit = {
        row(0.5f)
        row(0.5f)
        column(1f)
        area(areaId = VideoPlayerArea.Player, row = 1, column = 1) // Top half above fold
        area(areaId = VideoPlayerArea.Controller, row = 2, column = 1) // Bottom half below fold
    }
}

2. Masa üstü duruşunu algılama ve yapılandırmayı ızgaraya uygulama

mediaQuery kullanarak windowPosture temelinde etkin yapılandırmayı seçin, config değerini Grid öğesine iletin ve birleştirilebilir içeriği alan kimliklerine bağlayın. VideoPlayerArea.Player öğesini VideoPlayerArea.Controller öğesinden önce bildirmek, her ikisi de defaultConfig içinde bir hücreyi paylaştığında kontrollerin oynatıcının üzerinde oluşturulmasını sağlar:

val config = mediaQuery {
    when (windowPosture) {
        Posture.Tabletop -> PlayerGridConfig.tabletopConfig
        else -> PlayerGridConfig.defaultConfig
    }
}

Grid(config = config) {
    Box(
        modifier = Modifier
            .gridItem(areaId = VideoPlayerArea.Player)
    ) {
        // VideoPlayerContent
    }

    Box(
        modifier = Modifier
            .gridItem(areaId = VideoPlayerArea.Controller)
    ) {
        // PlaybackControlsContent
    }
}

Sonuçlar

mediaQuery ve Grid'yi birleştirerek uygulamanız, katlanabilir bir cihazın kısmen katlanarak masaüstü duruşuna getirildiği zamanı dinamik olarak algılar ve kullanıcı arayüzünü, katlama yeriyle ayrılmış iki işlevsel ekran alanına otomatik olarak ayarlar.

Ek kaynaklar