Ürün Haberleri

Android cihazlar, bağlı ekranlara sorunsuz bir şekilde genişletilebilir.

Okuma süresi: 7 dakika
Francesco Romano
Geliştirici İlişkileri Mühendisi, Android

Android'de mobil ve masaüstü bilgisayarları birbirine yaklaştırma konusunda önemli bir kilometre taşına ulaştığımızı duyurmaktan heyecan duyuyoruz: Bağlı ekran desteği, Android 16 QPR3 sürümüyle genel kullanıma sunuldu.

Google I/O 2025'te gösterildiği gibi, bağlı ekranlar kullanıcıların Android cihazlarını harici bir monitöre bağlamasına ve anında pencereli görüntüleme ortamına erişmesine olanak tanır. Uygulamalar serbest biçimli veya ekranı kaplayan pencerelerde kullanılabilir. Kullanıcılar, masaüstü işletim sisteminde olduğu gibi çoklu görev yapabilir.

Google ve Samsung, Android 16 çalıştıran ve harici bir ekrana bağlı olan Android ekosistemindeki cihazlara sorunsuz ve güçlü bir pencereli görüntüleme deneyimi sunmak için işbirliği yaptı. 
Bu özellik, desteklenen Pixel ve Samsung telefonlarını harici monitörlere bağlayabilen kullanıcılar için desteklenen cihazlarda* genel kullanıma sunuldu. Böylece, form faktörlerine uyum sağlayan daha ilgi çekici ve daha verimli uygulama deneyimleri oluşturmak için yeni fırsatlar sunuluyor.

İşleyiş şekli

Desteklenen bir Android telefon veya katlanabilir cihaz harici bir ekrana bağlandığında, bağlı ekranda yeni bir masaüstü oturumu başlatılır.

Bağlı ekrandaki deneyim, etkin uygulamaları gösteren ve kullanıcıların hızlı erişim için uygulamaları sabitlemesine olanak tanıyan görev çubuğu da dahil olmak üzere masaüstü deneyimine benzer. Kullanıcılar, bağlı ekranda serbestçe yeniden boyutlandırılabilen pencerelerde aynı anda birden fazla uygulamayı yan yana çalıştırabilir.

materialDisplay.gif

Telefon, harici bir ekrana bağlıyken ekranda masaüstü oturumu açık ve telefon kendi durumunu koruyor.

Pencereli görüntülemeyi destekleyen bir cihaz (ör. Samsung Galaxy Tab S11 gibi bir tablet) harici bir ekrana bağlandığında masaüstü oturumu her iki ekrana da genişletilir ve daha da geniş bir çalışma alanı elde edilir. İki ekran daha sonra tek bir sürekli sistem olarak çalışır. Bu sayede uygulama pencereleri, içerik ve imleç ekranlar arasında serbestçe hareket edebilir.

materialDisplay2.gif

Tablet, masaüstü oturumunu her iki ekrana da genişleten harici bir ekrana bağlı.

Neden önemli?

Android 16 QPR3 sürümünde, bağlı ekran deneyimini tanımlayan pencere davranışlarını, görev çubuğu etkileşimlerini ve giriş uyumluluğunu (fare ve klavye) tamamladık. Ayrıca, pencereleri ölçeklendirmek ve ekranlar arasında geçiş yaparken uygulamaların yeniden başlatılmasını önlemek için uyumluluk çözümleri de ekledik.


Uygulamanız uyarlanabilir tasarım ilkeleriyle oluşturulmuşsa otomatik olarak masaüstü görünümüne ve tarzına sahip olur. Böylece kullanıcılar kendilerini rahat hisseder. Uygulama dikey moda kilitlenmişse veya yalnızca dokunma tabanlı bir arayüz kullanıyorsa şimdi modernleştirme zamanı.

