Farklı ekran boyutları için geliştirme yapın

Uygulamanız, ek alan kazanır ve küçük ekranlarda da mükemmel görünür. Bu kılavuzda, bu kullanıcı deneyimini elde etmeye yönelik öneriler sunulmaktadır.

Uyarlanabilir düzenlerin tasarım ilkeleri hakkında daha fazla bilgi için tasarım kılavuzundan yararlanabilirsiniz.

Horology'yi kullanarak duyarlı düzenler oluşturma

Düzenlerde yüzdeye dayalı kenar boşlukları bulunmalıdır. Compose'un işleyiş şekli mutlak değerlerde varsayılan olarak ayarlamak yerine Aşağıdaki özelliklere sahip Horology Library:

  • Yatay kenar boşlukları, cihaz ekranının belirli bir yüzdesine göre doğru şekilde ayarlandı seçin.
  • Üst ve alt boşluklar doğru ayarlandı. Bu durum, daha iyi çözümler bulmak için önerilen üst ve alt boşluklar, gösterilen bileşenlere kullanılır. Örneğin, Chip, Text için farklı aralıklara sahip olmalıdır bileşeni için bir değer ifade eder.
  • TimeText kenar boşlukları doğru ayarlandı.

Aşağıdaki kod snippet'i, Horology'nin Çeşitli cihazlarda mükemmel görünen içerikler oluşturmak için ScalingLazyColumn düzeni Wear OS ekran boyutları:

val columnState = rememberResponsiveColumnState(
    contentPadding = ScalingLazyColumnDefaults.padding(
        first = ScalingLazyColumnDefaults.ItemType.Text,
        last = ScalingLazyColumnDefaults.ItemType.SingleButton
    )
)
ScreenScaffold(scrollState = columnState) {
    ScalingLazyColumn(
        columnState = columnState
    ) {
        item {
            ResponsiveListHeader(contentPadding = firstItemPadding()) {
                Text(text = "Header")
            }
        }
        // ... other items
        item {
            Button(
                imageVector = Icons.Default.Build,
                contentDescription = "Example Button",
                onClick = { }
            )
        }
    }
}
List.kt

Bu örnekte ScreenScaffold ve AppScaffold da gösterilmektedir. Bunlar, uygulama ile bağımsız ekranlar arasındaki koordinasyondur (gezinme rotaları) kullanarak doğru kaydırma davranışını ve TimeText konumlandırması.

Üst ve alt dolgu için aşağıdakilere de dikkat edin:

  • Doğru Search Ads 360'ı belirlemek için ilk ve son ItemType dolgu.
  • Listedeki ilk öğe için ResponsiveListHeader kullanılması, Text üstbilgilerinde dolgu olmamalıdır.

Tüm spesifikasyonları Figma tasarım kitlerinde bulabilirsiniz. Daha fazla ve örnekler için şu bölüme bakın:

  • Horoloji kütüphanesi - derlemeye yardımcı olacak bileşenler sağlar optimize edilmiş ve farklılaştırılmış uygulamaları için de geçerlidir.
  • ComposeStarter örneği - bu kılavuzda özetlediğimiz gibidir.
  • JetCaster örneği - bir sunucu oluşturma için daha karmaşık bir örnek, uygulamasını geliştirdiniz.

Uygulamanızda kaydırma düzenlerini kullanma

Varsayılan seçenek olarak bu sayfanın önceki bölümlerinde gösterildiği gibi bir kaydırma düzeni kullanın göz önünde bulundurmanız gerekir. Bu sayede kullanıcılar, uygulamanızın bileşenlerine erişebilir ekran boyutundan veya Wear OS cihazın ekran boyutundan bağımsız olarak.

Farklı cihaz boyutlarının ve yazı tipi ölçeklendirmenin etkisi

Farklı cihaz boyutlarının etkisi yardımcı oluyor.

İletişim kutuları

Önemli bir neden olmadığı sürece iletişim kutuları kaydırılabilir olmalıdır. Horology tarafından sağlanan ResponsiveDialog bileşeni, takip etmek için:

  • Varsayılan olarak kaydırılır.
  • Yüzdeye dayalı kâr marjlarını düzeltin.
  • Genişliği, alan izin verdiği ölçüde ayarlayan düğmeler. dokunun.
Horology'de uyarlanabilir diyalog davranışı

Varsayılan olarak kaydırma sağlayan ve uyarlanan düğmeler içeren duyarlı iletişim kutuları kullanabilirsiniz.

Özel ekranlar kaydırılmayan düzenler gerektirebilir

