Uyarlanabilir uygulamalar oluşturma

Tabletler, katlanabilir cihazlar, ChromeOS cihazlar, araç ekranları ve TV'ler dahil olmak üzere 300 milyondan fazla büyük ekranlı Android cihaz şu anda kullanılıyor ve bu sayı her geçen gün artıyor. Artan sayıda ve çeşitlilikte büyük ekranlı cihazlarda olduğu kadar standart telefonlarda da optimum bir kullanıcı deneyimi sunmak için uyarlanabilir uygulamalar oluşturun.

Uyarlanabilir uygulamalar nedir?

Uyarlanabilir uygulamalar, uygulama ekranındaki değişikliklere (özellikle de uygulama penceresinin boyutuna) göre düzenleri değiştirir. Ancak uyarlanabilir uygulamalar, katlanabilir cihazların duruşunda (ör. masaüstü veya kitap modu) ve ekran yoğunluğu ile yazı tipi boyutunda yapılan değişiklikleri de dikkate alır.

Uyarlanabilir uygulamalar, farklı pencere boyutlarına yanıt olarak kullanıcı arayüzü öğelerini yalnızca germek veya küçültmek yerine düzen bileşenlerini değiştirir ve içeriği gösterir ya da gizler. Örneğin, uyarlanabilir bir uygulama standart telefonlarda alt gezinme çubuğu, büyük ekranlarda ise gezinme çubuğu gösterebilir. Uyarlanabilir uygulamalar, büyük ekranlarda iki bölmeli liste ayrıntısı düzeni gibi daha fazla içerik gösterirken küçük ekranlarda liste veya ayrıntı gibi daha az içerik gösterir.

Şekil 1. Uyarlanabilir uygulama, düzeni farklı pencere boyutları için optimize eder.

Geçmişte, telefon odaklı uygulamalar tam ekranda çalışırdı. Günümüzde uygulamalar, cihaz ekran boyutundan bağımsız olarak keyfi boyutlarda pencerelerde çoklu pencere modunda çalışır. Kullanıcılar pencere boyutunu istedikleri zaman değiştirebilir. Bu nedenle, tek bir cihaz türünde bile uygulamaların uyumlu olması gerekir.

Uyumlu uygulamalar, her cihazda ve her yapılandırmada iyi görünür ve iyi çalışır.

Uyarlanabilir kullanıcı arayüzleri neden oluşturulur?

Kullanıcılar, uygulamanızın tüm cihazlarında sorunsuz şekilde çalışmasını ve büyük ekranlarda gelişmiş özellikler sunmasını bekler. Gelişmiş bir uygulama deneyimi ve daha fazla üretkenlik için kullanıcılar çoklu pencere modunda.

Standart telefonlarda tek bir görevle sınırlı olan uygulamalar, geniş bir çeşitliliğe sahip kullanıcı tabanını kullanamaz.

Google Play

Google Play, kullanıcıların yüksek kaliteli uygulamaları keşfetmesine olanak tanıyan tablet ve katlanabilir cihazlara özel uygulama koleksiyonları ve önerileri sunar.

Play, büyük ekranlar için optimize edilmiş uygulamaları ve oyunları optimize edilmemiş uygulamalardan daha üst sıralarda gösterir. Sıralama, büyük ekran uygulama kalitesi yönergelerine dayanır. Sıralamanın daha yüksek olması, birden fazla cihaz kullanan kullanıcıların telefonlarında büyük ekrana özgü puanları ve yorumları görmelerini sağlayarak bulunabilirliği artırır.

Play Store'un geniş ekran kalite standartlarını karşılamayan uygulamalar, uygulama ayrıntıları sayfasında bir uyarı görüntüler. Uyarıda, uygulamanın büyük ekranlı cihazlarda iyi performans göstermeyebileceği belirtilir.

Şekil 2. Uygulama ayrıntıları sayfasında teknik kalite uyarısı.

Google Play'de bulunabilirliği artırmak ve uygulamanızı indirebilecek cihaz sayısını en üst düzeye çıkarmak için uyarlanabilir uygulamalar oluşturun.

Nasıl başlanır?

Planlamadan dağıtıma kadar uygulama geliştirmenin tüm aşamalarında uyarlanabilir tasarımı göz önünde bulundurun. Grafik tasarımcıları uyarlanabilir tasarım hakkında bilgilendirme. Uygulamanızı uyarlanabilir olacak şekilde tasarlayarak yönetilebilir, genişletilebilir ve gelecekteki form faktörleri ve pencere modları için hazır bir uygulama oluşturun.

