Mengembangkan kartu untuk berbagai ukuran layar


Kartu aplikasi Anda harus berfungsi dengan baik di perangkat Wear OS dari semua ukuran, dengan 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 ProtoLayout

Library ProtoLayout Material menyediakan tata letak standar untuk membantu Anda mem-build kartu. Tata letak ini sudah dirancang untuk beradaptasi dengan ukuran layar.

Lihat tata letak desain Figma, yang menunjukkan tata letak kanonis yang tersedia dan cara membuat desain menggunakan tata letak tersebut:

Sebaiknya gunakan PrimaryLayout atau EdgeContentLayout sebagai tata letak tingkat atas 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 menjaga visibilitas dan penempatan elemen yang benar. Namun, dalam beberapa kasus, Anda mungkin ingin memvariasikan jumlah elemen yang terlihat untuk mendapatkan hasil terbaik. Misalnya, Anda mungkin ingin 3 tombol pada layar yang lebih kecil, dan 5 tombol pada layar yang lebih besar.

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

materialScope(context, deviceConfiguration) {
    primaryLayout(
        mainSlot = {
            buttonGroup {
                buttonGroupItem { button1 }
                buttonGroupItem { button2 }
                buttonGroupItem { button3 }
                if (deviceConfiguration.screenHeightDp >= 225) {
                    buttonGroupItem { button4 }
                    buttonGroupItem { button5 }
                }
            }
        }
    )
}

Panduan desain mengilustrasikan peluang tambahan.

Menguji kartu pada berbagai ukuran layar menggunakan Pratinjau

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

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

Tindakan ini memungkinkan Anda melihat pratinjau tata letak Kartu langsung di dalam Android Studio. Contoh titik henti sementara sebelumnya mengilustrasikan cara tombol tambahan ditampilkan jika ruang layar memungkinkan, saat melihat pratinjau:

Tombol tambahan di layar yang lebih besar

Tampilan kecil dan besar yang menampilkan efek titik henti sementara

Untuk contoh lengkap, lihat contoh kartu media di GitHub.