Compose untuk Codelab Wear OS

1. Pengantar

Compose untuk Wear OS memungkinkan Anda menerjemahkan pengetahuan yang telah Anda pelajari dalam membangun aplikasi dengan Jetpack Compose ke perangkat wearable.

Dengan dukungan bawaan untuk Desain Material, Compose untuk Wear OS menyederhanakan dan mempercepat pengembangan UI serta membantu Anda membuat aplikasi yang menarik dengan sedikit kode.

Untuk codelab ini, kami harap Anda telah memiliki pengetahuan tentang Compose, tetapi tentu tidak perlu menjadi pakar.

Kita akan menggunakan Horologist yang merupakan project open source yang dibuat menggunakan Jetpack Compose, yang membantu developer mempercepat pengembangan aplikasi.

Anda akan membuat beberapa composable khusus Wear (baik sederhana maupun kompleks), dan, di akhir, Anda dapat mulai menulis aplikasi untuk Wear OS. Mari kita mulai.

Yang akan Anda pelajari

• Persamaan/perbedaan antara pengalaman Anda sebelumnya dengan Compose
• Composable sederhana dan cara kerjanya di Wear OS
• Composable khusus Wear OS
• LazyColumn Wear OS (ScalingLazyColumn)
• Versi Scaffold Wear OS

Yang akan Anda bangun

Anda akan membangun aplikasi sederhana yang menampilkan daftar composable yang dapat di-scroll dan dioptimalkan untuk Wear OS.

Anda juga akan mendapatkan waktu teks lengkung di bagian atas, vignette, dan terakhir indikator scroll yang terhubung dengan sisi perangkat karena Anda akan menggunakan Scaffold.

Tampilannya akan terlihat seperti berikut setelah Anda menyelesaikan codelab:

Prasyarat

• Pemahaman dasar tentang pengembangan Android
• Pemahaman dasar tentang Kotlin
• Pengetahuan dasar tentang Compose

2. Mempersiapkan

Pada langkah ini, Anda akan menyiapkan lingkungan dan mendownload project awal.

Yang akan Anda butuhkan

• Android Studio versi stabil terbaru
• Perangkat atau emulator Wear OS (Pengguna baru? Berikut cara menyiapkannya.)

Mendownload kode

Jika sudah menginstal git, Anda dapat menjalankan perintah di bawah ini untuk meng-clone kode dari repositori ini. Untuk memeriksa apakah git sudah diinstal, ketik git --version di terminal atau command line dan pastikan git dijalankan dengan benar.

git clone https://github.com/android/codelab-compose-for-wear-os.git
cd compose-for-wear-os

Jika tidak memiliki git, Anda dapat mengklik tombol berikut untuk mendownload semua kode untuk codelab ini:

file_downloadDownload ZIP

Anda dapat menjalankan modul mana pun di Android Studio kapan saja dengan mengubah konfigurasi run di toolbar.

Membuka project di Android Studio

1. Di jendela Welcome to Android Studio, pilih Open an Existing Project
2. Pilih folder [Download Location]
3. Setelah Android Studio mengimpor project, uji apakah Anda dapat menjalankan modul start dan finished di emulator Wear OS atau perangkat fisik.
4. Modul start akan terlihat seperti screenshot di bawah ini. Di sinilah Anda akan melakukan semua pekerjaan Anda.

Mempelajari kode mulai

• build.gradle berisi konfigurasi aplikasi dasar. Kode ini mencakup dependensi yang diperlukan untuk membuat Aplikasi Wear OS Composable. Kita akan membahas persamaan dan perbedaan antara Jetpack Compose dan versi Wear OS.
• main > AndroidManifest.xml menyertakan elemen yang diperlukan untuk membuat aplikasi Wear OS. Aplikasi ini sama dengan aplikasi non-Compose dan mirip dengan aplikasi seluler sehingga kami tidak akan membahasnya kembali.
• Folder main > theme/ berisi file Color, Type, dan Theme yang digunakan oleh Compose untuk temanya.
• main > MainActivity.kt berisi boilerplate untuk membuat aplikasi dengan Compose. Kode ini juga berisi composable level atas (seperti Scaffold dan ScalingLazyList) untuk aplikasi.
• main > ReusableComponents.kt berisi fungsi untuk sebagian besar composable khusus Wear yang akan dibuat. Kita akan melakukan banyak hal dalam file ini.

