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

Uygulamanız, mümkün olduğunda ek alandan yararlanarak her boyuttaki Wear OS cihazlarda iyi çalışmalı ve küçük ekranlarda da iyi görünmeye devam etmelidir. 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ılavuzunu okuyun.

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

Düzenlerde yüzdeye dayalı kenar boşlukları bulunmalıdır. Compose varsayılan olarak mutlak değerlerde çalıştığından, aşağıdaki özelliklere sahip Horology Kitaplığı'ndaki bileşenleri kullanın:

• Yatay kenar boşlukları, cihazın ekran boyutunun belirli bir yüzdesine göre doğru şekilde ayarlanır.
• Üst ve alt boşluklar doğru ayarlandı. Bu durum, önerilen üst ve alt boşluklar kullanılan bileşenlere bağlı olduğundan bazı zorluklara yol açar. Örneğin, Chip bir listede kullanıldığında Text bileşeninden farklı bir boşluk içermelidir.
• TimeText kenar boşlukları doğru ayarlandı.

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

import com.google.android.horologist.compose.layout.ScalingLazyColumn

val columnState = rememberResponsiveColumnState(
    contentPadding = ScalingLazyColumnDefaults.padding(
        first = ItemType.Text,
        last = ItemType.SingleButton
    )
)

ScreenScaffold(scrollState = columnState) {
    ScalingLazyColumn(
        columnState = columnState,
        modifier = Modifier.fillMaxSize()
    ) {
        item {
            ResponsiveListHeader(contentPadding = firstItemPadding()) {
                Text(text = "Header")
            }
        }
        // ... other items
        item {
            Button(...)
        }
    }
}

Bu örnekte ayrıca ScreenScaffold]3 ve AppScaffold gösterilmektedir. Bunlar, doğru kaydırma davranışının ve TimeText konumlandırmasının sağlanması için Uygulama ile bağımsız ekranlar (gezinme rotaları) arasında koordinasyon sağlar.

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

• Doğru dolgunun belirlenmesi için ilk ve son ItemType spesifikasyonu.
• Text başlıklarının dolgu olmaması gerektiğinden, listedeki ilk öğe için ResponsiveListHeader kullanımı.

Tüm spesifikasyonları Figma tasarım kitlerinde bulabilirsiniz. Daha fazla ayrıntı ve örnek için aşağıdaki makaleleri inceleyin:

• Horology kitaplığı, Wear OS için optimize edilmiş ve farklılaştırılmış uygulamalar oluşturmaya yardımcı olacak bileşenler sağlar.
• ComposeStarter örneği - bu kılavuzda özetlenen ilkeleri gösteren bir örnek.
• JetCaster örneği: Horology kitaplığını kullanarak farklı ekran boyutlarıyla çalışacak bir uygulama geliştirmenin daha karmaşık bir örneği.

Uygulamanızda kaydırma düzenlerini kullanma

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

İ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şenine aşağıdakiler eklenir:

• Varsayılan olarak kaydırılır.
• Yüzdeye dayalı kâr marjlarını düzeltin.
• Daha fazla dokunma hedefi sağlamak için alan izin verdiğinde genişliklerini ayarlayan düğmeler.

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

Bazı ekranlar, kaydırılmayan düzenlere uygun olabilir. Örneğin, medya uygulamalarındaki ana oynatıcı ekranı ve fitness uygulamasındaki antrenman ekranı verilebilir.

Bu durumlarda, Figma tasarım kitlerinde sağlanan standart kılavuza bakın ve doğru kenar boşluklarını kullanarak ekranın boyutuna duyarlı bir tasarım uygulayın.

Kesme noktalarıyla farklı deneyimler sunun

Daha büyük ekranlarla, ek içerik ve özellikler sunabilirsiniz. Bu tür farklılaştırılmış bir deneyim uygulamak için ekran boyutu ayrılma noktalarını kullanın ve ekran boyutu 225 dp'yi aştığında farklı bir düzen gösterin:

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ızın boyutlandırmanın ekstrem yönlerine (örneğin, en küçük ekranla eşlenmiş en büyük yazı tipi) nasıl göründüğü.
• Farklılaştırılmış deneyiminizin ayrılma noktalarında nasıl davrandığı.

Önizlemeleri, uygulamanızdaki tüm ekranlarda WearPreviewDevices ve WearPreviewFontScales kullanarak uygulayın.

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

Ekran görüntüsü testi

Ekran görüntüsü testleri, önizleme testinin ötesinde bir dizi mevcut donanım boyutuyla karşılaştırmalı olarak test yapmanıza olanak tanır. Bu özellik, özellikle bu cihazlara hemen erişilemediğinde faydalıdır ve sorunun diğer ekran boyutlarında görünmediği durumlar için geçerlidir.

Ekran görüntüsü testi, kod tabanınızdaki belirli konumlardaki regresyonları belirlemenize de yardımcı olur.

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

1. Proje ve uygulama build.gradle dosyalarınızı Roborazzi kullanacak şekilde yapılandırın.
2. Uygulamanızdaki her ekran için bir ekran görüntüsü testi oluşturun. Örneğin, ComposeStarter örneğinde GreetingScreen testi GreetingScreenTest konumunda görüldüğü gibi uygulanır:

@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 değişmediği ve yanlışlıkla testlerin başarısız olmasına neden olan ekran görüntüleri oluşturmanıza olanak tanır.
• WearDevice.entries, testlerin temsili bir ekran boyutu aralığında çalıştırılması için en popüler Wear OS cihazların tanımlarını içerir.

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 terminalde çalıştırın:

./gradlew verifyRoborazziDebug

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