Mengembangkan kartu untuk berbagai ukuran layar

Kartu 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 juga. Panduan ini memberikan rekomendasi untuk mencapai pengalaman pengguna ini.

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

Menyediakan pengalaman yang berbeda melalui titik henti sementara

Tata letak dari library ProtoLayout Material bersifat responsif dan menangani penempatan dan visibilitas elemen yang benar. Namun, dalam beberapa kasus, Anda mungkin ingin memvariasikan jumlah elemen yang terlihat untuk mendapatkan hasil terbaik. Misalnya, Anda mungkin menginginkan 3 tombol di layar yang lebih kecil, dan 5 tombol di layar yang lebih besar.

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

materialScope(this, requestParams.deviceConfiguration) {
    // ...
    val isLargeScreen = deviceConfiguration.screenWidthDp >= 225
    primaryLayout(
        mainSlot = {
            buttonGroup {
                buttonGroupItem { button1 }
                buttonGroupItem { button2 }
                buttonGroupItem { button3 }
                if (isLargeScreen) {
                    buttonGroupItem { button4 }
                    buttonGroupItem { button5 }
                }
            }
        }
    )
}
Tile.kt

Panduan desain mengilustrasikan peluang tambahan.

Menguji kartu di berbagai ukuran layar menggunakan Pratinjau

Penting untuk menguji tata letak Anda pada berbagai ukuran layar. Gunakan anotasi Pratinjau Petak, bersama dengan class TilePreviewHelper dan TilePreviewData:

@Preview(device = WearDevices.LARGE_ROUND)
fun smallPreview(context: Context) = TilePreviewData {
    TilePreviewHelper.singleTimelineEntryTileBuilder(
        materialScope(context, it.deviceConfiguration) {
            myAdaptiveLayout() // varies the layout depending on the size of the screen
        }
    )
        .build()
}
Tile.kt

Hal ini memungkinkan Anda melihat pratinjau tata letak Kartu secara langsung di dalam Android Studio.

Untuk contoh lengkap, lihat contoh kartu timer di GitHub.