Uyarlanabilir uygulamalar oluşturma

Aralarında tabletler de dahil olmak üzere 300 milyondan fazla Android büyük ekranlı katlanabilir cihazlar, ChromeOS cihazlar, araba ekranları ve TV'ler günümüzde kullanılıyor. sürekli olarak geliyor. Sayıları her geçen gün artan cihazlarda optimum kullanıcı deneyimi sağlamak büyük ekranlı cihazların çeşitliliğine standart telefonlarda da uyarlanabilir uygulamalar.

Uyarlanabilir uygulamalar nedir?

Uyarlanabilir uygulamaların yeniden düzenleme düzenleri, öncelikli olarak uygulama ekranındaki değişikliklere göre belirlenir. uygulama penceresinin boyutundaki değişiklikleri göz önünde bulundurun. Ancak uyarlanabilir uygulamalar, katlanabilir cihazların duruşundaki değişiklikler (ör. masa üstü veya kitabın duruşu gibi), ve ekran yoğunluğu ile yazı tipi boyutundaki değişiklikler arasındadır.

Farklı öğelere göre kullanıcı arayüzü öğelerini uzatmak veya küçültmek yerine Uyarlanabilir uygulamalar, düzen bileşenlerinin yerini alır ve içeriği gösterir veya gizler. Örneğin, standart telefonlardaki bir uyarlanabilir uygulama, gezinme çubuğu vardır, ancak büyük ekranlarda gezinme çubuğu bulunur. Büyük ekranlarda Uyarlanabilir uygulamalar iki bölmeli, liste ayrıntısı düzeni gibi daha fazla içerik görüntüler; açık ya da liste veya ayrıntı gibi daha az içerik vardır.

ziyaret edin.
Şekil 1. Uyarlanabilir uygulama, düzeni farklı pencere boyutlarına göre optimize eder.

Hızla soluklaşan, telefon merkezli geçmişte uygulamalar tam ekran çalışıyordu. Günümüzde uygulamalar cihaz ekranından bağımsız olarak rastgele boyutlandırılmış pencerelerde çoklu pencere modu seçin. Kullanıcılar pencere boyutunu istedikleri zaman değiştirebilir. Böylece tek bir cihazda bile uygulamalar uyarlanabilir olmalıdır.

Uyarlanabilir uygulamalar hem harika görünür hem de herhangi bir yapılandırmadaki tüm cihazlarda iyi çalışır.

Neden uyarlanabilir kullanıcı arayüzleri oluşturmalısınız?

Kullanıcılar, uygulamanızın tüm cihazlarında sorunsuz çalışmasını ve büyük ekranlarda gelişmiş özellikler. Kullanıcılar, çoklu pencere modunda çoklu görev gerçekleştirdiğinde uygulama deneyimini iyileştirir ve üretkenliği artırır.

Standart telefonlarda tek bir görevle sınırlı uygulamalar, geniş bir kullanıcı kapasitesini göz ardı ediyor. bir araya getirilebilir.

Google Play

Google Play, tablet ve katlanabilir cihazlara özel uygulama koleksiyonları sunar. Önerileri, kullanıcıların yüksek kaliteli uygulamaları keşfetmelerini sağlar.

Play, büyük ekranlar için optimize edilmiş uygulama ve oyunları optimize edilmemişe göre daha yukarıda sıralar Sıralama, büyük ekranlı uygulama kalite yönergelerine göre yapılır. Yüksek Sıralama, birden çok cihaz kullananların aşağıdakileri görmesini sağlayarak keşfedilebilirliği artırır büyük ekrana özgü kullanıcı oyları ve yorumlar

Play Store'un geniş ekran kalite standartlarını karşılamayan uygulamalar, uyarısı gösterilir. Uyarı, kullanıcılara, uygulamanın büyük ekranlı cihazlarda iyi performans göstermeyebilir.

Ş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ı.

Nasıl başlanır?

Uyarlanabilir tasarımı planlamadan uygulama geliştirmenin tüm aşamalarında düşünün dağıtım. Grafik tasarımcıları uyarlanabilir tasarım hakkında bilgilendirme. Uygulamanızı uyarlayabilirsiniz ve yönetilebilen, genişletilebilir ve hazır bir uygulama geliştirmek için daha fazla bilgi edinin.

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

  • Düzen kararları almak için pencere boyutu sınıflarını kullanın
  • Compose Material 3 Uyarlanabilir kitaplığıyla derleme
  • Dokunmanın ötesinde giriş desteği
  • Tüm cihaz türlerinde test et

Pencere boyutu sınıfları

Uygulama penceresi boyutları, farklı cihazlarda veya aynı cihazlarda farklı olabilir katlanabilir cihazlarda bile (uygulama tam ekran olsa bile) bu kapsama girer. Farklı cihaz yönleri farklı en boy oranları üretir. İçinde çoklu pencere modu, uygulama pencere boyutu, en boy oranı ve yön cihazın ekranındakinden farklı.

Uyarlanabilir uygulamalar, kullanıcıların uygulamanızı veya oyununuzu yalnızca uygulama penceresi dikkate alınarak pencere boyutu, en boy oranı ve yön Bu işlem, uygulama penceresi tam ekrandayken de çalışır.