3. Meninjau dependensi

Sebagian besar perubahan dependensi terkait Wear yang Anda buat akan berada di lapisan arsitektur atas (disorot merah di bawah).

Ini berarti banyak dependensi yang sudah Anda gunakan dengan Jetpack Compose tidak berubah saat menargetkan Wear OS. Misalnya, dependensi UI, Runtime, Compiler, dan Animasi akan tetap sama.

Namun, Anda harus menggunakan library Material, Foundation, dan Navigation Wear OS yang tepat. Library ini mungkin berbeda dengan library yang sebelumnya Anda gunakan.

Perbandingan di bawah ini akan membantu menjelaskan perbedaannya:

1. Developer dapat terus menggunakan library terkait material lainnya, seperti ripple material dan ikon material yang diperluas dengan library Material Wear Compose.

Buka build.gradle, telusuri "TODO: Review Dependencies" di modul start. (Langkah ini hanya untuk meninjau dependensi, Anda tidak akan menambahkan kode apa pun.)

start/build.gradle:

   def composeBom = platform(libs.androidx.compose.bom)

    // General compose dependencies
    implementation composeBom
    implementation libs.androidx.activity.compose
    implementation libs.compose.ui.tooling.preview

    implementation(libs.androidx.material.icons.extended)

    // Compose for Wear OS Dependencies
    implementation libs.wear.compose.material

    // Foundation is additive, so you can use the mobile version in your Wear OS app.
    implementation libs.wear.compose.foundation

    // Compose preview annotations for Wear OS.
    implementation(libs.androidx.compose.ui.tooling)

    debugImplementation libs.compose.ui.tooling
    debugImplementation libs.androidx.ui.test.manifest
    debugImplementation composeBom

Anda tentunya sudah paham tentang banyak dependensi Compose umum, jadi tidak perlu lagi membahasnya.

Mari beralih ke dependensi Wear OS.

Sama seperti yang diuraikan sebelumnya, hanya versi khusus material (androidx.wear.compose:compose-material) Wear OS yang disertakan. Artinya, Anda tidak akan melihat atau menyertakan androidx.compose.material:material dalam project Anda.

Perlu diketahui bahwa Anda dapat menggunakan library material lainnya dengan Wear Material. Kami sebenarnya melakukannya dalam codelab ini dengan menyertakan androidx.compose.material:material-icons-extended.

Terakhir, kami menyertakan library Wear foundation untuk Compose (androidx.wear.compose:compose-foundation). Library ini adalah tambahan, jadi Anda dapat menggunakannya dengan foundation standar yang sudah digunakan sebelumnya. Bahkan, Anda mungkin sudah mengetahui bahwa kami menyertakannya dalam dependensi compose umum.

Baiklah. Setelah memahami dependensi, mari lihat aplikasi utama.

4. Meninjau MainActivity

Kita akan mengerjakan semua pekerjaan di modul

start

. Jadi, pastikan setiap file yang Anda buka ada di dalamnya.

Mari kita mulai dengan membuka MainActivity di modul start.

Class yang cukup sederhana ini memperluas ComponentActivity dan menggunakan setContent { WearApp() } untuk membuat UI.

Berdasarkan pemahaman Anda tentang Compose, Anda seharusnya sudah tidak asing lagi dengan fitur ini. Kita hanya menyiapkan UI.

Scroll ke bawah ke fungsi composable WearApp(). Sebelum kita membahas kode itu sendiri, Anda akan melihat sekumpulan TODO yang tersebar di seluruh kode. Setiap TODO mewakili langkah-langkah dalam codelab ini. Untuk saat ini, Anda dapat mengabaikannya.

TODO tersebut akan terlihat seperti berikut:

Kode di fun WearApp():