Bazı ekranlar, kaydırılmayan düzenlere uygun olabilir. Birkaç örnek bir medya uygulamasındaki ana oynatıcı ekranını, antrenman ekranını da fitness uygulaması.

Bu gibi durumlarda Figma tasarım kitleri kullanın ve boyuta duyarlı bir tasarım uygulayın. doğru kenar boşluklarını kullanarak görüntüleyebilirsiniz.

Kesme noktalarıyla farklı deneyimler sunun

Daha büyük ekranlarla, ek içerik ve özellikler sunabilirsiniz. Alıcı: ekran boyutu ayrılma noktaları kullanmak için bir veya daha fazla Ekran boyutu 225 dp'yi aştığında farklı bir düzen gösteriliyor:

const val LARGE_DISPLAY_BREAKPOINT = 225

@Composable
fun isLargeDisplay() = LocalConfiguration.current.screenWidthDp >= LARGE_DISPLAY_BREAKPOINT

// ... use in your Composables:
if (isLargeDisplay()) {
    // Show additional content.
} else {
    // Show content only for smaller displays.
}

Tasarım kılavuzunda bu fırsatlar daha fazla gösterilmiştir.

Önizlemeleri kullanarak ekran ve yazı tipi boyutu kombinasyonlarını test edin

Önizlemeler oluşturma, çeşitli Wear OS ekran boyutları için uygulama geliştirmenize yardımcı olur. Aşağıdakileri görmek için hem cihazları hem de yazı tipi ölçeklendirme önizleme tanımlarını kullanın:

  • Ekranlarınızda büyük yazı tipi gibi boyutların aşırılıklarına nasıl bakılır? en küçük ekranla eşleştirilir.
  • Farklılaştırılmış deneyiminizin ayrılma noktalarında nasıl davrandığı.

Önizlemeleri WearPreviewDevices ve Uygulamanızdaki tüm ekranlar için WearPreviewFontScales.

@WearPreviewDevices
@WearPreviewFontScales
@Composable
fun ListScreenPreview() {
    ListScreen()
}

Ekran görüntüsü testi

Ekran görüntüsü testleri, önizleme testinin yanı sıra çok çeşitli uygulamalarla donanım boyutlarından yararlanır. Bu özellik, özellikle de hemen kullanılabilir olmayabilir ve sorun şurada ortaya çıkmayabilir: diğer ekran boyutlarına bağlı.

Ekran görüntüsü testi, sitenizdeki belirli konumlardaki regresyonları tespit etmenize de yardımcı olur. kod tabanınız içindir.

Örneklerimiz, ekran görüntüsü testi için Roborazzi'yi kullanır:

  1. Proje ve uygulama build.gradle dosyalarınızı kullanılacak şekilde yapılandırın Roborazzi.
  2. Uygulamanızdaki her ekran için bir ekran görüntüsü testi oluşturun. Örneğin, ComposeStarter örneğinde GreetingScreen için bir test aşağıdaki örnekte görüldüğü gibi uygulandı: GreetingScreenTest:
@RunWith(ParameterizedRobolectricTestRunner::class)
class GreetingScreenTest(override val device: WearDevice) : WearScreenshotTest() {
    override val tolerance = 0.02f

    @Test
    fun greetingScreenTest() = runTest {
        AppScaffold(
            timeText = { ResponsiveTimeText(timeSource = FixedTimeSource) }
        ) {
            GreetingScreen(greetingName = "screenshot", onShowList = {})
        }
    }

    companion object {
        @JvmStatic
        @ParameterizedRobolectricTestRunner.Parameters
        fun devices() = WearDevice.entries
    }
}

Dikkat edilmesi gereken bazı önemli noktalar:

  • FixedTimeSource, TimeText öğesinin şu işlemleri yapmadığı durumlarda ekran görüntüleri oluşturmanıza olanak tanır: ve istemeden testlerin başarısız olmasına yol açabilir.
  • WearDevice.entries, en popüler Wear OS cihazların tanımlarını içerdiğinden testlerin, ekran boyutlarının temsili bir aralığında çalıştırılmasını sağlayın.

Altın görseller oluştur

Ekranlarınız için görüntü oluşturmak üzere bir terminalde aşağıdaki komutu çalıştırın:

./gradlew recordRoborazziDebug

Resimleri doğrulayın

Mevcut görüntülerdeki değişiklikleri doğrulamak için aşağıdaki komutu bir terminal:

./gradlew verifyRoborazziDebug

Ekran görüntüsü testinin tam bir örneği için ComposeStarter örneğine bakın.