Özellikle, bağlı ekranlarda optimum uygulama deneyimleri için aşağıdaki temel en iyi uygulamalara dikkat edin:

  • Sabit bir Display nesne olduğunu varsaymayın: Uygulamanızın bağlamıyla ilişkili Display nesnesi, bir uygulama penceresi harici bir ekrana taşındığında veya ekran yapılandırması değiştiğinde değişebilir. Uygulamanız, yapılandırma değişikliği etkinliklerini sorunsuz bir şekilde işlemeli ve görüntüleme metriklerini önbelleğe almak yerine dinamik olarak sorgulamalıdır.
  • Yoğunluk yapılandırması değişikliklerini hesaba katın: Harici ekranlar, birincil cihaz ekranından çok farklı piksel yoğunluklarına sahip olabilir. Kullanıcı arayüzünün netliğini ve kullanılabilirliğini korumak için düzenlerinizin ve kaynaklarınızın bu değişikliklere doğru şekilde uyum sağladığından emin olun. Düzenler için yoğunluktan bağımsız pikseller (dp) kullanın, yoğunluğa özel kaynaklar sağlayın ve kullanıcı arayüzünüzün uygun şekilde ölçeklendiğinden emin olun.
  • Harici çevre birimlerini doğru şekilde destekleyin: Kullanıcılar harici bir monitöre bağlandıklarında genellikle masaüstü benzeri bir ortam oluşturur. Bu durumda genellikle harici klavye, fare, izleme dörtgeni, web kamerası, mikrofon ve hoparlör kullanılır. Klavye ve fare etkileşimleri için desteği iyileştirin.

Modern araçlarla masaüstünün geleceğine yönelik geliştirme

Masaüstü deneyimini oluşturmanıza yardımcı olacak çeşitli araçlar sunuyoruz. Temel uyarlanabilir kitaplıklarımızdaki en son güncellemeleri özetleyelim.

Yeni pencere boyutu sınıfları: Büyük ve Çok Büyük

Jetpack WindowManager 1.5.0'daki en büyük güncelleme, iki yeni genişlik pencere boyutu sınıfının (Büyük ve Çok Büyük) eklenmesidir.

Pencere boyutu sınıfları, uyarlanabilir düzenler tasarlayıp geliştirmenize yardımcı olan, resmi ve belirli bir görüşe dayalı görüntü alanı kesme noktaları grubumuzdur. 1.5.0 sürümüyle birlikte, bu kılavuzu normal tabletlerin boyutunu aşan ekranlar için de geçerli olacak şekilde genişletiyoruz.

Yeni genişlik kesme noktaları şunlardır:

  • Büyük: 1.200 dp ile 1.600 dp arasındaki genişlikler için
  • Çok büyük: Genişlik ≥1.600 dp olan cihazlar için
windowClasses.png

Ekran genişliğine göre farklı pencere boyutu sınıfları.

Çok büyük yüzeylerde, tabletin Genişletilmiş düzenini büyütmek her zaman en iyi kullanıcı deneyimini sunmaz. Örneğin, bir e-posta istemcisi, Genişletilmiş pencere boyutu sınıfında iki bölmeyi (bir posta kutusu ve bir ileti) rahatça gösterebilir. Ancak çok büyük bir masaüstü monitörde e-posta istemcisi, üç hatta dört bölmeyi aynı anda zarif bir şekilde gösterebilir. Örneğin, posta kutusu, ileti listesi, iletinin tam içeriği ve takvim/görevler paneli.

Yeni pencere boyutu sınıflarını projenize dahil etmek için WindowSizeClass.BREAKPOINTS_V1 yerine WindowSizeClass.BREAKPOINTS_V2 kümesinden işlevi çağırmanız yeterlidir:

  val currentWindowMetrics =
    WindowMetricsCalculator.getOrCreate()
    .computeCurrentWindowMetrics(LocalContext.current)

val sizeClass = WindowSizeClass.BREAKPOINTS_V2
    .computeWindowSizeClass(currentWindowMetrics)