WearAppTheme {
     /* *************************** Part 4: Wear OS Scaffold *************************** */
    // TODO (Start): Create a AppScaffold (Wear Version)

    // TODO: Swap to ScalingLazyColumnState
    val listState = rememberLazyListState()

    /* *************************** Part 4: Wear OS Scaffold *************************** */
    // TODO (Start): Create a ScreenScaffold (Wear Version)

    // Modifiers used by our Wear composables.
    val contentModifier = Modifier.fillMaxWidth().padding(bottom = 8.dp)
    val iconModifier = Modifier.size(24.dp).wrapContentSize(align = Alignment.Center)

    /* *************************** Part 3: ScalingLazyColumn *************************** */
    // TODO: Swap a ScalingLazyColumn (Wear's version of LazyColumn)
    LazyColumn(
        modifier = Modifier.fillMaxSize(),
        contentPadding = PaddingValues(
            top = 32.dp,
            start = 8.dp,
            end = 8.dp,
            bottom = 32.dp,
        ),
        verticalArrangement = Arrangement.Center,
        state = listState,
    ) {
        // TODO: Remove item; for beginning only.
        item { StartOnlyTextComposables() }

        /* ******************* Part 1: Simple composables ******************* */
        item { ButtonExample(contentModifier, iconModifier) }
        item { TextExample(contentModifier) }
        item { CardExample(contentModifier, iconModifier) }

        /* ********************* Part 2: Wear unique composables ********************* */
        item { ChipExample(contentModifier, iconModifier) }
        item { ToggleChipExample(contentModifier) }
        }

    // TODO (End): Create a ScreenScaffold (Wear Version)
    // TODO (End): Create a AppScaffold (Wear Version)
}

Kita mulai dengan menetapkan tema, WearAppTheme { }. Langkah ini sama persis seperti yang Anda tulis sebelumnya, yaitu, Anda menetapkan MaterialTheme dengan warna, tipografi, dan bentuk.

Namun, untuk Wear OS, sebaiknya gunakan bentuk Material Wear default yang sudah dioptimalkan untuk perangkat bulat. Jadi, jika Anda mempelajari theme/Theme.kt secara menyeluruh, Anda dapat melihat bahwa kami tidak mengganti bentuk.

Jika mau, Anda dapat membuka theme/Theme.kt untuk mempelajarinya lebih lanjut, tetapi sekali lagi, kondisinya akan sama dengan yang ada di ponsel.

Selanjutnya, kita membuat beberapa Pengubah untuk composable Wear yang akan kita bangun, sehingga kita tidak perlu berulang kali menentukannya. Umumnya, Anda akan memusatkan konten dan menambahkan beberapa padding.

Kemudian, kita membuat LazyColumn yang digunakan untuk membuat daftar scroll vertikal untuk sekumpulan item (seperti yang Anda lakukan sebelumnya).

Kode:

item { StartOnlyTextComposables() }

/* ******************* Part 1: Simple composables ******************* */
item { ButtonExample(contentModifier, iconModifier) }
item { TextExample(contentModifier) }
item { CardExample(contentModifier, iconModifier) }

/* ********************* Part 2: Wear unique composables ********************* */
item { ChipExample(contentModifier, iconModifier) }
item { ToggleChipExample(contentModifier) }

Untuk item itu sendiri, hanya StartOnlyTextComposables() yang menghasilkan UI. (Kita akan mengisi sisanya di sepanjang codelab ini.)

Fungsi ini sebenarnya ada di file ReusableComponents.kt yang akan kita lihat di bagian berikutnya.

Mari mulai menggunakan Compose untuk Wear OS.

5. Menambahkan Composable Sederhana

Kita akan mulai dengan tiga composable (Button, Text, dan Card) yang mungkin sudah Anda ketahui.

Pertama, kita akan menghapus composable halo dunia.

Telusuri "TODO: Remove item" dan hapus komentar dan baris di bawahnya:

Langkah 1

// TODO: Remove item; for beginning only.
item { StartOnlyTextComposables() }

Selanjutnya, mari tambahkan composable pertama.

Membuat composable Button

Buka ReusableComponents.kt di modul start, lalu telusuri "TODO: Create a Button Composable" dan ganti metode composable saat ini dengan kode ini.

Langkah 2

// TODO: Create a Button Composable (with a Row to center)
@Composable
fun ButtonExample(
    modifier: Modifier = Modifier,
    iconModifier: Modifier = Modifier
) {
    Row(
        modifier = modifier,
        horizontalArrangement = Arrangement.Center
    ) {
        // Button
        Button(
            modifier = Modifier.size(ButtonDefaults.LargeButtonSize),
            onClick = { /* ... */ },
        ) {
            Icon(
                imageVector = Icons.Rounded.Phone,
                contentDescription = "triggers phone action",
                modifier = iconModifier
            )
        }
    }
}

