Mengembangkan aplikasi untuk berbagai ukuran layar

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 komponen Text 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 header Text 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.

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.

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:

1. Konfigurasi file project dan aplikasi build.gradle Anda untuk menggunakan Roborazzi.
2. Buat pengujian screenshot untuk setiap layar yang Anda miliki di aplikasi. Misalnya, dalam contoh ComposeStarter, pengujian untuk GreetingScreen diterapkan seperti yang terlihat di GreetingScreenTest:

@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 dengan TimeText 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.