Compose untuk Codelab Wear OS

1. Pengantar

4d28d16f3f514083.png

Compose untuk Wear OS memungkinkan Anda menerjemahkan pengetahuan yang telah Anda pelajari dalam mem-build aplikasi seluler dengan Jetpack Compose ke perangkat wearable.

Dengan dukungan bawaan untuk Material You, Compose untuk Wear OS menyederhanakan dan mempercepat pengembangan UI (seperti seluler) dan 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 bisa mulai menulis aplikasi untuk Wear OS. Mari kita mulai.

Yang akan Anda pelajari

  • Persamaan/perbedaan antara Compose di perangkat seluler dan Wear OS
  • Composable Wear OS yang mirip dengan composable umum di perangkat seluler
  • Composables Wear OS baru
  • LazyColumn Wear OS (ScalingLazyColumn))
  • Versi Scaffold Wear OS

Yang akan Anda buat

Anda akan mem-build 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 code lab:

b7bd20036af4859d.gif

Prasyarat

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/googlecodelabs/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:

Download ZIP

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

8a2e49d6d6d2609d.png

Membuka project di Android Studio

  1. Di jendela Welcome to Android Studio, pilih 1f5145c42df4129a.png 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.

7668d2915856b849.png

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 di perangkat seluler vs. 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 meninjaunya.
  • Folder main > theme/ berisi file Color, Type, dan Theme yang digunakan oleh Compose untuk tema.
  • 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 Wear tertentu 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).

d92519e0b932f964.png

Ini artinya 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 Material, Fondasi, danNavigasi Wear OS tepat yang berbeda dengan library yang sebelumnya Anda gunakan di aplikasi seluler.

Di bawah ini adalah perbandingan untuk membantu mengklarifikasi perbedaan:

Dependensi Wear OS(androidx.wear.*)

Perbandingan

Dependensi Perangkat Seluler(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

androidx.compose.foundation:foundation

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 mobile version in your Wear OS app.
implementation "androidx.wear.compose:compose-foundation:$wear_compose_version"

Anda sebaiknya mengetahui banyak dependensi Compose umum agar 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 bersifat aditif sehingga Anda dapat menggunakannya dengan foundation yang digunakan di sisi seluler. Bahkan, Anda mungkin sudah mengetahui bahwa kami menyertakannya dalam dependensi compose umum.

Baiklah. Setelah memahami dependensi, mari lihat aplikasi utama.

4. Meninjau MainActivity

Kami 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. Kami baru saja menyiapkan UI.

Scroll ke bawah ke fungsi yang dapat dikomposisi WearApp(). Sebelum kita membahas kode itu, Anda harus 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: Similar composables to Mobile ******************* */
            item { ButtonExample(contentModifier, iconModifier) }
            item { TextExample(contentModifier) }
            item { CardExample(contentModifier, iconModifier) }

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

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

}

Kita mulai dengan menetapkan tema, WearAppTheme { }. Langkah ini persis seperti menulis di seluler, 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 perangkat seluler.

Selanjutnya, kita membuat beberapa Pengubah untuk komponen Wear yang akan kita build. Jadi, kita tidak perlu lagi menentukannya setiap saat. Umumnya yang dilakukan ialah memusatkan konten dan menambahkan beberapa padding.

Kemudian, kita membuat LazyColumn yang digunakan untuk membuat daftar scroll vertikal untuk sekumpulan item (seperti perangkat seluler).

Kode:

item { StartOnlyTextComposables() }

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

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

Untuk item itu sendiri, hanya StartOnlyTextComposables() yang menghasilkan UI. (Kami akan mengisi sisanya di code lab.)

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 Tombol

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 ButtonExample() yang dapat dikomposisikan (lokasi kode) 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 lingkaran, 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 Tombol di perangkat seluler, tetapi dalam kasus ini, kita menggunakan ButtonDefault.LargeButtonSize. Ini adalah ukuran yang dioptimalkan untuk perangkat Wear OS. Jadi, pastikan Anda menggunakannya.

Setelah itu, kita menetapkan peristiwa klik ke lamba 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 Ikon 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 Ikon.

Saat aplikasi dijalankan, Anda akan mendapatkan tampilan seperti ini:

f9fce435c935d610.png

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 Teks

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 teks harus dapat dikenali dengan mudah oleh developer Compose dan kode tersebut sebenarnya identik dengan sisi seluler.

Mari kita lihat tampilannya:

52a4e318d12d7ba5.png

Sekarang fungsi yang dapat dikomposisi TextExample() (lokasi penempatan kode) menghasilkan composable Teks 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:

27e50afef57b7717.png

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

