Mengembangkan aplikasi untuk berbagai ukuran layar

Tetap teratur dengan koleksi Simpan dan kategorikan konten berdasarkan preferensi Anda.

Aplikasi Anda harus berfungsi dengan baik di perangkat Wear OS dari 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-prinsip desain untuk tata letak adaptif, baca panduan desain.

Membuat tata letak responsif menggunakan Material 3

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

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

Contoh ini juga menunjukkan ScreenScaffold dan AppScaffold. Hal ini mengoordinasikan antara Aplikasi dan setiap layar (rute navigasi) untuk memastikan perilaku scroll dan pemosisi TimeText yang benar.

Untuk padding atas dan bawah, perhatikan juga hal berikut:

• Spesifikasi ItemType pertama dan terakhir, untuk menentukan padding yang benar.
• Penggunaan ListHeader untuk item pertama dalam daftar, karena header Text tidak boleh memiliki padding.

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

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

Menggunakan tata letak scroll di aplikasi

Gunakan tata letak scroll, seperti yang ditunjukkan sebelumnya di halaman ini, sebagai pilihan default saat menerapkan 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.

Dialog

Dialog juga harus dapat di-scroll, kecuali jika ada alasan yang sangat baik 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 non-scroll

Beberapa layar mungkin masih cocok untuk tata letak non-scroll. Beberapa contoh mencakup layar pemutar utama di aplikasi media dan layar olahraga di aplikasi kebugaran.

Dalam hal ini, lihat panduan kanonis yang diberikan 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 pengalaman yang terdiferensiasi semacam 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.
    }
    // ...
List.kt

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 disambungkan dengan layar terkecil.
• Perilaku pengalaman yang berbeda di seluruh titik henti sementara.

Pastikan Anda menerapkan pratinjau menggunakan WearPreviewDevices dan WearPreviewFontScales untuk semua layar di aplikasi Anda.

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

Pengujian screenshot

Selain pengujian pratinjau, pengujian screenshot memungkinkan Anda menguji terhadap 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 lainnya.

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

Contoh kami menggunakan Roborazzi untuk pengujian screenshot:

1. Konfigurasikan file build.gradle project dan aplikasi untuk menggunakan Roborazzi.
2. Buat pengujian screenshot untuk setiap layar yang Anda miliki di aplikasi. Misalnya, dalam contoh ComposeStarter, pengujian untuk GreetingScreen diimplementasikan seperti yang terlihat di GreetingScreenTest:

@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
    }
}

Beberapa poin penting yang perlu diperhatikan:

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

Membuat golden image

Untuk membuat gambar layar, jalankan perintah berikut di terminal:

./gradlew recordRoborazziDebug

Memverifikasi gambar

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

./gradlew verifyRoborazziDebug

Untuk contoh lengkap pengujian screenshot, lihat contoh ComposeStarter.