Fungsi composable ButtonExample() (lokasi kode ini) kini akan membuat tombol tengah.

Mari kita pelajari kode tersebut.

Row hanya digunakan di sini untuk memusatkan composable Button di layar bulat. Anda dapat melakukannya dengan menerapkan pengubah yang telah dibuat di MainActivity dan meneruskannya ke fungsi ini. Kemudian, saat men-scroll di layar berbentuk bulat, kita ingin memastikan konten tidak terpotong (karena itulah konten dipusatkan).

Selanjutnya, kita membuat Button itu sendiri. Kode tersebut sama seperti kode yang akan Anda gunakan untuk Button seperti sebelumnya, tetapi dalam kasus ini, kita menggunakan ButtonDefault.LargeButtonSize. Ini adalah ukuran yang sudah ditetapkan dan dioptimalkan untuk perangkat Wear OS. Jadi, pastikan Anda menggunakannya.

Setelah itu, kita menetapkan peristiwa klik ke lambda kosong. Dalam kasus kita, composable ini hanya untuk demo sehingga tidak diperlukan. Namun, dalam aplikasi yang sebenarnya, kita akan berkomunikasi dengan, misalnya, ViewModel untuk melakukan logika bisnis.

Kemudian, kita menetapkan Icon di dalam tombol. Kode ini sama seperti kode yang Anda lihat untuk Icon sebelumnya. Kita juga mendapatkan ikon dari library androidx.compose.material:material-icons-extended.

Terakhir, kita menetapkan pengubah yang telah ditetapkan sebelumnya untuk Icon.

Saat aplikasi dijalankan, Anda akan mendapatkan tampilan seperti ini:

Ini adalah kode yang mungkin sudah Anda tulis sebelumnya (dan ini luar biasa). Perbedaannya kini adalah tombol dioptimalkan untuk Wear OS.

Cukup mudah. Mari kita lihat metode lainnya.

Membuat composable Text

Di ReusableComponents.kt, telusuri "TODO: Create a Text Composable" dan ganti metode composable saat ini dengan kode ini.

Langkah 3

// TODO: Create a Text Composable
@Composable
fun TextExample(modifier: Modifier = Modifier) {
    Text(
        modifier = modifier,
        textAlign = TextAlign.Center,
        color = MaterialTheme.colors.primary,
        text = stringResource(R.string.device_shape)
    )
}

Kita membuat composable Text, menetapkan pengubahnya, meratakan teks, menetapkan warna, dan terakhir menetapkan teks itu sendiri dari resource String.

Composable Text harus dapat dikenali dengan mudah oleh developer Compose dan kode tersebut sebenarnya identik dengan kode yang telah Anda gunakan sebelumnya.

Mari kita lihat tampilannya:

Sekarang fungsi composable TextExample() (lokasi penempatan kode) menghasilkan composable Text dalam warna material utama. String diambil dari file res/values/strings.xml.

Sejauh ini, hasilnya bagus. Mari kita lihat composable terakhir yang serupa, Card.

Membuat composable Card

Di ReusableComponents.kt, telusuri "TODO: Create a Card" dan ganti metode composable saat ini dengan kode ini.

Langkah 4

// TODO: Create a Card (specifically, an AppCard) Composable
@Composable
fun CardExample(
    modifier: Modifier = Modifier,
    iconModifier: Modifier = Modifier
) {
    AppCard(
        modifier = modifier,
        appImage = {
            Icon(
                imageVector = Icons.Rounded.Message,
                contentDescription = "triggers open message action",
                modifier = iconModifier
            )
        },
        appName = { Text("Messages") },
        time = { Text("12m") },
        title = { Text("Kim Green") },
        onClick = { /* ... */ }
    ) {
        Text("On my way!")
    }
}

Wear sedikit berbeda karena kita memiliki dua kartu utama, AppCard dan TitleCard.

Dalam kasus ini, kita menginginkan Icon di kartu sehingga kita akan menggunakan AppCard. (TitleCard memiliki lebih sedikit slot, lihat panduan Kartu untuk informasi selengkapnya.)

