Mengembangkan aplikasi untuk berbagai ukuran layar

Aplikasi Anda harus berfungsi dengan baik di perangkat Wear OS dalam semua ukuran, memanfaatkan ruang tambahan jika tersedia, dan tetap terlihat bagus di layar yang lebih kecil. Panduan ini memberikan rekomendasi untuk mencapai pengalaman pengguna ini.

Untuk mempelajari lebih lanjut prinsip desain tata letak adaptif, baca panduan desain.

Membangun tata letak responsif menggunakan Material 3

Tata letak harus memiliki margin berbasis persentase. Di Wear Compose Material 3, ScreenScaffold menghitung padding berbasis persentase secara otomatis dan menyediakan contentPadding ke lambda kontennya; teruskan parameter contentPadding ini ke TransformingLazyColumn.

Cuplikan kode berikut menggunakan komponen TransformingLazyColumn untuk membuat konten yang terlihat bagus di berbagai ukuran layar Wear OS:

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,
                )
            }
        }
    }
}

Contoh ini juga menunjukkan ScreenScaffold dan AppScaffold. Komponen ini berkoordinasi antara Aplikasi dan setiap layar (rute navigasi) untuk memastikan perilaku scroll dan pemosisian TimeText yang benar.

Untuk padding atas dan bawah, perhatikan juga hal berikut:

  • Penggunaan Modifier.minimumVerticalContentPadding (seperti ListHeaderDefaults.minimumTopListContentPadding dan ButtonDefaults.minimumVerticalListContentPadding), sehingga TransformingLazyColumn menggunakan setidaknya padding atas dan bawah yang direkomendasikan saat item tersebut muncul di tepi daftar.
  • Penggunaan ListHeader untuk item pertama dalam daftar, bukan composable Text biasa.

Spesifikasi lengkap dapat ditemukan di kit desain Figma. Untuk mengetahui detail dan contoh selengkapnya, lihat:

  • Library Horologist - menyediakan helper untuk membantu membangun aplikasi yang dioptimalkan dan berbeda untuk Wear OS.
  • Contoh ComposeStarter - contoh yang menunjukkan prinsip yang diuraikan dalam panduan ini.
  • Contoh JetCaster - contoh yang lebih kompleks dalam membangun aplikasi agar berfungsi dengan berbagai ukuran layar, menggunakan library Horologist.

Menggunakan tata letak scroll di aplikasi Anda

Gunakan tata letak scroll, seperti yang ditunjukkan sebelumnya di halaman ini, sebagai pilihan default saat mengimplementasikan layar. Hal ini memungkinkan pengguna menjangkau komponen aplikasi Anda, terlepas dari preferensi tampilan atau ukuran layar perangkat Wear OS.

Pengaruh berbagai ukuran perangkat dan penskalaan font

Pengaruh berbagai ukuran perangkat dan penskalaan font.

Dialog

Dialog juga harus dapat di-scroll, kecuali jika ada alasan yang sangat kuat untuk tidak melakukannya. Komponen AlertDialog bersifat responsif dan dapat di-scroll secara default jika konten melebihi tinggi area pandang.

Layar kustom mungkin memerlukan tata letak yang tidak dapat di-scroll

Beberapa layar mungkin masih cocok untuk tata letak yang tidak dapat di-scroll. Beberapa contohnya mencakup layar pemutar utama di aplikasi media dan layar olahraga di aplikasi kebugaran.

Dalam kasus ini, lihat panduan kanonis yang disediakan dalam kit desain Figma, dan terapkan desain yang responsif terhadap ukuran layar, menggunakan margin yang benar.

Memberikan pengalaman yang berbeda melalui titik henti sementara

Dengan layar yang lebih besar, Anda dapat memperkenalkan konten dan fitur tambahan. Untuk menerapkan jenis pengalaman yang berbeda ini, gunakan titik henti sementara ukuran layar, yang menampilkan tata letak yang berbeda saat ukuran layar melebihi 225 dp:

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

Panduan desain mengilustrasikan lebih banyak peluang ini.

Menguji kombinasi ukuran layar dan font menggunakan pratinjau

Pratinjau Compose membantu Anda mengembangkan aplikasi untuk berbagai ukuran layar Wear OS. Gunakan definisi pratinjau perangkat dan penskalaan font untuk melihat hal berikut:

  • Tampilan layar Anda pada ukuran ekstrem, misalnya, font terbesar yang dipasangkan dengan layar terkecil.
  • Cara pengalaman yang berbeda berperilaku di seluruh titik henti sementara.

Pastikan Anda menerapkan pratinjau menggunakan WearPreviewDevices dan WearPreviewFontScales untuk semua layar di aplikasi Anda. Untuk mengetahui detail lengkap tentang cara mengonfigurasi pratinjau Wear OS, spesifikasi hardware kustom, dan melihat pratinjau daftar yang di-scroll, lihat Melihat pratinjau UI di Compose untuk Wear OS.

@WearPreviewDevices
@WearPreviewFontScales
@Composable
fun ComposeListPreview() {
    ComposeList()
}

Pengujian screenshot

Selain pengujian pratinjau, pengujian screenshot memungkinkan Anda menguji berbagai ukuran hardware yang ada. Hal ini sangat berguna jika perangkat tersebut mungkin tidak langsung tersedia untuk Anda, dan masalahnya mungkin tidak muncul di ukuran layar lain.

Pengujian screenshot juga membantu Anda mengidentifikasi regresi di lokasi tertentu dalam codebase Anda.

Contoh kami menggunakan Roborazzi untuk pengujian screenshot:

  1. Konfigurasi file project dan app build.gradle untuk menggunakan Roborazzi.
  2. Buat pengujian screenshot untuk setiap layar yang Anda miliki di aplikasi. Misalnya, kode berikut menunjukkan pengujian screenshot untuk layar yang berisi daftar:
@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
    }
}

Beberapa poin penting yang perlu diperhatikan:

  • WearDevice.entries berisi definisi untuk perangkat Wear OS paling populer sehingga pengujian dijalankan pada berbagai ukuran layar yang representatif.

Membuat golden image

Untuk membuat gambar untuk layar, jalankan perintah berikut di terminal:

./gradlew recordRoborazziDebug

Memverifikasi gambar

Untuk memverifikasi perubahan terhadap image yang ada, jalankan perintah berikut di terminal:

./gradlew verifyRoborazziDebug

Untuk contoh lengkap pengujian screenshot, lihat contoh ComposeStarter.