Mengembangkan kartu untuk berbagai ukuran layar

Kartu aplikasi Anda akan berfungsi dengan baik di semua ukuran perangkat Wear OS, dengan memanfaatkan ruang tambahan jika tersedia, dan masih terlihat bagus di layar juga. Panduan ini memberikan rekomendasi untuk mencapai pengguna ini pengalaman yang lancar bagi developer.

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

Membangun tata letak responsif menggunakan ProtoLayout

Library ProtoLayout Material menyediakan tata letak standar untuk membantu Anda membangun kartu Anda. Tata letak ini sudah didesain untuk beradaptasi dengan layar ukuran.

Lihat Tata letak desain Figma, yang menunjukkan halaman kanonis tata letak yang tersedia dan cara membangun desain Anda dengan menggunakannya:

Sebaiknya gunakan PrimaryLayout atau EdgeContentLayout sebagai tingkat teratas untuk sebagian besar kasus penggunaan. Tetapkan perilaku responsif menggunakan setResponsiveContentInsetEnabled, misalnya:

PrimaryLayout.Builder(deviceParameters)
    .setResponsiveContentInsetEnabled(true)
    .setContent(
        // ...
    )
.build()

Memberikan pengalaman yang berbeda melalui titik henti sementara

Tata letak dari library ProtoLayout Material sudah responsif dan memperhatikan penempatan dan visibilitas elemen yang benar. Namun, dalam beberapa kasus Anda mungkin ingin memvariasikan jumlah elemen yang terlihat untuk hasil terbaik. Sebagai misalnya, Anda mungkin menginginkan 3 tombol pada layar yang lebih kecil, dan 5 pada layar yang lebih besar tampilan.

Untuk menerapkan pengalaman yang berbeda semacam ini, gunakan ukuran layar titik henti sementara. Untuk menampilkan tata letak yang berbeda saat ukuran layar melebihi 225 dp:

PrimaryLayout.Builder(deviceParameters)
    .setResponsiveContentInsetEnabled(true)
    .setContent(
        MultiButtonLayout.Builder()
            .addButtonContent(button1)
            .addButtonContent(button2)
            .addButtonContent(button3)
            .apply {
                if (deviceParameters.screenHeightDp >= 225) {
                    addButtonContent(button4)
                    addButtonContent(button5)
                }
            }
            .build()
    )
    .setPrimaryLabelTextContent(label)
    .setPrimaryChipContent(compactChip)
    .build()

Panduan desain mengilustrasikan peluang tambahan.

Menguji petak pada berbagai ukuran layar menggunakan Pratinjau

Penting untuk menguji tata letak Anda pada berbagai ukuran layar. Gunakan Anotasi Pratinjau Kartu, beserta TilePreviewHelper dan Class TilePreviewData:

@Preview(device = WearDevices.LARGE_ROUND)
fun smallPreview(context: Context) = TilePreviewData(
    onTileRequest = { request ->
        TilePreviewHelper.singleTimelineEntryTileBuilder(
            buildLayout()
        ).build()
    }
)

Hal ini memungkinkan Anda melihat pratinjau tata letak Kartu langsung dalam Android Studio. Tujuan contoh titik henti sementara sebelumnya menggambarkan cara tombol tambahan ditampilkan saat ruang layar memungkinkan, saat dipratinjau:

Tombol tambahan di layar yang lebih besar

Layar kecil dan besar yang menampilkan efek titik henti sementara

Untuk contoh lengkap, lihat contoh kartu media di GitHub.