Kita membuat composable AppCard, menetapkan pengubahnya, menambahkan Icon, menambahkan beberapa parameter composable Text (masing-masing untuk ruang yang berbeda di kartu), dan terakhir menetapkan teks konten utama di bagian akhir.

Mari kita lihat tampilannya:

Sekarang, Anda mungkin menyadari bahwa untuk composable ini, kode Compose-nya hampir sama dengan yang Anda gunakan sebelumnya, bagus bukan? Anda dapat menggunakan kembali semua pengetahuan yang telah diperoleh.

Baiklah. Mari kita lihat beberapa composable baru.

6. Menambahkan Composable Unik Wear

Untuk bagian ini, kita akan mempelajari composable Chip dan ToggleChip.

Membuat composable Chip

Chip sebenarnya ditentukan dalam panduan material, tetapi sebenarnya tidak ada fungsi composable di library material standar.

Chip ini dimaksudkan sebagai tindakan sekali ketuk yang cepat sehingga sangat cocok untuk perangkat Wear dengan ruang layar yang terbatas.

Berikut adalah beberapa variasi fungsi composable Chip untuk memberikan gambaran elemen yang dapat Anda buat:

Mari kita menulis kode.

Di ReusableComponents.kt, telusuri "TODO: Create a Chip" dan ganti metode composable saat ini dengan kode ini.

Langkah 5

// TODO: Create a Chip Composable
@Composable
fun ChipExample(
    modifier: Modifier = Modifier,
    iconModifier: Modifier = Modifier
) {
    Chip(
        modifier = modifier,
        onClick = { /* ... */ },
        label = {
            Text(
                text = "5 minute Meditation",
                maxLines = 1,
                overflow = TextOverflow.Ellipsis
            )
        },
        icon = {
            Icon(
                imageVector = Icons.Rounded.SelfImprovement,
                contentDescription = "triggers meditation action",
                modifier = iconModifier
            )
        },
    )
}

Composable Chip menggunakan banyak parameter yang sama seperti yang Anda gunakan dengan composable lain (pengubah dan onClick). Oleh karena itu, kita tidak perlu meninjaunya.

Composable ini juga membutuhkan label (yang kita buatkan composable Text) dan ikon.

Kode Icon akan terlihat persis seperti kode yang Anda lihat di composable lain, tetapi untuk kode ini, kita menarik ikon Self Improvement dari library androidx.compose.material:material-icons-extended.

Mari kita lihat seperti apa tampilannya (ingatlah untuk men-scroll ke bawah):

Baiklah. Mari kita lihat variasi di Toggle, composable ToggleChip.

Membuat composable ToggleChip

ToggleChip sama seperti Chip, tetapi memungkinkan pengguna berinteraksi dengan tombol pilihan, tombol beralih, atau kotak centang.

Di ReusableComponents.kt, telusuri "TODO: Create a ToggleChip" dan ganti metode composable saat ini dengan kode ini.

Langkah 6

// TODO: Create a ToggleChip Composable
@Composable
fun ToggleChipExample(modifier: Modifier = Modifier) {
    var checked by remember { mutableStateOf(true) }
    ToggleChip(
        modifier = modifier,
        checked = checked,
        toggleControl = {
            Switch(
                checked = checked,
                modifier = Modifier.semantics {
                    this.contentDescription = if (checked) "On" else "Off"
                }
            )
        },
        onCheckedChange = {
            checked = it
        },
        label = {
            Text(
                text = "Sound",
                maxLines = 1,
                overflow = TextOverflow.Ellipsis
            )
        }
    )
}

Sekarang fungsi composable ToggleChipExample() (lokasi kode ini) membuat ToggleChip menggunakan tombol beralih (bukan kotak centang atau tombol pilihan).

Pertama, kita membuat MutableState. Kita belum melakukan ini di fungsi lainnya karena sebagian besar yang kita lakukan adalah mengerjakan demo UI sehingga Anda dapat melihat apa yang ditawarkan Wear.

Dalam aplikasi normal, Anda mungkin ingin meneruskan status yang dicentang dan lambda untuk menangani ketukan sehingga composable dapat bersifat stateless (info selengkapnya di sini).