Tüm ekran boyutlarını ve yapılandırmalarını destekleyen uyarlanabilir bir uygulama oluşturmak için aşağıdakileri yapın:

  • Düzen kararları almak için pencere boyutu sınıflarını kullanma
  • Compose Material 3 Uyarlanabilir kitaplığıyla oluşturma
  • Dokunma dışındaki girişleri destekleme
  • Tüm cihaz türlerinde test edin

Pencere boyutu sınıfları

Uygulama penceresi boyutları, uygulama tam ekran olsa bile farklı cihazlarda veya katlanabilir cihazlarda aynı cihazda farklı olabilir. Farklı cihaz yönleri farklı en boy oranları oluşturur. Çoklu pencere modunda uygulama penceresinin boyutu, en boy oranı ve yönü cihaz ekranından farklı olabilir.

Uyumlu uygulamalar, düzenleri oluştururken yalnızca uygulama penceresini dikkate alarak pencere boyutunu, en boy oranını ve yönü belirleme ve yönetme sorununu basitleştirip genelleştirir. Bu, uygulama penceresi tam ekran olduğunda da çalışır.

Pencere boyutu sınıfları, uygulama pencerelerini pencere genişliğine veya yüksekliğine göre kompakt, orta veya geniş olarak sınıflandırır.

Kompakt, orta ve genişletilmiş genişlikteki pencere boyutu sınıflarının gösterimi.
Şekil 3. Ekran genişliğine dayalı pencere boyutu sınıfları.

Uygulamanızın WindowSizeClass değerini, Compose Material 3 Uyarlanabilir kitaplığının currentWindowAdaptiveInfo() üst düzey işlevini kullanarak hesaplayın. İşlev, windowSizeClass içeren WindowAdaptiveInfo örneği döndürür. Pencere boyutu sınıfı değiştiğinde uygulamanız güncelleme alır:

val windowSizeClass = currentWindowAdaptiveInfo().windowSizeClass
AdaptiveLayoutSnippets.kt

İçerik bölmeleri

Etkinliğin düzenine bazen ekran da denir. Örneğin, uygulamanızda bir ana ekran, bir liste ekranı ve bir öğe ayrıntıları ekranı olabilir. Terminoloji, her etkinliğin cihaz ekranını kapladığını ima eder.

Ancak genişletilmiş genişlik pencere boyutu sınıfını destekleyecek kadar büyük cihaz ekranlarında, birden fazla etkinlik ekranı aynı anda ekranda gösterilebilir. Panel, tek tek etkinliklerin içerik görüntülemelerini ifade eden daha net bir terimdir.

Pencere boyutu sınıfları, Material Design'da belirtildiği gibi çok bölmeli düzenlerde kaç içerik bölmesi gösterileceğini belirlemenize olanak tanır.

Cihaz ekranları panellere bölünür: Kompakt ve orta pencere boyutu sınıflarında bir panel, genişletilmiş pencere boyutu sınıfında iki panel.
Şekil 4. Pencere boyutu sınıfı başına içerik bölmelerinin sayısı.

Bölmelerde gezinebilirsiniz. Kompakt ve orta pencere boyutu sınıflarında uygulamalar tek bir bölmede gösterilir. Bu nedenle, herhangi bir hedefe gitmek için gezinirken tek bir bölme gösterilir.

Genişletilmiş pencere boyutu sınıfında uygulamalar, ilgili içeriği liste ayrıntıları gibi birden fazla bölmede gösterebilir. Her iki bölmeye de gittiğinizde iki bölmeli düzen gösterilir. Pencere boyutu kompakt veya orta olarak değişirse uyarlanabilir uygulamalar yalnızca bir bölmeyi (gezinme hedefi, liste veya ayrıntı) gösterir.

Şekil 5. Navigasyon hedefi olarak liste bölmesi içeren liste-ayrıntı düzeni.
Şekil 6. Navigasyon hedefi olarak ayrıntı bölmesi bulunan liste-ayrıntı düzeni.

Compose Material 3 Adaptive

Jetpack Compose, birden fazla düzen dosyasının kopyalama ve bakım yükünü taşımadan uyarlanabilir uygulamalar oluşturmaya yönelik modern, açıklayıcı bir yaklaşımdır.