Pencere boyutu sınıfları, uygulama pencerelerini kompakt, orta veya genişletilmiş olmalıdır.

Kompakt, orta ve genişletilmiş genişlikli pencere boyutu sınıflarının tasviri.
Şekil 3. Ekran genişliğine göre pencere boyutu sınıfları.
ziyaret edin.
'nı inceleyin.

Uygulamanızın WindowSizeClass değerini currentWindowAdaptiveInfo() Oluşturma ayarının üst düzey işlevi Material 3 Uyarlanabilir kitaplık. İşlev, windowSizeClass içeren WindowAdaptiveInfo. Uygulamanız pencere boyutu sınıfı her değiştiğinde güncelleme alır:

val windowSizeClass = currentWindowAdaptiveInfo().windowSizeClass
AdaptiveLayoutSnippets.kt

İçerik bölmeleri

Bir etkinliğin düzeni bazen ekran olarak da adlandırılır. Örneğin, uygulamada ana ekran, liste ekranı ve öğe ayrıntıları ekranı olabilir. İlgili içeriği oluşturmak için kullanılan her etkinliğin cihaz ekranını kapladığını ifade eder.

Ancak, genişletilmiş genişliği destekleyecek kadar büyük cihaz ekranlarında pencere boyutu sınıfını kullanıyorsanız birden fazla etkinlik ekranı aynı anda ekranda gösterilebilir. Pane, bağımsız etkinliklerin içerik görüntülemelerini ifade eden daha kesin bir terimdir.

Pencere boyutu sınıfları, gösterilecek içerik bölmelerinin sayısını belirlemenizi sağlar. Materyal Tasarım'da belirtildiği gibi çok bölmeli düzenler.

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

Bölmelerde gezinilebilir. Kompakt ve orta pencere boyutu sınıflarında, uygulamalar tek bölme, Dolayısıyla, herhangi bir hedefe giderken bir bölme görüntülenir.

Uygulamalar, genişletilmiş pencere boyutu sınıfında ilgili içeriği birden çok bölmelere ekleyebilirsiniz. Bölme ekranlarından birine gitme iki bölmeli düzen. Pencere boyutu küçük veya orta olarak değişirse uyarlanabilir uygulamalarda yalnızca bir bölme gösterilir: Gezinme hedefi; liste veya verelim.

ziyaret edin.
Şekil 5. Gezinme hedefi olarak liste bölmesi içeren liste ayrıntısı düzeni.
ziyaret edin.
Şekil 6. Gezinme hedefi olarak ayrıntı bölmesine sahip liste-ayrıntı düzeni.

Materyal 3 Uyarlanabilir Oluşturma

Jetpack Compose, uyarlanabilir uygulamalar geliştirmeye yönelik modern ve bildirimsel yaklaşımdır. Böylece, düzen dosyalarının yinelenmesi ve bakım yükünü hafifletmiş olursunuz.

Compose Material 3 Uyarlanabilir kitaplığı, gezinme bileşenleri, çok bölmeli düzenler ve katlanabilir duruşlar ve menteşe konumu, örneğin:

  • NavigationSuiteScaffold: Gezinme çubuğu arasında otomatik olarak geçiş yapar ve gezinme sütunu, uygulama pencere boyutu sınıfına ve cihazın duruşuna göre değişir.

  • ListDetailPaneScaffold: list-detail standartını uygular düzen seçeneğini tıklayın.

    Düzeni uygulama pencere boyutuna uyarlar. Listeyi ve projenizin ayrıntılarını sunar. genişletilmiş pencere boyutunda yan yana bölmelerde yer alan bir liste öğesi değil, yalnızca kompakt ve orta pencere boyutuyla ilgili ayrıntıları içeren bir liste sınıflar.

  • SupportingPaneScaffold: Standart destek bölmesini uygular düzen seçeneğini tıklayın.

    Genişletilmiş pencerede ana içerik bölmesini ve destekleyici bölmeyi sunar. küçük ve orta boy pencere boyutları için yalnızca ana içerik penceresinde sınıflar.

Compose Material 3 Uyarlanabilir kitaplığı, ve uyarlanabilir uygulamalar geliştirmek.

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, yeniden boyutlandırıldığında bir yapılandırma değişikliği veya ekran yoğunluğu ya da yazı tipi değişir.

Varsayılan olarak, yapılandırma değişiklikleri uygulama etkinliğini ve tüm etkinlikleri yeniden oluşturur durumu kaybolur. Sürekliliği korumak için uyarlanabilir uygulamalar etkinliğin onSaveInstanceState() yönteminde veya ViewModel içinde.

Duruş

Uyarlanabilir uygulamalar, katlanabilir cihazların duruşundaki değişikliklere uyum sağlar. Duruşlar ve kitabın duruşunu ekleyin.

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

Jetpack WindowManager'daki WindowInfoTracker arayüzü, aşağıdakileri yapmanıza olanak sağlar: cihaz için DisplayFeature nesnelerin listesini alın. Ekranın arasında özellikleri FoldingFeature.State, bu değer cihazın ya da kısmen açık duruma getirebileceğinizi unutmayın.