Membuat composable Kartu

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 = { /* ... */ }
    ) {
        Column(modifier = Modifier.fillMaxWidth()) {
            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 difokuskan hanya pada teks.)

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:

dcb5e5bebf9f19d9.png

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

Baiklah. Mari kita lihat beberapa komponen baru.

6. Menambahkan Composable Unik Wear

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

Membuat composable Chip

Chip sebenarnya ditentukan dalam panduan material, tetapi tidak ada fungsi yang dapat dikomposisi sebenarnya di library material seluler.

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 Chip yang dapat dikomposisi 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 buat untuk 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 (ingat untuk men-scroll ke bawah):

77bde81f8f290f87.png

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,
        toggleIcon = {
            ToggleChipDefaults.SwitchIcon(checked = checked)
        },
        onCheckedChange = {
            checked = it
        },
        label = {
            Text(
                text = "Sound",
                maxLines = 1,
                overflow = TextOverflow.Ellipsis
            )
        }
    )
}

Sekarang fungsi yang dapat dikomposisi ToggleChipExample() (lokasi kode) 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 komponen dapat bersifat stateless ( info selengkapnya di sini).

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

Selanjutnya, kita menetapkan pengubah, status yang dicentang, dan ikon tombol beralih agar kita mendapatkan tombol akses yang diinginkan. (Dalam hal ini, kita menggunakan default.)

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

Mari kita lihat tampilannya:

b76b501e91a64969.png

Baiklah. Sekarang Anda telah melihat banyak composable khusus Wear OS dan, seperti yang dinyatakan sebelumnya, sebagian besar kode tersebut hampir sama dengan yang kode Anda tulis di perangkat seluler.

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 berukuran lebih kecil di bagian atas dan bawah berpengaruh pada lebih sedikitnya 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:

28460354eaf16eea.gif

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

Berikut adalah contoh aplikasi yang lebih konkret:

307c969dccf58e49.gif

Kami merasa hal ini sangat membantu meningkatkan keterbacaan.

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

Mengonversi ke ScalingLazyListState

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

Langkah 7

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

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

Mengonversi ke ScalingLazyColumn

Berikutnya kita akan menukarnya di ScalingLazyColumn.

Di MainActivity.kt, telusuri "TODO: Swap a ScalingLazyColumn" dan ganti baris tersebut dan baris di bawah dengan kode ini.

Langkah 8

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

Selesai. Mari kita lihat tampilannya:

264ab059418a6526.png

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 komponen meditasi saat menggerakkannya ke atas dan ke bawah.

Sekarang saatnya membahas topik terakhir, Wear OS Scaffold.

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, mendukung tiga tata letak khusus Wear dengan komponen tingkat atas: waktu, vignette, dan indikator scroll/posisi.

Kode ini juga menangani perangkat bulat dan non-bulat.

Tampilannya terlihat seperti berikut:

TimeText

Vignette

PositionIndicator

Kita akan melihat setiap komponen 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, kami tidak sedang memproduksi 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:

2ddc667e07d8f04c.png

Perilaku compose tidak berubah sejak kita menambahkan Scaffold, 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 mengharuskan Anda menampilkan waktu di bagian atas layar dalam pengalaman overlay (atau aplikasi) apa pun. Berikut adalah contohnya:

29671ae0a7c3225b.png

Menambahkan TimeText sebenarnya cukup sederhana.

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

Langkah 11

timeText = {
    if (!listState.isScrollInProgress) {
        TimeText()
    }
},

Kita menambahkan logika tambahan untuk menyembunyikan waktu saat pengguna mulai men-scroll.

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

Coba jalankan. Sekarang Anda akan melihat waktu, tetapi ketika Anda men-scroll, waktu akan hilang.

896aaebb9a89bbe8.png

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:

689ac8becaac6824.png

Kita hanya memiliki satu layar (yaitu layar yang dapat di-scroll). Jadi, kita ingin menampilkan Vignette agar mudah dibaca. 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.

9a91313e5d59f49e.png

Jika Anda melihat bagian atas atau bawah (terutama pada komponen 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, yaitu ScalingLazyListState.

Berikut contohnya:

181b19b55ce37251.png

Mari kita mulai.

Jika sangat cermat, Anda mungkin melihat kami mengangkat ScalingLazyListState di atas Scaffold.

Anda mungkin heran mengapa diangkat di sana jika seharusnya bisa berada di atas ScalingLazyColumn.

Kelengkungan layar menyebabkan indikator posisi harus dipusatkan pada jam, tidak hanya di tengah area pandang. 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:

c9f96a90a3e811fb.png

Jika indikator posisi tidak berada di tengah layar (seperti yang terlihat di sini), tetapi justru dipusatkan di port tampilan daftar, sebagian besar indikator posisi akan terpotong karena bentuk layar yang bulat. Artinya, tidak ada layar di sana.

Sekarang, setelah kita membahas alasan harus ditarik setinggi itu, mari kita tambahkan ke 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:

8c278b78ab008cbb.png

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.

Kini, Anda dapat menerapkan kembali semua pengetahuan Anda dari sisi seluler dan mulai membuat aplikasi Wear OS yang bagus.

Apa selanjutnya?

Lihat codelab Wear OS lainnya:

Bacaan lebih lanjut