Dalam kasus ini, kita hanya menyederhanakannya untuk memunculkan tampilan ToggleChip dengan tombol yang berfungsi (meskipun kita tidak melakukan apa pun terhadap status).

Selanjutnya, kita menetapkan pengubah, status yang dicentang, dan kontrol tombol agar kita mendapatkan tombol akses yang diinginkan.

Kemudian kita membuat lambda untuk mengubah status dan terakhir menetapkan label dengan composable Text (dan beberapa parameter dasar).

Mari kita lihat tampilannya:

Baiklah. Anda kini telah melihat banyak composable khusus Wear OS dan, seperti yang disebutkan sebelumnya, sebagian besar kode tersebut hampir sama dengan kode yang Anda tulis sebelumnya.

Mari kita lihat sesuatu yang sedikit lebih canggih.

7. Bermigrasi ke ScalingLazyColumn

Anda mungkin telah menggunakan LazyColumn di aplikasi seluler untuk membuat daftar scroll vertikal.

Perangkat bulat yang bagian atas dan bawahnya lebih kecil memiliki lebih sedikit ruang untuk menampilkan item. Oleh karena itu, Wear OS memiliki versi LazyColumn-nya sendiri untuk mendukung perangkat bulat tersebut dengan lebih baik.

ScalingLazyColumn memperluas LazyColumn untuk mendukung penskalaan dan transparansi di bagian atas dan bawah layar agar konten lebih mudah dibaca pengguna.

Berikut ini demonya:

Perhatikan bagaimana item yang mendekati bagian tengah akan ditingkatkan skalanya hingga mencapai ukuran penuhnya, dan seiring item tersebut bergerak menjauh, skalanya pun akan kembali mengecil (dan juga makin transparan).

Berikut adalah contoh aplikasi yang lebih konkret:

Kami merasa hal ini sangat membantu meningkatkan keterbacaan.

Setelah melihat cara kerja ScalingLazyColumn, mari kita mulai mengonversi LazyColumn.

Kami akan menggunakan Horologist ScalinglazyColumn untuk memastikan bahwa item dalam daftar memiliki padding yang benar dan tidak terpotong pada ukuran layar perangkat yang berbeda.

Mengonversi ke ScalingLazyColumn Horologist

Di MainActivity.kt, telusuri "TODO: Swap to ScalingLazyColumnState" dan ganti komentar dan baris di bawah dengan kode ini. Perhatikan cara menentukan mana yang merupakan komponen pertama dan terakhir, sehingga nilai padding terbaik digunakan untuk menghindari pemotongan konten.

Langkah 7

// TODO: Swap to ScalingLazyColumnState
val listState = rememberResponsiveColumnState(
    contentPadding = ScalingLazyColumnDefaults.padding(
        first = ItemType.SingleButton,
        last = ItemType.Chip,
    ),
)

Namanya hampir identik. Sama seperti LazyListState yang menangani status untuk LazyColumn, ScalingLazyColumnState menanganinya untuk ScalingLazyColumn.

Mengonversi ke ScalingLazyColumn Horologist

Berikutnya kita akan memasukkan ScalingLazyColumn.

Di MainActivity.kt, telusuri "TODO: Swap a ScalingLazyColumn". Pertama, ganti LazyColumn dengan ScalingLazyColumn Horologist.

Kemudian, hapus contentPadding, verticalArrangement, modifier dan autocentering sepenuhnya - ScalingLazyColumn Horologist sudah menyediakan setelan default yang menjamin efek visual default yang lebih baik karena sebagian besar area tampilan akan diisi dengan item daftar. Dalam banyak kasus, parameter default sudah memadai. Jika Anda memiliki header di bagian atas, sebaiknya tempatkan di ResponsiveListHeader sebagai item pertama.

Langkah 8

