Kartu aplikasi Anda akan berfungsi dengan baik di perangkat Wear OS dengan berbagai ukuran, dengan memanfaatkan ruang tambahan jika tersedia, dan juga masih terlihat bagus di layar yang lebih kecil. Panduan ini memberikan rekomendasi untuk mencapai pengalaman pengguna ini.
Untuk mempelajari lebih lanjut prinsip-prinsip desain tata letak adaptif, baca panduan desain.
Membangun tata letak responsif menggunakan ProtoLayout
Library ProtoLayout Material menyediakan tata letak yang telah ditentukan sebelumnya untuk membantu Anda membuat kartu. Tata letak ini sudah didesain untuk beradaptasi dengan ukuran layar.
Lihat Tata letak desain Figma, yang menunjukkan tata letak kanonik yang tersedia dan cara membangun desain menggunakan tata letak tersebut:
Sebaiknya gunakan PrimaryLayout
atau EdgeContentLayout
sebagai tata letak
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
Dengan layar yang lebih besar, Anda dapat menghadirkan konten dan fitur tambahan. Untuk menerapkan pengalaman yang berbeda semacam ini, gunakan titik henti sementara ukuran layar, yang 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 class TilePreviewHelper
dan
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. Contoh titik henti sementara sebelumnya menggambarkan cara tombol tambahan ditampilkan saat ruang layar memungkinkan, saat dipratinjau:
Layar kecil dan besar yang menampilkan efek titik henti sementara
Untuk contoh lengkap, lihat contoh kartu media di GitHub.