Uygulamanızın en az o kadar alana sahip olduğundan emin olduğunuzda doğru düzeni uygulayın:

  if(sizeClass.isWidthAtLeastBreakpoint(
    WindowSizeClass.WIDTH_DP_LARGE_LOWER_BOUND)){
    ...
	// Window is at least 1200 dp wide.
}

Jetpack Navigation 3 ile uyarlanabilir düzenler oluşturma

Navigation 3, Jetpack koleksiyonuna en son eklenen bileşendir. İlk kararlı sürümüne yeni ulaşan Navigation 3, Compose ile çalışmak üzere tasarlanmış güçlü bir gezinme kitaplığıdır.

Navigation 3, aynı anda birden fazla hedef gösterilmesine ve bu düzenler arasında sorunsuz geçiş yapılmasına olanak tanıyarak uyarlanabilir düzenler oluşturmak için de harika bir araçtır.

Uygulamanızın kullanıcı arayüzü akışını yönetmeye yönelik bu sistem, sahneleri temel alır. Sahne, bir veya daha fazla hedefi aynı anda gösteren bir düzendir. SceneStrategy, sahne oluşturulup oluşturulamayacağını belirler. SceneStrategy örneklerini birlikte zincirleyerek farklı ekran boyutları ve cihaz yapılandırmaları için farklı sahneler oluşturup görüntüleyebilirsiniz.

Liste-ayrıntı düzeni ve destek bölmesi gibi hazır kanonik düzenler için Compose Material 3 Adaptive kitaplığındaki sahneleri kullanabilirsiniz (1.3 ve sonraki sürümlerde kullanılabilir).

Ayrıca, Scene tariflerini değiştirerek veya sıfırdan başlayarak kendi özel sahnelerinizi oluşturmak da kolaydır. Örneğin, yan yana üç bölme gösteren bir Sahne'yi ele alalım:

  class ThreePaneScene<T : Any>(
    override val key: Any,
    override val previousEntries: List<NavEntry<T>>,
    val firstEntry: NavEntry<T>,
    val secondEntry: NavEntry<T>,
    val thirdEntry: NavEntry<T>
) : Scene<T> {
    override val entries: List<NavEntry<T>> = listOf(firstEntry, secondEntry, thirdEntry)
    override val content: @Composable (() -> Unit) = {
        Row(modifier = Modifier.fillMaxSize()) {
            Column(modifier = Modifier.weight(1f)) {
                firstEntry.Content()
            }
            Column(modifier = Modifier.weight(1f)) {
                secondEntry.Content()
            }
            Column(modifier = Modifier.weight(1f)) {
                thirdEntry.Content()
            }
        }
    }

Bu senaryoda, pencere genişliği yeterliyse ve geri yığınınızdaki girişler üç bölümlü bir sahnede gösterilmeyi desteklediğini beyan etmişse üç bölme göstermek için bir SceneStrategy tanımlayabilirsiniz.

  class ThreePaneSceneStrategy<T : Any>(val windowSizeClass: WindowSizeClass) : SceneStrategy<T> {
    override fun SceneStrategyScope<T>.calculateScene(entries: List<NavEntry<T>>): Scene<T>? {
        if (windowSizeClass.isWidthAtLeastBreakpoint(WIDTH_DP_LARGE_LOWER_BOUND)) {
            val lastThree = entries.takeLast(3)
            if (lastThree.size == 3 && lastThree.all { it.metadata.containsKey(MULTI_PANE_KEY) }) {
                val firstEntry = lastThree[0]
                val secondEntry = lastThree[1]
                val thirdEntry = lastThree[2]


                return ThreePaneScene(
                    key = Triple(firstEntry.contentKey, secondEntry.contentKey, thirdEntry.contentKey),
                    previousEntries = entries.dropLast(3),
                    firstEntry = firstEntry,
                    secondEntry = secondEntry,
                    thirdEntry = thirdEntry
                )
            }
        }
        return null
    }
}

NavDisplay'inizi oluştururken ThreePaneSceneStrategy'nizi diğer stratejilerle birlikte kullanabilirsiniz. Örneğin, üç bölmeyi göstermek için yeterli alan olmadığında iki bölmeyi yan yana göstermek üzere TwoPaneStrategy de ekleyebiliriz.

  val strategy = ThreePaneSceneStrategy() then TwoPaneSceneStrategy()

NavDisplay(..., 
  sceneStrategy = strategy,
  entryProvider = entryProvider { 
    entry<MyScreen>(metadata = mapOf(MULTI_PANE_KEY to true))) { ... }
    ... other entries...
  }
)

