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

Koleksiyonlar ile düzeninizi koruyun İçeriği tercihlerinize göre kaydedin ve kategorilere ayırın.

Uygulamanız, mevcut olduğunda ek alandan yararlanarak tüm boyutlardaki Wear OS cihazlarda iyi çalışmalı ve küçük ekranlarda da iyi görünmelidir. Bu kılavuzda, bu kullanıcı deneyimine ulaşmak için öneriler sunulmaktadır.

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

Material 3'ü kullanarak duyarlı düzenler oluşturma

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

val columnState = rememberTransformingLazyColumnState()
val contentPadding = rememberResponsiveColumnPadding(
    first = ColumnItemType.ListHeader,
    last = ColumnItemType.Button,
)
val transformationSpec = rememberTransformationSpec()
ScreenScaffold(
    scrollState = columnState,
    contentPadding = contentPadding
) { contentPadding ->
    TransformingLazyColumn(
        state = columnState,
        contentPadding = contentPadding
    ) {
        item {
            ListHeader(
                modifier = Modifier.fillMaxWidth().transformedHeight(this, transformationSpec),
                transformation = SurfaceTransformation(transformationSpec)
            ) {
                Text(text = "Header")
            }
        }
        // ... other items
        item {
            Button(
                modifier = Modifier.fillMaxWidth().transformedHeight(this, transformationSpec),
                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 de gösterilmektedir. Bu öğeler, doğru kaydırma davranışını ve TimeText konumlandırmayı sağlamak için uygulama ile ayrı ekranlar (gezinme rotaları) arasında koordinasyon sağlar.

Üst ve alt dolgu için aşağıdakileri de unutmayın:

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

Tam özellikleri Figma tasarım kitlerinde bulabilirsiniz. Daha fazla bilgi ve örnek için:

• Horologist kitaplığı: Wear OS için optimize edilmiş ve farklılaştırılmış uygulamalar oluşturmanıza yardımcı olacak yardımcılar sağlar.
• Bu kılavuzda açıklanan ilkeleri gösteren bir örnek olan ComposeStarter örneği.
• JetCaster örneği: Horologist kitaplığını kullanarak farklı ekran boyutlarıyla çalışacak bir uygulama oluşturmayla ilgili daha karmaşık bir örnek.

Uygulamanızda kaydırmalı düzenler kullanma

Ekranlarınızı uygularken varsayılan seçenek olarak bu sayfanın önceki bölümlerinde gösterilen kaydırmalı bir düzen 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çeklendirmesinin 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ı olup içerik görüntü alanı yüksekliğini aşarsa varsayılan olarak kaydırılabilir.

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

Bazı ekranlar kaydırmayan düzenlere uygun olmaya devam edebilir. Bir medya uygulamasındaki ana oynatıcı ekranı ve bir fitness uygulamasındaki egzersiz ekranı buna örnek gösterilebilir.

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

Kesme noktaları aracılığıyla farklı deneyimler sunma

Daha büyük ekranlarda ek içerik ve özellikler sunabilirsiniz. Bu tür farklılaştırılmış bir 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ırsatlardan daha fazlası gösterilmektedir.

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

Önizleme oluşturma, çeşitli Wear OS ekran boyutları için geliştirme yapmanıza 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 uç noktalarında nasıl göründüğü (ör. en büyük yazı tipi en küçük ekranla birlikte).
• Farklılaştırılmış deneyiminizin, kesme noktalarında nasıl davrandığı.

Uygulamanızdaki tüm ekranlar için WearPreviewDevices ve WearPreviewFontScales kullanarak önizlemeleri uyguladığınızdan emin olun.

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

Ekran görüntüsü testi

Önizleme testinin ötesinde ekran görüntüsü testi, mevcut donanım boyutları arasında test yapmanıza olanak tanır. Bu, özellikle söz konusu cihazlara hemen erişemediğiniz ve sorunun diğer ekran boyutlarında ortaya çıkmadığı durumlarda kullanışlıdır.

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

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

1. Roborazzi'yi kullanacak şekilde proje ve uygulama build.gradle dosyalarınızı 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 için bir test uygulanmıştır. Bu test GreetingScreenTest'te gösterilmiştir:

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

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

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

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 renkli resimler oluşturma

Ekranlarınız için resim oluşturmak üzere bir 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 bir 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.