Compose Material 3 Uyarlanabilir kitaplığı, currentWindowAdaptiveInfo() üst düzey işlevi, windowPosture içeren WindowAdaptiveInfo örneği.

Dokunmadan daha fazla giriş yapın

Kullanıcılar genellikle harici klavyeleri, dokunmatik yüzeyleri, fareleri ve ekran kalemlerini büyük cihazları ayırın. Çevre birimleri; kullanıcı verimliliğini, giriş hassasiyetini, ve erişilebilirlik. Çoğu ChromeOS cihazda yerleşik klavyeler ve dokunmatik yüzeyler.

Uyarlanabilir uygulamalar, harici giriş cihazlarını destekler ancak işin çoğu bazı önemli hususlara yardımcı olalım:

  • Jetpack Compose 1.7 ve sonraki sürümler: Klavye sekmesiyle gezinme ve fare ya da dokunmatik yüzey tıklaması, seçme ve kaydırma varsayılan olarak desteklenir.

  • Jetpack androidx.compose.material3 kitaplığı: Kullanıcıların yazmasına olanak tanır herhangi bir TextField bileşenine yapıştırabilirsiniz.

  • Klavye Kısayolları Yardımcısı: Android platformu ve uygulama klavyesi yapar kullanıcılar tarafından bulunabilir. Uygulamanızın klavye kısayollarını şurada yayınlayın: onProvideKeyboardShortcuts() aralığına geri arama.

Her boyuttan form faktörünü tam olarak desteklemek için uyarlanabilir uygulamalar tüm bulunur.

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 ana makine tarafı ekran görüntülerini ve Oluştur önizlemelerini kullanın. Uygulamanızı, Android Studio emülatörlerinde ve şurada barındırılan uzak Android cihazlarda çalıştırın: Google veri merkezleri

Büyük ekran uygulama kalitesi yönergeleri

Büyük ekran uygulama kalitesi yönergeleri, uyarlanabilir uygulamanızın iyi çalışmasını sağlar Tabletlerde, katlanabilir cihazlarda ve ChromeOS cihazlarda. Yönergeler, Kritik kullanıcı yolculukları için uygulama işlevselliğini doğrulamanızı sağlar. Her ne kadar yönergeleri büyük ekranlara odaklandığından 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 her şey için yerelleştirilmiş bir şekilde farklı cihaz yapılandırmalarını simüle eder oluşturmak için testlere göz atın. Örneğin, birden çok, test paketinizin tek bir cihazda çalıştırılmasıyla rastgele kullanıcı arayüzü boyutları emülatörü kullanın.

DeviceConfigurationOverride.then() uzantısı işleviyle şunları yapabilirsiniz: yazı tipi boyutu, yerel ayar, tema ve kontrol gibi birden çok yapılandırma parametresini düzenleyebilirsiniz.

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

Ana makine taraflı ekran görüntüsü testleri, görsel doğrulamanın hızlı ve ölçeklenebilir bir yoludur. görünümüyle ilgili daha fazla bilgi edinebilirsiniz. Ana makine taraflı ekran görüntülerini kullanarak kullanıcı arayüzünüzü çeşitli ekran boyutlarına sahip.

Daha fazla bilgi için Önizleme Ekran Görüntüsü Testi Oluşturma bölümüne bakın.

Önizleme oluştur

Önizleme oluşturma özelliği, uygulamanızın kullanıcı arayüzünü Android'in tasarım görünümünde kontrol etmenizi sağlar Stüdyo'yu seçin. Önizlemelerde @PreviewScreenSizes, @PreviewFontScale ve @PreviewLightDark ile composable çeşitli yapılandırmalardaki içerik. Önizlemelerle etkileşimde bulunabilirsiniz.

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

Daha fazla bilgi için Kullanıcı arayüzünü composable önizlemelerle önizleme konusuna bakın.

Emülatörler

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

  • Yeniden boyutlandırılabilir emülatör: Telefon, tablet veya katlanabilir cihazı emüle eder. Böylece, gerçek zamanlı olarak
  • Pixel Fold emülatörü: Pixel Fold büyük ekran katlanabilir telefon emülasyonu
  • Pixel Tablet emülatörü: Pixel Tablet büyük ekranlı cihazı emüle eder
  • Masaüstü emülatörü: Serbest biçimli pencereleme, fareyle üzerine gelme ve klavye kısayolları

Uzak cihaz aktarımı

Google veri merkezlerinde barındırılan uzak Android cihazlara güvenli bir şekilde bağlanarak en yeni Pixel ve Samsung cihazlarda kullanmanız gerekir. Uygulamaları yükleyin, hata ayıklayın, ADB komutlarını kullanabilir ve cihazınızın belirli bir cihazda iyi çalışmasını sağlamak için cihazları döndürüp katlayabilirsiniz gerçek cihaz çeşitlerini kullanabilir.

Uzak cihazda aktarma, Android Studio'ya entegre edilmiştir. Daha fazla bilgi için Firebase tarafından desteklenen Android Cihaz Akışı adlı makaleyi inceleyin.

Ek kaynaklar