Üç veya iki bölmeyi görüntülemek için yeterli alan yoksa her iki özel sahne stratejimiz de null değerini döndürür. Bu durumda, NavDisplay, SinglePaneScene kullanarak geri yığında son girişi tek bir bölmede göstermeye geri döner. 

Sahneleri ve stratejileri kullanarak uygulamanıza tek, iki ve üç bölmeli düzenler ekleyebilirsiniz.

adaptivepane.gif

Geniş ekranlarda üç bölmeli gezinme gösteren uyarlanabilir bir uygulama.

Navigation 3'te Sahneler'i kullanarak özel düzenler oluşturma hakkında daha fazla bilgi edinmek için dokümanları inceleyin.

Bağımsız uyarlanabilir düzenler

Bağımsız bir düzene ihtiyacınız varsa Compose Material 3 Adaptive kitaplığı, pencere boyutu sınıflarına veya cihaz duruşlarına göre pencere yapılandırmalarına otomatik olarak uyum sağlayan liste-ayrıntı düzeni ve destekleyici bölme düzenleri gibi uyarlanabilir kullanıcı arayüzleri oluşturmanıza yardımcı olur. 

İyi haber şu ki kitaplık, yeni kesme noktalarıyla uyumlu olacak şekilde güncellendi. 1.2 sürümünden itibaren, varsayılan bölme iskeleti yönergeleri, geniş ve çok geniş pencere boyutu sınıflarını destekler.

Yalnızca Gradle derleme dosyanızda yeni kesme noktalarını kullanmak istediğinizi belirterek bu özelliği etkinleştirmeniz gerekir:

currentWindowAdaptiveInfo(supportLargeAndXLargeWidth = true)

Başlarken

En son Android sürümündeki bağlı ekran özelliğini keşfedin. Desteklenen bir cihaza Android 16 QPR3'ü yükleyin, ardından uygulamalarınızı test etmeye başlamak için cihazı harici bir monitöre bağlayın. 

Bu en iyi uygulamaları uygulama hakkında daha fazla bilgi edinmek için çoklu ekran desteği ve pencere yönetimi ile ilgili güncellenmiş dokümanları inceleyin.

Geri bildirim

Bağlı ekran masaüstü deneyimini iyileştirmeye devam ederken geri bildirimleriniz bizim için çok önemli. Görüşlerinizi paylaşmak ve sorunları bildirmek için resmi geri bildirim kanallarımızı kullanın.

Android'i, kullanıcıların uygulamaları ve cihazlarıyla etkileşim kurmak için kullandığı birçok yönteme uyum sağlayan çok yönlü bir platform haline getirmeye kararlıyız. Bağlı ekran desteğindeki iyileştirmeler de bu yönde atılan bir başka adımdır. Kullanıcılarınızın, oluşturacağınız masaüstü deneyimlerine bayılacağını düşünüyoruz.


*Not: Bu makalenin yazıldığı sırada bağlı ekranlar Pixel 8, 9, 10 serisi ve S26, Fold7, Flip7 ve Tab S11 dahil olmak üzere çok çeşitli Samsung cihazlarda destekleniyordu.

Yazan:

Okumaya devam edin