Mengembangkan aplikasi untuk berbagai ukuran layar

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 dengan Text 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 = { }
            )
        }
    }
}
List.kt

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 Header Text 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

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

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.
    }
    // ...
List.kt

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()
}
List.kt

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:

  1. Konfigurasi file project dan aplikasi build.gradle yang akan digunakan Roborazzi.
  2. Buat pengujian screenshot untuk setiap layar yang Anda miliki di aplikasi. Misalnya, dalam contoh ComposeStarter, pengujian untuk GreetingScreen adalah diterapkan seperti yang terlihat dalam 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 jika TimeText 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.