Compose Material 3 Uyarlanabilir kitaplığı, pencere boyutu sınıflarını, gezinme bileşenlerini, çok bölmeli düzenleri ve katlanabilir duruşları ve menteşe konumunu yöneten bileşenler içerir. Örneğin:

  • NavigationSuiteScaffold: Uygulama pencere boyutu sınıfına ve cihazın duruşuna bağlı olarak gezinme çubuğu ile gezinme sütunu arasında otomatik olarak geçiş yapar.

  • ListDetailPaneScaffold: list-detail standart düzenini uygular.

    Düzeni uygulama pencere boyutuna uyarlar. Genişletilmiş pencere boyutu sınıfında yan yana bölmelerde bir liste öğesinin listesini ve ayrıntılarını, ancak yalnızca kompakt ve orta pencere boyutu sınıflarındaki listeyi veya ayrıntısını sunar.

  • SupportingPaneScaffold: Destekleyici panelin standart düzenini uygular.

    Genişletilmiş pencere boyutu sınıfında ana içerik bölmesini ve destekleyici bir bölmeyi, kompakt ve orta pencere boyutu sınıflarında ise yalnızca ana içerik bölmesini gösterir.

Uyumlu uygulamalar geliştirmek için Compose Material 3 Uyumlu kitaplığı gerekli bir bağımlılıktır.

Yapılandırma ve süreklilik

Uyarlanabilir uygulamalar, yapılandırma değişiklikleri sırasında sürekliliği korur.

Uygulama penceresi yeniden boyutlandırıldığında, katlanabilir cihazın duruşu değiştiğinde ya da ekran yoğunluğu veya yazı tipi değiştiğinde yapılandırma değişikliği meydana gelir.

Varsayılan olarak yapılandırma değişiklikleri, uygulama etkinliğini yeniden oluşturur ve tüm etkinlik durumları kaybolur. Uyumlu uygulamalar, sürekliliği korumak için durumu etkinliğin onSaveInstanceState() yöntemine veya bir ViewModel öğesine kaydeder.

Duruş

Uyumlu uygulamalar, katlanabilir cihazların duruşundaki değişikliklere yanıt verir. Masa ve kitap pozları da duruşlar arasındadır.

Şekil 7. Masaüstü duruşuyla katlanabilir cihaz.

Jetpack WindowManager'daki WindowInfoTracker arayüzü, cihazla ilgili DisplayFeature nesnelerinin listesini almanızı sağlar. Ekran özellikleri arasında, cihazın tamamen mi yoksa yarı açık mı olduğunu gösteren FoldingFeature.State yer alır.

Compose Material 3 Adaptive kitaplığı, windowPosture içeren bir WindowAdaptiveInfo örneği döndüren currentWindowAdaptiveInfo() üst düzey işlevini sağlar.

Dokunmanın ötesinde giriş

Kullanıcılar genellikle büyük ekranlı cihazlara harici klavyeler, dokunmatik yüzeyler, fareler ve ekran kalemleri bağlar. Bu çevre birimleri, kullanıcıların üretkenliğini, giriş hassasiyetini, kişisel ifadelerini ve erişilebilirliğini artırır. Çoğu ChromeOS cihazda yerleşik klavye ve dokunmatik yüzey bulunur.

Uyarlanabilir uygulamalar harici giriş cihazlarını destekler ancak işin büyük bir kısmı Android çerçevesi tarafından sizin için yapılır:

  • Jetpack Compose 1.7 ve sonraki sürümler: Klavye sekme gezinme ve fare veya dokunmatik yüzey tıklama, seçme ve kaydırma işlemleri varsayılan olarak desteklenir.

  • Jetpack androidx.compose.material3 kitaplığı: Kullanıcıların ekran kalemi kullanarak herhangi bir TextField bileşenine yazmalarına olanak tanır.

  • Klavye kısayolları yardımcısı: Android platformu ve uygulama klavye kısayollarını kullanıcıların keşfedebileceği hale getirir. onProvideKeyboardShortcuts() pencere geri çağırma işlevini geçersiz kılarak uygulamanızın klavye kısayollarını Klavye Kısayol Yardımcısı'nda yayınlayın.

Uyarlanabilir uygulamalar, tüm boyutlardaki form faktörlerini tam olarak desteklemek için tüm giriş türlerini destekler.

Uyarlanabilir uygulamaları test etme

