Ü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 dönüm noktası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 masaüstü pencere 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 masaüstü pencereli görüntüleme deneyimi sunmak için işbirliği yaptı. 
Bu özellik artık desteklenen cihazlarda* genel olarak kullanıma sunuldu. Desteklenen Pixel ve Samsung telefonlarını harici monitörlere bağlayabilen kullanıcılar, farklı form faktörlerine uyum sağlayan daha ilgi çekici ve daha üretken uygulama deneyimleri oluşturmak için yeni fırsatlardan yararlanabilir.

İş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 uygulamaları hızlı erişim için 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 yayılır ve daha da geniş bir çalışma alanı sunulur. İ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

Masaüstü oturumunu iki ekrana da genişleten, harici bir ekrana bağlı tablet.

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 ilkeleri ile 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 dokunmaya dayalı 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ın piksel yoğunluğu, birincil cihaz ekranından çok farklı 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ığı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 destek iyileştirildi.

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öründe e-posta istemcisi, üç hatta dört bölmeyi (ör. posta kutusu, ileti listesi, iletinin tam içeriği ve takvim/görevler paneli) aynı anda şık bir şekilde gösterebilir.

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 öğedir. İlk kararlı sürümüne 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örüntülenmesine 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, aynı anda bir veya daha fazla hedefi görüntüleyen 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ı ve destek bölmesi gibi kullanıma 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, sahne 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örüntüleyen bir sahneyi 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 desteklediklerini 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 öğenizi 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 NavDisplaySinglePaneScene 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 üç panelli 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 etkinleştirmeniz gerekir:

currentWindowAdaptiveInfo(supportLargeAndXLargeWidth = true)

Başlarken

En yeni 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 desteklenmektedir.

Yazan:

Okumaya devam edin