Aplikasi Anda akan berfungsi dengan baik di perangkat Wear OS dalam 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 Horologist
Tata letak harus memiliki margin berbasis persentase. Karena Compose bekerja secara default dalam nilai absolut, gunakan komponen dari Library Horologist, yang memiliki fitur berikut:
- Margin horizontal disetel dengan benar berdasarkan persentase ukuran layar perangkat.
- Spasi atas dan bawah disetel dengan benar. Hal ini menimbulkan tantangan tertentu
karena jarak atas dan bawah yang direkomendasikan dapat bergantung pada komponen yang
digunakan. Misalnya,
Chip
harus memiliki spasi yang berbeda dengan komponenText
saat digunakan dalam daftar. TimeText
margin ditetapkan dengan benar.
Cuplikan kode berikut menggunakan tata letak
ScalingLazyColumn
versi Horologist untuk membuat konten yang terlihat bagus di berbagai
ukuran layar Wear OS:
import com.google.android.horologist.compose.layout.ScalingLazyColumn
val columnState = rememberResponsiveColumnState(
contentPadding = ScalingLazyColumnDefaults.padding(
first = ItemType.Text,
last = ItemType.SingleButton
)
)
ScreenScaffold(scrollState = columnState) {
ScalingLazyColumn(
columnState = columnState,
modifier = Modifier.fillMaxSize()
) {
item {
ResponsiveListHeader(contentPadding = firstItemPadding()) {
Text(text = "Header")
}
}
// ... other items
item {
Button(...)
}
}
}
Contoh ini juga menunjukkan ScreenScaffold
]3 dan AppScaffold
.
Koordinat antara Aplikasi dan setiap layar
(rute navigasi) untuk memastikan perilaku scroll dan
pemosisian TimeText
yang benar.
Untuk padding atas dan bawah, perhatikan juga hal berikut:
- Spesifikasi
ItemType
pertama dan terakhir, untuk menentukan padding yang tepat. - Penggunaan
ResponsiveListHeader
untuk item pertama dalam daftar, karena headerText
tidak boleh memiliki padding.
Spesifikasi lengkap dapat ditemukan di Kit desain Figma. Untuk mengetahui detail dan contoh selengkapnya, lihat:
- Library Horologist - menyediakan komponen untuk membantu membangun aplikasi yang dioptimalkan dan terdiferensiasi untuk Wear OS.
- Contoh ComposeStarter - contoh yang menunjukkan prinsip-prinsip yang diuraikan dalam panduan ini.
- Contoh JetCaster - contoh yang lebih kompleks terkait pembuatan aplikasi agar dapat digunakan dengan berbagai ukuran layar, menggunakan library Horologist.
Menggunakan tata letak scroll di aplikasi
Gunakan tata letak scroll, seperti yang ditunjukkan sebelumnya di halaman ini, sebagai pilihan default saat menerapkan layar Anda. Hal ini memungkinkan pengguna menjangkau komponen aplikasi terlepas dari preferensi tampilan atau ukuran layar perangkat Wear OS.
![Pengaruh berbagai ukuran perangkat dan penskalaan font](https://developer.android.google.cn/static/images/wear/screenshot-test.png?hl=id)
Pengaruh berbagai ukuran perangkat dan penskalaan font.
Dialog
Dialog juga harus dapat di-scroll, kecuali jika ada alasan bagus untuk tidak melakukannya.
Komponen ResponsiveDialog
, yang disediakan oleh Horologist, menambahkan
hal berikut:
- Men-scroll secara default.
- Margin berbasis persentase yang benar.
- Tombol yang menyesuaikan lebarnya jika ruang memungkinkan, untuk meningkatkan target ketuk.
![Perilaku dialog adaptif di Horologist](https://developer.android.google.cn/static/images/wear/adaptive-dialogs.png?hl=id)
Dialog responsif, menyediakan scroll secara default dan tombol yang beradaptasi dengan ruang yang tersedia.
Layar kustom mungkin memerlukan tata letak non-scroll
Beberapa layar mungkin masih cocok dengan tata letak non-scroll. Beberapa contoh mencakup layar pemutar utama di aplikasi media dan layar olahraga di aplikasi kebugaran.
Dalam kasus ini, lihat panduan kanonis yang disediakan dalam Kit desain Figma, dan terapkan desain yang responsif terhadap ukuran layar, menggunakan margin yang benar.
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:
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:
- Tampilan layar Anda pada ukuran ekstrem, misalnya font terbesar yang 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.
@WearPreviewDevices
@WearPreviewFontScales
@Composable
fun ListScreenPreview() {
ListScreen()
}
Pengujian screenshot
Selain pengujian pratinjau, pengujian screenshot memungkinkan Anda melakukan pengujian terhadap berbagai ukuran hardware yang ada. Hal ini sangat berguna jika perangkat tersebut mungkin tidak langsung tersedia untuk Anda, dan masalahnya mungkin tidak muncul di 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
Anda untuk menggunakan Roborazzi. - Buat pengujian screenshot untuk setiap layar yang Anda miliki di aplikasi. Misalnya,
dalam contoh ComposeStarter, pengujian untuk
GreetingScreen
diterapkan seperti yang terlihat diGreetingScreenTest
:
@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 denganTimeText
yang tidak bervariasi dan secara tidak sengaja menyebabkan pengujian gagal.WearDevice.entries
berisi definisi untuk sebagian besar perangkat Wear OS populer sehingga 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.