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

Uygulamanız her boyuttaki Wear OS cihazda iyi çalışmalı, varsa ek alandan yararlanmalı ve küçük ekranlarda da harika görünmelidir. 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 edinmek için tasarım kılavuzunu okuyun.

Material 3 ile duyarlı düzenler oluşturma

Düzenlerde yüzdeye dayalı kenar boşlukları kullanılmalıdır. Wear Compose Material 3'te, ScreenScaffold, yüzdeye dayalı dolguyu otomatik olarak hesaplar ve contentPadding değerini içerik lambda'sına sağlar. Bu contentPadding parametresini TransformingLazyColumn öğesine iletin.

Aşağıdaki kod snippet'i, çeşitli Wear OS ekran boyutlarında mükemmel 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,
                )
            }
        }
    }
}

Bu örnekte ScreenScaffold ve AppScaffold de gösterilmektedir. Bunlar, 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 göz önünde bulundurun:

  • Modifier.minimumVerticalContentPadding (ör. ListHeaderDefaults.minimumTopListContentPadding ve ButtonDefaults.minimumVerticalListContentPadding) kullanımı, bu öğeler listenin kenarında göründüğünde TransformingLazyColumn öğesinin en azından önerilen üst ve alt dolguyu kullanmasını sağlar.
  • Listedeki ilk öğe için düz bir Text composable yerine 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ı olan yardımcılar sağlar.
  • ComposeStarter örneği: Bu kılavuzda açıklanan ilkeleri gösteren bir örnek.
  • JetCaster örneği: Horologist kitaplığını kullanarak farklı ekran boyutlarında çalışacak bir uygulama oluşturmanın daha karmaşık bir örneğidir.

Uygulamanızda kaydırılabilir düzenler kullanma

Ekranlarınızı uygularken varsayılan seçenek olarak bu sayfanın önceki bölümlerinde gösterilen kaydırılabilir 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.

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

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

İletişim kutuları

İletiş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, kaydırılamayan düzenler gerektirebilir.

Bazı ekranlar, kaydırılmayan düzenler için daha uygun olabilir. Medya uygulamasındaki ana oynatıcı ekranı ve fitness uygulamasındaki antrenman ekranı buna örnek olarak verilebilir.

Bu gibi durumlarda, Figma tasarım kitlerinde sağlanan standart kılavuzlara bakın ve doğru kenar boşluklarını kullanarak ekran 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 deneyim 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.
    }
    // ...

Tasarım kılavuzu, bu fırsatların daha fazlasını gösterir.

Ö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 cihazları hem de yazı tipi ölçeklendirme önizleme tanımlarını kullanın:

  • Ekranlarınızın boyutlandırma sınırları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 önizlemeleri uyguladığınızdan emin olun. Wear OS önizlemelerini, özel donanım özelliklerini ve kaydırılan listeleri önizlemeyi yapılandırma 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()
}

Ekran görüntüsü testi

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

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

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

  1. Roborazzi'yi kullanmak için projenizi 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, aşağıdaki kodda liste içeren bir ekran için ekran görüntüsü testi gösterilmektedir:
@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
    }
}

Dikkat edilmesi gereken bazı önemli noktalar:

  • WearDevice.entries, en popüler Wear OS cihazların tanımlarını içerir. Böylece testler, temsili bir ekran boyutu aralığında çalıştırılır.

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

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

./gradlew recordRoborazziDebug

Resimleri doğrulama

Mevcut görüntülerde yapılan değişiklikleri doğrulamak için terminalde aşağıdaki komutu çalıştırın:

./gradlew verifyRoborazziDebug

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