// TODO: Swap a ScalingLazyColumn (Wear's version of LazyColumn)
ScalingLazyColumn(
    columnState = listState

Selesai. Mari kita lihat tampilannya:

Anda dapat melihat konten diskalakan dan transparansi disesuaikan di bagian atas dan bawah layar saat Anda men-scroll dan tidak memiliki banyak pekerjaan yang harus dimigrasikan.

Anda dapat memperhatikannya pada composable meditasi saat menggerakkannya ke atas dan ke bawah.

Sekarang saatnya membahas topik terakhir, Scaffold Wear OS.

8. Menambahkan Scaffold

Scaffold menyediakan struktur tata letak untuk membantu Anda mengatur layar dengan pola umum, seperti seluler, tetapi bukan dengan Panel Aplikasi, FAB, Panel Samping, atau elemen khusus seluler lainnya, melainkan mendukung empat tata letak khusus Wear dengan komponen tingkat atas: waktu, indikator scroll/posisi dan indikator halaman.

Tampilannya terlihat seperti berikut:

Kita akan melihat tiga komponen pertama secara mendetail, tetapi, mari kita taruh scaffold terlebih dahulu.

Kita akan menggunakan AppScaffold dan ScreenScaffold Horologist yang menambahkan TimeText

secara default ke layar dan memastikannya agar dianimasikan dengan benar saat bernavigasi antar-layar.

Selain itu, ScreenScaffold menambahkan PositionIndicator untuk konten yang dapat di-scroll.

Menambahkan Scaffold

Sekarang, mari kita tambahkan boilerplate untuk AppScaffold dan ScreenScaffold.

Temukan "TODO (Start): Create a AppScaffold (Wear Version)" dan tambahkan kode berikut di bawahnya.

Langkah 9

WearAppTheme {
// TODO (Start): Create a Horologist AppScaffold (Wear Version)
AppScaffold {

Temukan "TODO (Start): Create a ScreenScaffold (Wear Version)" dan tambahkan kode di bawahnya.

// TODO (Start): Create a Horologist ScreenScaffold (Wear Version)
ScreenScaffold(
    scrollState = listState,
){

Selanjutnya, pastikan Anda menambahkan tanda kurung tutup ke lokasi yang benar.

Temukan "TODO (End): Create a ScreenScaffold (Wear Version)" dan tambahkan tanda kurung tutup di sana:

Langkah 10

// TODO (End): Create a ScreenScaffold (Wear Version)
}

Temukan "TODO (End): Create a AppScaffold (Wear Version)" dan tambahkan tanda kurung tutup di sana:

Langkah 10

// TODO (End): Create a AppScaffold (Wear Version)
}

Mari kita jalankan terlebih dahulu. Anda akan melihat yang seperti ini:

Perhatikan bahwa ini menambahkan:

• TimeText yang menggunakan teks melengkung di balik layar dan memberikan cara mudah kepada developer untuk menampilkan waktu tanpa harus menempatkan composable atau melakukan tugas apa pun dengan class terkait waktu. Selain itu, Panduan Material menyarankan Anda untuk menampilkan waktu di bagian atas layar dalam aplikasi dan waktu akan memudar saat men-scroll.
• PositionIndicator (juga dikenal sebagai Indikator Scrolling) yang merupakan indikator di sisi kanan layar untuk menunjukkan lokasi indikator saat ini berdasarkan jenis objek status yang Anda teruskan. Dalam kasus kita, itu berarti ScalingLazyColumnState.

Baiklah. Mari kita lihat tampilannya sekarang:

Coba scroll ke atas dan ke bawah. Anda hanya akan melihat indikator scroll yang muncul saat men-scroll.

Bagus, Anda telah menyelesaikan demo UI dari sebagian besar composable Wear OS.

9. Selamat

Selamat! Anda telah mempelajari dasar-dasar penggunaan Compose di Wear OS.

Sekarang Anda dapat menerapkan kembali semua pengetahuan Compose Anda untuk membuat aplikasi Wear OS yang bagus.

Apa selanjutnya?

Lihat codelab Wear OS lainnya:

• Membuat Kartu Wear OS pertama

Bacaan lebih lanjut

• Postingan blog Compose untuk Wear OS kini dalam versi 1.0
• Contoh sederhana dari Compose untuk Wear OS di GitHub
• Membangun aplikasi untuk perangkat pergelangan tangan dengan Wear OS untuk mendapatkan panduan lebih lanjut

Masukan

Kami ingin sekali mendengar pendapat Anda selama menggunakan Compose untuk Wear OS dan hal yang dapat Anda bangun. Gabung dengan diskusi di saluran Kotlin Slack #compose-wear dan terus berikan masukan di issue tracker.

Selamat membuat kode!