Aplikasi Anda harus bekerja dengan baik di semua ukuran perangkat Wear OS, dengan memanfaatkan ruang tambahan jika tersedia, dan masih terlihat bagus di layar yang lebih kecil. Panduan ini memberikan rekomendasi untuk mencapai pengalaman pengguna ini.
Untuk mempelajari lebih lanjut tentang prinsip-prinsip desain untuk tata letak adaptif, baca panduan desain.
Membangun tata letak responsif menggunakan Horologist
Tata letak harus memiliki margin berbasis persentase. Karena Compose berfungsi dengan dalam nilai absolut, gunakan komponen dari Library Horologist, yang memiliki fitur berikut:
- Margin horizontal disetel dengan benar berdasarkan persentase layar perangkat ukuran.
- Spasi atas dan bawah disetel dengan benar. Hal ini menghadirkan tantangan khusus
karena jarak atas dan bawah yang direkomendasikan
dapat bergantung pada komponen yang
data Misalnya,
Chip
harus memiliki spasi yang berbeda denganText
komponen saat digunakan dalam daftar. TimeText
margin ditetapkan dengan benar.
Cuplikan kode berikut menggunakan versi Horologist
Tata letak ScalingLazyColumn
untuk membuat konten yang terlihat bagus di berbagai
ukuran layar Wear OS:
val columnState = rememberResponsiveColumnState( contentPadding = ScalingLazyColumnDefaults.padding( first = ScalingLazyColumnDefaults.ItemType.Text, last = ScalingLazyColumnDefaults.ItemType.SingleButton ) ) ScreenScaffold(scrollState = columnState) { ScalingLazyColumn( columnState = columnState ) { item { ResponsiveListHeader(contentPadding = firstItemPadding()) { Text(text = "Header") } } // ... other items item { Button( imageVector = Icons.Default.Build, contentDescription = "Example Button", onClick = { } ) } } }
Contoh ini juga menunjukkan ScreenScaffold
dan AppScaffold
.
Koordinat antara Aplikasi dan layar individual
(rute navigasi) untuk memastikan perilaku scroll yang benar dan
Positioning TimeText
.
Untuk padding atas dan bawah, perhatikan juga hal berikut:
- Spesifikasi
ItemType
pertama dan terakhir, untuk menentukan padding. - Penggunaan
ResponsiveListHeader
untuk item pertama dalam daftar, karena HeaderText
tidak boleh memiliki padding.
Spesifikasi lengkap dapat ditemukan di Kit desain Figma. Untuk selengkapnya detail dan contoh, lihat:
- Library Horologist - menyediakan komponen untuk membantu membangun aplikasi yang dioptimalkan dan terdiferensiasi untuk Wear OS.
- Contoh ComposeStarter - contoh yang menunjukkan prinsip yang diuraikan dalam panduan ini.
- Contoh JetCaster - contoh yang lebih kompleks untuk membuat aplikasi untuk bekerja dengan ukuran layar yang berbeda, menggunakan library Horologist.
Menggunakan tata letak scroll di aplikasi
Gunakan tata letak scroll, seperti yang ditampilkan 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](https://developer.android.com/static/images/wear/screenshot-test.png?authuser=8&hl=id)
Pengaruh berbagai ukuran perangkat dan penskalaan font.
Dialog
Dialog juga harus dapat di-scroll, kecuali ada alasan bagus untuk tidak melakukannya.
Komponen ResponsiveDialog
, yang disediakan oleh Horologist, menambahkan
berikut ini:
- Men-scroll secara default.
- Margin berbasis persentase yang benar.
- Tombol yang menyesuaikan lebarnya di tempat yang memungkinkan, untuk memberikan target ketuk.
![Perilaku dialog adaptif di Horologist](https://developer.android.com/static/images/wear/adaptive-dialogs.png?authuser=8&hl=id)
Dialog responsif, menyediakan scroll secara default dan tombol yang beradaptasi ke ruang yang tersedia.
Layar kustom mungkin memerlukan tata letak non-scroll
Beberapa layar mungkin masih cocok dengan tata letak non-scroll. Beberapa contoh menampilkan layar pemutar utama di aplikasi media dan layar olahraga dalam aplikasi kebugaran.
Dalam kasus ini, lihat panduan kanonis yang diberikan di Kit desain Figma, dan terapkan desain yang responsif terhadap ukuran layar, menggunakan {i>margin<i} yang benar.
Memberikan pengalaman yang berbeda melalui titik henti sementara
Dengan layar yang lebih besar, Anda dapat menghadirkan konten dan fitur tambahan. Kepada terapkan pengalaman yang berbeda semacam ini, gunakan titik henti sementara ukuran layar, 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. } // ...
Panduan desain ini menggambarkan lebih banyak peluang ini.
Menguji kombinasi ukuran layar dan ukuran font menggunakan pratinjau
Pratinjau Compose membantu Anda mengembangkan aplikasi untuk berbagai ukuran layar Wear OS. Gunakan perangkat dan definisi pratinjau penskalaan font untuk melihat hal berikut:
- Bagaimana layar Anda melihat ukuran ekstrem, misalnya, ukuran {i>font<i} terbesar dipasangkan dengan layar terkecil.
- Bagaimana perilaku pengalaman Anda 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() }
Pengujian screenshot
Selain pengujian pratinjau, pengujian screenshot memungkinkan Anda melakukan pengujian terhadap berbagai ukuran perangkat keras yang ada. Ini sangat berguna ketika perangkat itu mungkin tidak segera tersedia untuk Anda, dan masalahnya mungkin tidak muncul dengan ukuran layar lainnya.
Pengujian screenshot juga membantu Anda mengidentifikasi regresi di lokasi tertentu dalam codebase Anda.
Contoh kami menggunakan Roborazzi untuk pengujian screenshot:
- Konfigurasi file project dan aplikasi
build.gradle
yang akan digunakan Roborazzi. - Buat pengujian screenshot untuk setiap layar yang Anda miliki di aplikasi. Misalnya,
dalam contoh ComposeStarter, pengujian untuk
GreetingScreen
adalah diterapkan seperti yang terlihat dalamGreetingScreenTest
:
@RunWith(ParameterizedRobolectricTestRunner::class)
class GreetingScreenTest(override val device: WearDevice) : WearScreenshotTest() {
override val tolerance = 0.02f
@Test
fun greetingScreenTest() = runTest {
AppScaffold(
timeText = { ResponsiveTimeText(timeSource = FixedTimeSource) }
) {
GreetingScreen(greetingName = "screenshot", onShowList = {})
}
}
companion object {
@JvmStatic
@ParameterizedRobolectricTestRunner.Parameters
fun devices() = WearDevice.entries
}
}
Beberapa hal penting yang perlu diperhatikan:
FixedTimeSource
memungkinkan Anda membuat screenshot jikaTimeText
tidak bervariasi dan secara tidak sengaja menyebabkan pengujian gagal.WearDevice.entries
berisi definisi untuk perangkat Wear OS yang paling populer sehingga bahwa pengujian dijalankan pada rentang ukuran layar yang representatif.
Buat gambar emas
Untuk membuat gambar bagi layar Anda, jalankan perintah berikut di terminal:
./gradlew recordRoborazziDebug
Verifikasi gambar
Untuk memverifikasi perubahan terhadap image yang ada, jalankan perintah berikut di terminal:
./gradlew verifyRoborazziDebug
Untuk contoh lengkap pengujian screenshot, lihat contoh ComposeStarter.