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

Uygulamanız, Wear OS cihazlarda tüm boyutlarda iyi çalışmalı, mevcut olduğunda ek alandan yararlanmalı ve daha küçük ekranlarda da harika görünmelidir. Bu kılavuzda, bu kullanıcı deneyimini elde etmeye yönelik öneriler sunulmaktadır.

Uyarlanabilir düzenlerle ilgili tasarım ilkeleri hakkında daha fazla bilgi edinmek için tasarım kılavuzunu okuyun.

Material 3 kullanarak duyarlı düzenler oluşturma

Aşağıdaki kod snippet'i, çeşitli Wear OS ekran boyutlarında harika görünen içerikler oluşturmak için TransformingLazyColumn bileşenini kullanır:

val columnState = rememberTransformingLazyColumnState()
val transformationSpec = rememberTransformationSpec()
ScreenScaffold(
    scrollState = columnState
) { contentPadding ->
    TransformingLazyColumn(
        state = columnState,
        contentPadding = contentPadding
    ) {
        item {
            ListHeader(
                modifier = Modifier
                    .fillMaxWidth()
                    .transformedHeight(this, transformationSpec)
                    .minimumVerticalContentPadding(ListHeaderDefaults.minimumTopListContentPadding),
                transformation = SurfaceTransformation(transformationSpec)
            ) {
                Text(text = "Header")
            }
        }
        // ... other items
        item {
            Button(
                modifier = Modifier
                    .fillMaxWidth()
                    .transformedHeight(this, transformationSpec)
                    .minimumVerticalContentPadding(ButtonDefaults.minimumVerticalListContentPadding),
                transformation = SurfaceTransformation(transformationSpec),
                onClick = { /* ... */ },
                icon = {
                    Icon(
                        imageVector = Icons.Default.Build,
                        contentDescription = "build",
                    )
                },
            ) {
                Text(
                    text = "Build",
                    maxLines = 1,
                    overflow = TextOverflow.Ellipsis,
                )
            }
        }
    }
}
List.kt

Bu örnekte ScreenScaffold ve AppScaffold da gösterilmektedir. Bu koordinatlar, doğru kaydırma davranışı ve TimeText konumlandırması sağlamak için uygulama ile tek tek ekranlar (gezinme rotaları) arasında koordinasyon sağlar.

Üst ve alt dolgu için aşağıdakileri de göz önünde bulundurun:

• Doğru dolguyu belirlemek için ilk ve son ItemType spesifikasyonu.
• Text başlıklarında dolgu olmaması gerektiğinden listedeki ilk öğe için ListHeader kullanılması.

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

• Horologist kitaplığı: Wear OS için optimize edilmiş ve farklılaştırılmış uygulamalar oluşturmaya yardımcı olacak yardımcılar sağlar.
• ComposeStarter örneği: Bu kılavuzda belirtilen ilkeleri gösteren bir örnek.
• Farklı ekran boyutlarıyla çalışacak bir uygulama oluşturmayla ilgili daha karmaşık bir örnek olan JetCaster örneği (Horologist kitaplığı kullanılarak oluşturulmuştur).

Uygulamanızda kaydırma düzenleri kullanma

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

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

İletişim kutuları

Çok iyi bir neden olmadığı sürece iletişim kutuları da kaydırılabilir olmalıdır. AlertDialog bileşeni duyarlıdır ve içerik görüntü alanı yüksekliğini aşarsa varsayılan olarak kaydırılabilir.

Özel ekranlar için kaydırma içermeyen düzenler gerekebilir

Bazı ekranlar kaydırmasız düzenler için uygun olabilir. Örneğin, medya uygulamasındaki ana oynatıcı ekranı ve fitness uygulamasındaki egzersiz ekranı.

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

Kesme noktaları aracılığıyla farklılaştırılmış deneyimler sunma

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

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.
    }
    // ...
List.kt

Tasarım kılavuzunda bu fırsatların daha fazlası açıklanmaktadır.

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

Compose önizlemeleri, çeşitli Wear OS ekran boyutları için geliştirme yapmanıza yardımcı olur. Aşağıdakileri görmek için hem cihaz hem de yazı tipi ölçeklendirme önizleme tanımlarını kullanın:

• Ekranlarınızın boyutlandırmanın uç noktalarında (ör. en küçük ekranla eşleştirilmiş en büyük yazı tipi) nasıl göründüğü.
• Farklılaştırılmış deneyiminizin kesme noktalarında nasıl davrandığı.

Uygulamanızdaki tüm ekranlar için WearPreviewDevices ve WearPreviewFontScales kullanarak önizlemeler uyguladığınızdan emin olun. Wear OS önizlemelerini, özel donanım özelliklerini yapılandırma ve kaydırılmış listeleri önizleme hakkında ayrıntılı bilgi için Wear OS için Compose'da kullanıcı arayüzünüzü önizleme başlıklı makaleyi inceleyin.

@WearPreviewDevices
@WearPreviewFontScales
@Composable
fun ComposeListPreview() {
    ComposeList()
}
List.kt

Ekran görüntüsü testi

Ekran görüntüsü testi, önizleme testinin yanı sıra mevcut donanım boyutlarının birçoğuna karşı test yapmanıza olanak tanır. Bu özellik, özellikle söz konusu cihazlara hemen erişemediğiniz ve sorunun diğer ekran boyutlarında görünmediği durumlarda kullanışlıdır.

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

Örneklerimizde ekran görüntüsü testi için Roborazzi kullanılır:

1. Projenizi ve uygulama build.gradle dosyalarınızı Roborazzi'yi kullanacak şekilde yapılandırın.
2. Uygulamanızdaki her ekran için bir ekran görüntüsü testi oluşturun. Örneğin, aşağıdaki kod, liste içeren bir ekranın ekran görüntüsü testini gösterir:

@RunWith(ParameterizedRobolectricTestRunner::class)
class ComposeListScreenTest(
    override val device: WearDevice
) : WearScreenshotTest() {
    override val tolerance = 0.02f

    @Test
    fun myScreenTest() =
        runTest {
            AppScaffold {
                ComposeList()
            }
        }

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

Dikkat edilmesi gereken bazı önemli noktalar:

• WearDevice.entries, testlerin temsili bir ekran boyutu aralığında çalıştırılması için en popüler Wear OS cihazlarının tanımlarını içerir.

Altın görüntüler oluşturma

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

./gradlew recordRoborazziDebug

Resimleri doğrulama

Değişiklikleri mevcut resimlerle karşılaştırarak doğrulamak için terminalde aşağıdaki komutu çalıştırın:

./gradlew verifyRoborazziDebug

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