Farklı ekran ve pencere boyutlarını ve farklı cihaz yapılandırmalarını test edin. Uygulama düzenlerinizi kontrol etmek için barındıran taraflı ekran görüntülerini ve Oluşturma önizlemelerini kullanın. Uygulamanızı Android Studio emülatörlerinde ve Google veri merkezlerinde barındırılan uzak Android cihazlarda çalıştırın.

Geniş ekran uygulama kalitesi yönergeleri

Büyük ekran uygulama kalite yönergeleri, uyarlanabilir uygulamanızın tabletlerde, katlanabilir cihazlarda ve ChromeOS cihazlarda iyi çalıştığından emin olmanızı sağlar. Yönergeler, kritik kullanıcı yolculuklarında uygulama işlevini doğrulamanızı sağlayan testleri içerir. Kurallar büyük ekranlara odaklansa da tüm ekran boyutlarıyla uyumludur.

Birden fazla yapılandırma

Compose 1.7 ve sonraki sürümlerdeki DeviceConfigurationOverride arayüzü, cihaz yapılandırmasının çeşitli yönlerini geçersiz kılmanıza olanak tanır. API, test etmek istediğiniz tüm birleştirilebilir içerikler için farklı cihaz yapılandırmalarını yerelleştirilmiş bir şekilde simüle eder. Örneğin, test paketinizi tek bir cihazda veya emülatörde tek bir çalıştırmada birden fazla rastgele kullanıcı arayüzü boyutunu test edebilirsiniz.

DeviceConfigurationOverride.then() uzantı işleviyle yazı tipi boyutu, yerel ayar, tema ve düzen boyutu gibi birden fazla yapılandırma parametresini aynı anda test edebilirsiniz.

Ana makine tarafında ekran görüntüleri

Ana makine taraflı ekran görüntüsü testleri, uygulama düzenlerinizin görsel görünümünü doğrulamanın hızlı ve ölçeklenebilir bir yoludur. Kullanıcı arayüzünüzü çeşitli ekran boyutlarında test etmek için barındırıcı taraflı ekran görüntüleri kullanın.

Daha fazla bilgi için Oluşturma Önizlemesi Ekran Görüntüsü Testi başlıklı makaleyi inceleyin.

Önizleme oluşturma

Oluşturma önizlemeleri, Android Studio'nun tasarım görünümünde uygulamanızın kullanıcı arayüzünü kontrol etmenizi sağlar. Önizlemeler, birleştirilebilir içeriği çeşitli yapılandırmalarda görmenize olanak tanımak için @PreviewScreenSizes, @PreviewFontScale ve @PreviewLightDark gibi ek açıklamalar kullanır. Önizlemelerle bile etkileşimde bulunabilirsiniz.

Android Studio, önizlemelerde sık karşılaşılan kullanılabilirlik sorunlarını (ör. çok geniş düğmeler veya metin alanları) da vurgular.

Daha fazla bilgi için Kompozisyonlu önizlemelerle kullanıcı arayüzünüzü önizleme başlıklı makaleyi inceleyin.

Emülatörler

Android Studio, farklı düzen boyutlarını test etmek için çeşitli emülatörleri sunar:

  • Boyutlandırılabilir emülatör: Telefon, tablet veya katlanabilir cihazı taklit eder ve bunlar arasında anında geçiş yapmanıza olanak tanır
  • Pixel Fold emülatörü: Pixel Fold büyük ekran katlanabilir telefonunu taklit eder
  • Pixel Tablet emülatörü: Pixel Tablet büyük ekran cihazını taklit eder
  • Masaüstü emülatörü: Serbest biçimli pencereleme, fareyle üzerine gelme ve klavye kısayollarının test edilmesini sağlar

Uzaktan cihaz aktarımı

Google veri merkezlerinde barındırılan uzak Android cihazlara güvenli bir şekilde bağlanın ve uygulamanızı en yeni Pixel ve Samsung cihazlarda çalıştırın. Uygulamanızın çeşitli gerçek cihazlarda sorunsuz çalıştığından emin olmak için uygulama yükleyip hata ayıklama, ADB komutları çalıştırma, cihazları döndürme ve katlama işlemlerini yapabilirsiniz.

Uzaktan cihaz aktarımı Android Studio'ya entegre edilmiştir. Daha fazla bilgi için Firebase tarafından desteklenen Android cihaz aktarımı başlıklı makaleyi inceleyin.

Ek kaynaklar