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 Material You, 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.

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:

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

Membuka project di Android Studio

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

Mempelajari kode awal

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 (ditandai 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. Ini mungkin berbeda dengan library yang sebelumnya Anda gunakan.

Perbandingan di bawah ini akan membantu menjelaskan perbedaannya:

Dependensi Wear OS (androidx.wear.*)	Perbandingan	Dependensi Standar (androidx.*)
androidx.wear.compose:compose-material	*bukan*	androidx.compose.material:material ₁
androidx.wear.compose:compose-navigation	*bukan*	androidx.navigation:navigation-compose
androidx.wear.compose:compose-foundation	*selain juga*	androidx.compose.foundation:foundation
androidx.wear.compose:compose-ui-tooling	*selain juga*	androidx.compose.ui:ui-tooling-preview

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:

// TODO: Review Dependencies
// General Compose dependencies
implementation "androidx.activity:activity-compose:$activity_compose_version"
implementation "androidx.compose.ui:ui-tooling-preview:$compose_version"
implementation "androidx.compose.foundation:foundation:$compose_version"
implementation "androidx.compose.material:material-icons-extended:$compose_version"

// Compose for Wear OS Dependencies
implementation "androidx.wear.compose:compose-material:$wear_compose_version"

// Foundation is additive, so you can use the standard version in your Wear OS app.
implementation "androidx.wear.compose:compose-foundation:$wear_compose_version"

// Compose preview annotations for Wear OS.
implementation "androidx.wear.compose:compose-ui-tooling:$wear_compose_version"

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 {
    // TODO: Swap to ScalingLazyListState
    val listState = rememberLazyListState()

    /* *************************** Part 4: Wear OS Scaffold *************************** */
    // TODO (Start): Create a Scaffold (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: Create 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 Scaffold (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 Wear Material default yang sudah dioptimalkan untuk perangkat bulat dan non-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 sama dengan sebelumnya.

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. Sebenarnya, jika melihat di dalam folder res/values, Anda akan melihat dua file resource strings.xml.

Wear OS menyediakan resource string untuk perangkat yang berbentuk bulat dan non-bulat. Jadi, jika kita menjalankannya di emulator persegi, string ini akan berubah:

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.

Perangkat 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.

Mengonversi ke ScalingLazyListState

Di MainActivity.kt, telusuri "TODO: Swap to ScalingLazyListState" dan ganti komentar tersebut dan baris di bawah dengan kode ini.

Langkah 7

// TODO: Swap to ScalingLazyListState
val listState = rememberScalingLazyListState()

Namanya hampir identik, tetapi tanpa bagian "Scaling". Sama seperti LazyListState yang menangani status untuk LazyColumn, ScalingLazyListState menanganinya untuk ScalingLazyColumn.

Mengonversi ke ScalingLazyColumn

Berikutnya kita akan memasukkan ScalingLazyColumn.

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

Kemudian, hapus contentPadding dan verticalArrangement sepenuhnya - ScalingLazyColumn sudah menyediakan setelan default yang menjamin efek visual default yang lebih baik karena sebagian besar area pandang akan diisi dengan item daftar. Dalam banyak kasus, parameter default sudah memadai. Jika Anda memiliki header di bagian atas, sebaiknya tempatkan di ListHeader sebagai item pertama. Jika tidak, pertimbangkan untuk menyetel autoCentering dengan itemIndex sebagai 0 yang akan memberikan padding yang cukup untuk item pertama.

Langkah 8

// TODO: Swap a ScalingLazyColumn (Wear's version of LazyColumn)
ScalingLazyColumn(
    modifier = Modifier.fillMaxSize(),
    autoCentering = AutoCenteringParams(itemIndex = 0),
    state = 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, vignette, indikator scroll/posisi dan indikator halaman.

Kode ini juga menangani perangkat bulat dan non-bulat.

Tampilannya terlihat seperti berikut:

	`TimeText`
	`Vignette`
	`PositionIndicator`
	`PageIndicator`

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

Menambahkan Scaffold

Mari sekarang kita tambahkan boilerplate untuk Scaffold.

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

Langkah 9

// TODO (Start): Create a Scaffold (Wear Version)
Scaffold(
    timeText = { },
    vignette = { },
    positionIndicator = { }
) {

Kami akan menjelaskan setiap parameter ini secara berurutan di langkah-langkah berikutnya. Saat ini, kita tidak sedang membuat UI apa pun.

Selanjutnya, pastikan Anda menambahkan tanda kurung tutup ke lokasi yang benar. Cari "TODO (End): Create a Scaffold (Wear Version)" dan tambahkan tanda kurung di sana:

Langkah 10

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

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

Perilaku composable tidak berubah sejak kita menambahkan Scaffold, tetapi perilaku ini akan berubah setelah kita mulai mengimplementasikan komponen.

Mari mulai dengan parameter pertama, TimeText.

TimeText

TimeText menggunakan teks lengkung 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.

Pedoman Material menyarankan Anda menampilkan waktu di bagian atas layar dalam aplikasi. Berikut adalah contoh tampilannya:

Menambahkan TimeText sebenarnya cukup sederhana.

Cari "timeText = { }," dan ganti dengan kode di bawah ini:

Langkah 11

timeText = {
    TimeText(modifier = Modifier.scrollAway(listState))
},

Pertama, kita membuat composable TimeText. Kita dapat menambahkan parameter tambahan untuk menambahkan teks sebelum dan/atau setelah waktu, tetapi kita ingin membuatnya tetap sederhana.

Saat membuat TimeText dengan elemen yang dapat di-scroll, seperti daftar, TimeText akan memudar dari tampilan saat pengguna mulai men-scroll daftar item ke atas. Untuk itu, kita menambahkan Modifier.scrollAway yang akan men-scroll TimeText secara vertikal ke dalam/ke luar tampilan, berdasarkan status scroll.

Coba jalankan. Sekarang Anda akan melihat waktu, dan jika Anda men-scroll, waktu akan memudar.

Selanjutnya, kita akan membahas Vignette.

Menambahkan Vignette

Vignette memburamkan tepi atas dan bawah layar perangkat wearable saat layar yang dapat di-scroll ditampilkan.

Developer dapat memutuskan untuk memburamkan bagian atas, bawah, atau keduanya, bergantung pada kasus penggunaan.

Berikut contohnya:

Kita hanya memiliki satu layar (yaitu layar yang dapat di-scroll). Jadi, kita ingin menampilkan Vignette untuk meningkatkan keterbacaan. Mari kita lakukan sekarang.

Cari "vignette = { }," dan ganti dengan kode di bawah ini:

Langkah 12

vignette = {
    // Only show a Vignette for scrollable screens. This code lab only has one screen,
    // which is scrollable, so we show it all the time.
    Vignette(vignettePosition = VignettePosition.TopAndBottom)
},

Baca komentar untuk mengetahui detail selengkapnya mengenai kapan Anda diizinkan dan dilarang menampilkan vignette. Dalam kasus ini, kita ingin mode ini selalu ditampilkan dan kita juga ingin memburamkan bagian atas dan bawah layar.

Jika Anda melihat bagian atas atau bawah (terutama pada composable ungu), Anda akan melihat efeknya.

Mari selesaikan parameter akhir Scaffold, PositionIndicator.

Menambahkan PositionIndicator

PositionIndicator (juga dikenal sebagai Indikator Scroll) adalah indikator yang terdapat di sisi kanan layar untuk menunjukkan lokasi indikator saat ini berdasarkan jenis objek status yang Anda teruskan. Dalam kasus kita, itu berarti ScalingLazyListState.

Berikut contohnya:

Anda mungkin bertanya-tanya mengapa indikator posisi harus naik di level Scaffold dan bukan di level ScalingLazyColumn.

Kelengkungan layar menyebabkan indikator posisi harus dipusatkan pada smartwatch (Scaffold), tidak hanya di tengah area pandang (ScalingLazyColumn). Jika tidak, indikator posisi akan terpotong.

Misalnya, pada aplikasi di bawah ini, kita dapat berasumsi bahwa composable "Playlist" bukan bagian dari area yang dapat di-scroll. Indikator posisi dipusatkan pada ScalingLazyColumn, tetapi tidak memenuhi seluruh layar. Oleh karena itu, Anda dapat melihat bahwa sebagian besar indikator terpotong.

Namun, jika kita memusatkan indikator posisi di seluruh permukaan yang dapat dilihat (yaitu yang diberikan oleh Scaffold), Anda sekarang dapat melihatnya dengan jelas.

Itu berarti PositionIndicator mengharuskan ScalingLazyListState (yang memberi tahunya posisi dalam daftar scroll) agar berada di atas Scaffold.

Jika sangat cermat, Anda mungkin melihat kami mengangkat ScalingLazyListState di atas Scaffold untuk menyembunyikan atau menampilkan waktu. Jadi, dalam kasus ini, pekerjaan kita sudah selesai.

Sekarang, setelah kita membahas alasan indikator posisi harus berada dalam scaffold, mari kita tambahkan indikator ke dalam aplikasi.

Cari "positionIndicator = { }" dan ganti dengan kode di bawah ini:

Langkah 12

positionIndicator = {
    PositionIndicator(
        scalingLazyListState = listState
    )
}

Langkah ini cukup mudah karena PositionIndicator hanya memerlukan status scroll untuk merendernya sendiri dengan benar, dan sekarang dapat melakukannya.

Selain itu, tersedia juga fitur bagus yang dapat menyembunyikan dirinya sendiri jika pengguna tidak men-scroll.

Kita menggunakan ScalingLazyListState, tetapi PositionIndicator menggunakan banyak opsi scroll lainnya, misalnya, ScrollState, LazyListState, dan bahkan dapat menangani tombol samping yang berputar atau

bingkai yang berputar. Untuk melihat semua opsi, lihat KDocs untuk setiap versi.

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:

Bacaan lebih lanjut

Postingan blog Compose untuk Wear OS kini dalam versi 1.0
Contoh Sederhana dan Kompleks dari Compose untuk Wear OS di GitHub
Membuat aplikasi untuk perangkat pergelangan tangan dengan Wear OS untuk 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 tentang issue tracker.

Selamat membuat kode!