Membuat Kartu pertama di Wear OS

pergeseran kartu dari waktu ke cuaca, lalu ke timer.

Tonton animasi di atas (demo Kartu). Catatan: GIF animasi hanya bergerak dalam satu waktu. Jika Anda melewatkannya, muat ulang halaman.

Kartu Wear OS menyediakan akses mudah ke informasi dan tindakan yang dibutuhkan pengguna untuk menyelesaikan berbagai hal. Hanya dengan menggeser dari tampilan jam, pengguna dapat mengetahui perkiraan terbaru atau memulai timer.

Mengembangkan Kartu sedikit berbeda dari menulis Aplikasi.

Kartu berjalan sebagai bagian dari UI Sistem, bukan berjalan di penampung aplikasinya sendiri. Ini berarti Kartu tidak memiliki akses ke beberapa konsep pemrograman Android yang mungkin sudah Anda pahami, seperti Aktivitas dan tata letak XML.

Sebagai gantinya, kami menggunakan Service untuk mendeskripsikan tata letak dan konten Kartu. UI Sistem kemudian akan merender Kartu saat diperlukan.

Dalam codelab ini, Anda akan mempelajari cara menulis Kartu Wear OS sendiri dari awal.

Yang akan Anda pelajari

  • Membuat Kartu
  • Menguji Kartu di perangkat
  • Mendesain tata letak Kartu
  • Menambahkan gambar
  • Menambahkan interaksi (ketuk)

Yang akan Anda buat

Anda akan membuat Kartu khusus yang menampilkan jumlah langkah menuju sasaran harian. Kartu ini menyertakan tata letak kompleks yang akan membantu Anda mempelajari berbagai penampung dan elemen tata letak.

Berikut adalah tampilannya setelah Anda menyelesaikan code lab:

c6e1959693cded21.png

Prasyarat

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/wear-tiles.git
cd wear-tiles

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.

c72e8870facd8458.png

Mempelajari kode mulai

  • build.gradle berisi konfigurasi aplikasi dasar. Kode ini mencakup dependensi yang diperlukan untuk membuat Kartu.
  • main > AndroidManifest.xml menyertakan bagian yang diperlukan untuk menandainya sebagai aplikasi Wear OS. Kita akan meninjau file ini selama codelab.
  • main > GoalsRepository.kt berisi class repositori palsu yang secara asinkron mengambil sejumlah langkah acak yang telah ditetapkan pengguna hari ini.
  • main > GoalsTileService.kt berisi boilerplate untuk membuat Kartu. Kita akan melakukan sebagian besar pekerjaan kita di file ini.
  • debug > AndroidManifest.xml berisi elemen aktivitas untuk TilePreviewActivity, sehingga kita dapat melihat pratinjau kartu.
  • debug > TilesPreviewActivity.kt berisi Aktivitas yang akan kita gunakan untuk melihat pratinjau Kartu.

Mari kita mulai dengan membuka GoalsTileService di modul start. Seperti yang dapat Anda lihat, class ini memperluas TileProviderService.

TileProviderService adalah bagian dari library Kartu, yang menyediakan metode yang akan kita gunakan untuk menulis Kartu:

  • onTileRequest() - Membuat Kartu saat sistem memintanya.
  • onResourcesRequest() - Menyediakan gambar apa pun yang diperlukan agar Kartu ditampilkan dalam onTileRequest().

Kita menggunakan coroutine untuk menangani sifat asinkron metode ini. Untuk mempelajari coroutine lebih lanjut, baca dokumentasi coroutine Android.

Mari kita mulai dengan membuat Kartu "Halo, dunia" yang sederhana.

Sebelum itu, perlu diketahui bahwa kita menentukan banyak konstanta di awal file yang akan kita gunakan di seluruh code lab. Anda dapat meninjaunya jika menelusuri "TODO: Review Constants". Konstanta ini menentukan sejumlah hal, termasuk versi resource hingga nilai dp (padding, ukuran, dll.), nilai sp (teks), ID, dan lainnya.

Oke, mari kita lakukan coding.

Di GoalsTileService.kt, telusuri "TODO: Build a Tile" dan ganti seluruh

implementasi onTileRequest() dengan kode di bawah ini.

Langkah 1

// TODO: Build a Tile.
override fun onTileRequest(requestParams: TileRequest) = serviceScope.future {

    Tile.builder()
        // If there are any graphics/images defined in the Tile's layout, the system will
        // retrieve them using onResourcesRequest() and match them with this version number.
        .setResourcesVersion(RESOURCES_VERSION)

        // Creates a timeline to hold one or more tile entries for a specific time periods.
        .setTimeline(
            Timeline.builder().addTimelineEntry(
                TimelineEntry.builder().setLayout(
                    Layout.builder().setRoot(
                        Text.builder().setText("Hello, world!")
                    )
                )
            )
        ).build()
}

Metode onTileRequest() mengharapkan Future ditampilkan dan kami menggunakan serviceScope.future { ... } untuk mengonversi coroutine ke ListenableFuture Java.

Di luar itu, Anda hanya perlu membuat Tile dalam coroutine, jadi mari kita lakukan.

Dalam onTileRequest(), kita menggunakan pola builder untuk membuat Kartu "Halo, dunia!" Baca komentar di blok kode untuk mengetahui peristiwa yang terjadi.

Pertama, kita menyetel versi resource. Versi resource yang ditampilkan dalam payload dari metode ini harus cocok dengan versi resource dalam payload yang ditampilkan dari onResourcesRequest(), terlepas dari apakah resource mana pun benar-benar digunakan.

Ini adalah cara untuk mencocokkan grafis tersebut dengan versi yang benar saat sistem memanggil onResourcesRequest() untuk mendapatkan grafis tersebut.

Namun, untuk Kartu "Halo, dunia" yang sederhana ini, kami tidak memiliki grafis apa pun.

Selanjutnya, kita akan membuat Timeline.

Timeline terdiri atas satu atau beberapa instance TimelineEntry. Masing-masing instance mendeskripsikan tata letak untuk interval waktu tertentu. Anda dapat membuat beberapa nilai TimelineEntry yang akan muncul di masa mendatang, dan sistem akan merendernya pada saat itu.

fbb666b722376749.png

Anda dapat membaca selengkapnya tentang bekerja dengan linimasa di panduan linimasa.

Dalam contoh ini, kita hanya mendeklarasikan satu instance TimelineEntry karena kita hanya menginginkan satu Kartu untuk setiap waktu. Selanjutnya, kita akan menyetel tata letak menggunakan setLayout.

Root dapat dibuat dari satu atau beberapa tata letak kompleks, tetapi untuk langkah ini, kita akan membuat elemen tata letak Text sederhana yang menampilkan "Halo, dunia!".

Selesai.

Setelah membuat Kartu yang sangat sederhana, mari kita lihat pratinjaunya dalam Activity.

Untuk melihat pratinjau Kartu ini di dalam Aktivitas, buka TilePreviewActivity di folder sumber debug aplikasi Anda.

Telusuri "TODO: Review creation of Tile for Preview" dan tambahkan kode berikut setelahnya.

Langkah 2

// TODO: Review creation of Tile for Preview.
tileManager = TileManager(
    context = this,
    component = ComponentName(this, GoalsTileService::class.java),
    parentView = rootLayout
)
tileManager.create()

Sebagian besar sudah cukup jelas.

Anda membuat TileManager, yang dapat kita gunakan untuk melihat pratinjau Kartu serta menyetel konteks, komponen (class layanan kartu yang kita kerjakan), dan tampilan induknya tempat kita menyisipkan Kartu.

Setelah itu, kita akan membuat kartu menggunakan create().

Anda juga akan melihat kami melakukan pembersihan dalam onDestroy() menggunakan tileManager.close().

Sekarang jalankan aplikasi Anda di perangkat atau emulator Wear OS (pastikan Anda memilih modul start). Anda akan dapat melihat "Halo, dunia!" yang muncul di tengah layar:

b9976e1073554422.png

Setelah tata letak dasar berfungsi, mari kita luaskan dan buat Kartu yang lebih kompleks. Sasaran akhir kita adalah tata letak ini:

c6e1959693cded21.png

Mengganti tata letak root dengan Box

Ganti seluruh metode onTileRequest, yang mencakup label teks "Halo, dunia!", dengan kode di bawah ini.

Langkah 3

// TODO: Build a Tile.
override fun onTileRequest(requestParams: TileRequest) = serviceScope.future {

    // Retrieves progress value to populate the Tile.
    val goalProgress = GoalsRepository.getGoalProgress()
    // Retrieves font styles for any text in the Tile.
    val fontStyles = FontStyles.withDeviceParameters(requestParams.deviceParameters)

    // Creates Tile.
    Tile.builder()
        // If there are any graphics/images defined in the Tile's layout, the system will
        // retrieve them using onResourcesRequest() and match them with this version number.
        .setResourcesVersion(RESOURCES_VERSION)
        // Creates a timeline to hold one or more tile entries for a specific time periods.
        .setTimeline(
            Timeline.builder().addTimelineEntry(
                TimelineEntry.builder().setLayout(
                    Layout.builder().setRoot(
                        // Creates the root [Box] [LayoutElement]
                        layout(goalProgress, fontStyles)
                    )
                )
            )
        ).build()
}

Baca komentar di blok kode untuk mengetahui peristiwa yang terjadi. Kita belum menentukan layout(), jadi jangan khawatir dengan error yang terjadi.

Di bagian pertama kode dalam metode ini, kita mulai dengan mengambil progres sasaran sebenarnya dari repositori (palsu).

Kita juga mengambil deviceParameters yang diteruskan ke onTileRequest() yang nantinya akan digunakan untuk membuat gaya font label teks.

Bagian kode berikutnya adalah membuat Kartu lagi seperti sebelumnya. Anda mungkin melihat bahwa hampir semua kode sama.

Bahkan, kita hanya mengubah baris tempat kita menyetel root ke layout(goalProgress, fontStyles).

Seperti disebutkan sebelumnya, Anda akan melihat garis merah di bawah nama metode karena metode tersebut tidak ada.

Pola umum yang dilakukan adalah membagi tata letak menjadi beberapa bagian logis dan menentukannya dalam metodenya sendiri untuk mencegah kode dengan banyak tingkatan. Jadi selanjutnya, kita akan menentukan metode tata letak.

Telusuri "TODO: Create root Box layout and content" dan tambahkan kode di bawah ini.

Langkah 4

    // TODO: Create root Box layout and content.
    // Creates a simple [Box] container that lays out its children one over the other. In our
    // case, an [Arc] that shows progress on top of a [Column] that includes the current steps
    // [Text], the total steps [Text], a [Spacer], and a running icon [Image].
    private fun layout(goalProgress: GoalProgress, fontStyles: FontStyles) =
        Box.builder()
            // Sets width and height to expand and take up entire Tile space.
            .setWidth(expand())
            .setHeight(expand())

            // Adds an [Arc] via local function.
            .addContent(progressArc(goalProgress.percentage))

            // TODO: Add Column containing the rest of the data.
            // TODO: START REPLACE THIS LATER
            .addContent(
                Text.builder()
                    .setText("REPLACE ME!")
                    .setFontStyle(fontStyles.display3())
            )
            // TODO: END REPLACE THIS LATER

            .build()

Baca komentar di blok kode untuk mengetahui peristiwa yang terjadi. Kita belum menentukan progressArc(), jadi jangan khawatir dengan error apa pun pada panggilan metode tersebut atau di setRoot().

Metode tata letak kita berisi penampung Box sederhana, yang menyusun turunannya satu sama lain. Di dalam kotak, kita menambahkan konten tertentu. Dalam hal ini, memanggil metode yang belum ada.

Kita akan kembali mengikuti pola pembagian metode untuk tata letak yang kompleks, sehingga lebih mudah dibaca.

Anda mungkin melihat beberapa TODO tambahan di dekat bagian bawah kode (di atas panggilan build()). Kita akan membahasnya nanti dalam code lab.

Untuk saat ini, mari kita perbaiki error tersebut dan tentukan metode lokal yang pada akhirnya akan mendeklarasikan lengkung yang kita cari.

Membuat ArcLine

Pertama-tama, kita akan membuat lengkung di sekitar tepi layar yang terisi saat pengguna meningkatkan jumlah langkahnya.

Tiles API menawarkan sejumlah opsi penampung Arc. Kita akan menggunakan ArcLine yang merender garis melengkung di sekitar Arc.

Sekarang, mari kita tentukan fungsi tersebut, sehingga kita bisa menyingkirkan error yang mengganggu.

Cari "TODO: Create a function that constructs an Arc representation of the current step progress" dan tambahkan kode di bawah ini.

Langkah 5

    // TODO: Create a function that constructs an Arc representation of the current step progress.
    // Creates an [Arc] representing current progress towards steps goal.
    private fun progressArc(percentage: Float) = Arc.builder()
        .addContent(
            ArcLine.builder()
                // Uses degrees() helper to build an [AngularDimension] which represents progress.
                .setLength(degrees(percentage * ARC_TOTAL_DEGREES))
                .setColor(argb(ContextCompat.getColor(this, R.color.primary)))
                .setThickness(PROGRESS_BAR_THICKNESS)
        )
        // Element will start at 12 o'clock or 0 degree position in the circle.
        .setAnchorAngle(degrees(0.0f))
        // Aligns the contents of this container relative to anchor angle above.
        // ARC_ANCHOR_START - Anchors at the start of the elements. This will cause elements
        // added to an arc to begin at the given anchor_angle, and sweep around to the right.
        .setAnchorType(ARC_ANCHOR_START)
        .build()

Baca komentar di blok kode untuk mengetahui peristiwa yang terjadi. (Catatan: Anda mungkin melihat error untuk degrees(), argb(), dan ContextCompat. Jika ya, cukup impor versi kartu dengan mengkliknya.)

Dalam bagian kode ini, kita menampilkan Arc.Builder dengan ArcLine yang mewakili progres sasaran langkah kita.

Kita menyetel durasi sebagai persentase sasaran akhir kita (yang dikonversi menjadi derajat), warna, dan ketebalan.

Selanjutnya, kita akan menentukan tempat lengkung dimulai dengan jenis anchor. Ada banyak opsi berbeda untuk anchor, jadi jangan ragu untuk mencoba semuanya setelah code lab.

Oke, bagian ini selesai.

Mari kita lihat penerapannya. Jalankan kembali aplikasi dan Anda akan melihat tampilan seperti ini:

ad79daf115d3b6a4.png

Menambahkan penampung Kolom

Setelah Kartu memiliki indikator progres yang bagus, mari kita tambahkan teks tertentu yang sesuai.

Karena akan menambahkan beberapa kolom teks (dan kemudian gambar), kita ingin item berada dalam Column di bagian tengah bawah layar.

Column adalah salah satu dari sekian banyak penampung tata letak Kartu, yang memungkinkan kita menata elemen turunan dengan saling menimpa secara vertikal.

Cari "TODO: Add Column containing the rest of the data" dan ganti konten teks sementara dengan kode di bawah ini. Semuanya berkisar dari TODO: START REPLACE THIS LATER hingga TODO: END REPLACE THIS LATER.

Ingatlah untuk tidak menghapus panggilan build() di bagian akhir blok kode dari aslinya.

Langkah 6

            // TODO: Add Column containing the rest of the data.
            // Adds a [Column] containing the two [Text] objects, a [Spacer], and a [Image].
            .addContent(
                Column.builder()
                    // Adds a [Text] using local function.
                    .addContent(
                        currentStepsText(goalProgress.current.toString(), fontStyles)
                    )
                    // Adds a [Text] using local function.
                    .addContent(
                        totalStepsText(
                            resources.getString(R.string.goal, goalProgress.goal),
                            fontStyles
                        )
                    )
                    // TODO: Add Spacer and Image representations of our step graphic.
                    // DO LATER
            )

Baca komentar di blok kode untuk mengetahui peristiwa yang terjadi.

Kita membuat kolom yang menambahkan dua bagian konten. Sekarang kita memiliki dua error.

Kira-kira apa yang sedang terjadi?

Sekali lagi, kita mengikuti pola pembagian metode untuk tata letak yang kompleks (dan kita dapat mengabaikan DO LATER TODO).

Mari kita perbaiki error tersebut.

Menambahkan elemen Teks

Temukan "TODO: Create functions that construct/stylize Text representations of the step count & goal" dan tambahkan kode berikut di bawahnya.

Langkah 7

    // TODO: Create functions that construct/stylize Text representations of the step count & goal.
    // Creates a [Text] with current step count and stylizes it.
    private fun currentStepsText(current: String, fontStyles: FontStyles) = Text.builder()
        .setText(current)
        .setFontStyle(fontStyles.display2())
        .build()

    // Creates a [Text] with total step count goal and stylizes it.
    private fun totalStepsText(goal: String, fontStyles: FontStyles) = Text.builder()
        .setText(goal)
        .setFontStyle(fontStyles.title3())
        .build()

Baca komentar di blok kode untuk mengetahui peristiwa yang terjadi.

Ini cukup mudah. Melalui dua fungsi yang berbeda, kita membuat elemen tata letak Text yang terpisah.

Seperti yang mungkin sudah Anda duga, elemen tata letak Text merender string teks (secara opsional, menggabungkannya).

Kita menyetel ukuran font dari konstanta yang didefinisikan sebelumnya di class ini, dan, terakhir, kita menyetel gaya font dari gaya yang diambil dalam onTileRequest().

Sekarang kita memiliki teks. Mari kita lihat tampilan Kartu saat ini. Jalankan Kartu dan Anda akan melihat tampilan seperti ini.

9eaca483c7e51f38.png

Menambahkan nama gambar ke onTileRequest()

Untuk bagian akhir UI, kita akan menambahkan gambar.

Cari "TODO: Add Spacer and Image representations of our step graphic" dan ganti DO LATER dengan kode di bawah ini (pastikan Anda tidak menghapus karakter ')' di akhir).

Ingatlah juga untuk tidak menghapus panggilan build() di bagian akhir blok kode dari aslinya.

Langkah 8

                    // TODO: Add Spacer and Image representations of our step graphic.
                    // Adds a [Spacer].
                    .addContent(Spacer.builder().setHeight(VERTICAL_SPACING_HEIGHT))
                    // Adds an [Image] using local function.
                    .addContent(startRunButton())

Baca komentar di blok kode untuk mengetahui peristiwa yang terjadi.

Pertama, kita menambahkan elemen tata letak Spacer untuk menyediakan padding di antara elemen; dalam hal ini, gambar yang mengikutinya.

Selanjutnya, kita menambahkan konten untuk elemen tata letak Image yang merender gambar, tetapi seperti yang Anda duga berdasarkan error, kita mendefinisikannya dalam fungsi lokal terpisah.

Temukan "TODO: Create a function that constructs/stylizes a clickable Image of a running icon" dan tambahkan kode di bawah ini.

Langkah 9

    // TODO: Create a function that constructs/stylizes a clickable Image of a running icon.
    // Creates a running icon [Image] that's also a button to refresh the tile.
    private fun startRunButton() =
        Image.builder()
            .setWidth(BUTTON_SIZE)
            .setHeight(BUTTON_SIZE)
            .setResourceId(ID_IMAGE_START_RUN)
            .setModifiers(
                Modifiers.builder()
                    .setPadding(
                        Padding.builder()
                            .setStart(BUTTON_PADDING)
                            .setEnd(BUTTON_PADDING)
                            .setTop(BUTTON_PADDING)
                            .setBottom(BUTTON_PADDING)
                    )
                    .setBackground(
                        Background.builder()
                            .setCorner(Corner.builder().setRadius(BUTTON_RADIUS))
                            .setColor(argb(ContextCompat.getColor(this, R.color.primaryDark)))
                    )
                    // TODO: Add click (START)
                    // DO LATER
                    // TODO: Add click (END)
            )
            .build()

Baca blok kode untuk mengetahui peristiwa yang sedang terjadi.

Seperti biasa, abaikan DO LATER TODO untuk saat ini.

Sebagian besar kodenya cukup jelas. Kita menetapkan berbagai dimensi dan gaya dengan konstanta yang ditentukan di bagian atas class. Untuk mempelajari pengubah lebih lanjut, klik di sini.

Hal yang paling penting untuk diperhatikan adalah panggilan .setResourceId(ID_IMAGE_START_RUN).

Kita menyetel nama gambar ke konstanta yang ditentukan di bagian atas class.

Sebagai langkah terakhir, kita harus memetakan nama konstanta tersebut ke gambar sebenarnya di aplikasi kita.

Menambahkan pemetaan gambar ke onResourcesRequest()

Kartu tidak memiliki akses ke resource mana pun di aplikasi Anda. Ini berarti Anda tidak boleh meneruskan ID gambar Android ke elemen tata letak Gambar dan mengharapkannya untuk diselesaikan. Sebagai gantinya, Anda perlu mengganti metode onResourcesRequest() dan menyediakan resource apa pun secara manual.

Ada dua cara untuk menyediakan gambar dalam metode onResourcesRequest():

Gunakan setAndroidResourceByResId() untuk memetakan nama yang kita gunakan untuk gambar sebelumnya ke gambar sebenarnya.

Cari "TODO: Supply resources (graphics) for the Tile" dan ganti seluruh metode yang ada dengan kode di bawah ini.

Langkah 10

    // TODO: Supply resources (graphics) for the Tile.
    override fun onResourcesRequest(requestParams: ResourcesRequest) = serviceScope.future {
        Resources.builder()
            .setVersion(RESOURCES_VERSION)
            .addIdToImageMapping(
                ID_IMAGE_START_RUN,
                ImageResource.builder()
                    .setAndroidResourceByResid(
                        AndroidImageResourceByResId.builder()
                            .setResourceId(R.drawable.ic_run)
                    )
            )
            .build()
    }

Baca blok kode untuk mengetahui peristiwa yang sedang terjadi.

Seperti yang Anda ingat dari langkah pertama kita dengan onTileRequest(), kita menyetel nomor versi resource.

Di sini, kita menyetel nomor versi resource yang sama di builder Resource untuk mencocokkan kartu dengan resource yang tepat.

Selanjutnya, kita perlu memetakan elemen tata letak Image apa pun yang kita buat ke gambar sebenarnya menggunakan metode addIdToImageMapping(). Anda dapat melihat bahwa kita menggunakan nama konstanta yang sama seperti sebelumnya, yakni ID_IMAGE_START_RUN, dan sekarang kita menetapkan drawable khusus yang ingin ditampilkan dalam .setResourceId(R.drawable.ic_run).

Sekarang, coba jalankan dan Anda akan melihat UI yang lengkap.

c6e1959693cded21.png

Sebagai langkah terakhir, kita ingin menambahkan tindakan klik ke kartu. Tindakan ini dapat membuka Activity dalam aplikasi Wear OS atau, dalam kasus code lab ini, hanya memicu pembaruan pada Kartu itu sendiri.

Cari "TODO: Add click (START)" dan ganti komentar DO LATER dengan kode di bawah ini.

Ingatlah untuk tidak menghapus panggilan build() di bagian akhir blok kode dari aslinya.

Langkah 11

                    // TODO: Add click (START)
                    .setClickable(
                        Clickable.builder()
                            .setId(ID_CLICK_START_RUN)
                            .setOnClick(ActionBuilders.LoadAction.builder())
                    )
                    // TODO: Add click (END)

Baca blok kode untuk mengetahui peristiwa yang sedang terjadi.

Dengan menambahkan pengubah Clickable ke elemen tata letak, Anda dapat bereaksi terhadap pengguna yang mengetuk elemen tata letak tersebut. Sebagai reaksi terhadap peristiwa klik, Anda dapat melakukan dua tindakan:

  • LaunchAction: meluncurkan aktivitas.
  • LoadAction: memaksa memuat ulang Kartu dengan memanggil onTileRequest().

Dalam kasus kita, kita menetapkan pengubah yang dapat diklik, tetapi menggunakan LoadAction untuk memuat ulang Kartu itu sendiri dengan baris sederhana ActionBuilders.LoadAction.builder(). Tindakan ini memicu panggilan ke onTileRequest(), tetapi meneruskan ID yang kita tetapkan, yakni ID_CLICK_START_RUN.

Jika ingin, kita dapat memeriksa ID terakhir yang dapat diklik yang diteruskan ke onTileRequest() dan merender Kartu yang berbeda berdasarkan ID tersebut. Tampilan akan terlihat seperti ini:

Langkah 12

// Example of getting the clickable Id
override fun onTileRequest(requestParams: TileRequest) = serviceScope.future {

    if (requestParams.state.lastClickableId == ID_CLICK_START_RUN) {
        // Create start run tile...
    } else {
        // Create default tile...
    }
}

Dalam kasus kita, kita tidak melakukannya. Kita hanya memuat ulang Kartu (dan nilai baru diambil dari database palsu kita).

Untuk mempelajari opsi tambahan tentang cara berinteraksi dengan kartu, harap tinjau panduan kami.

Sekarang jalankan kembali Kartu. Anda akan melihat saat tombol diklik bahwa nilai langkah berubah.

e15bba88abc0d832.png

Anda mungkin menduga bahwa kita menentukan layanan yang sudah kita edit di bagian tertentu di manifes.

Cari "TODO: Review service" dan Anda akan melihat kode di bawah ini.

Tidak ada langkah di sini, hanya peninjauan kode yang ada.

Langkah 12

<!-- TODO: Review service -->
<service
   android:name="com.example.wear.tiles.GoalsTileService"
   android:label="@string/fitness_tile_label"
   android:description="@string/tile_description"
   android:icon="@drawable/ic_run"
   android:permission="com.google.android.wearable.permission.BIND_TILE_PROVIDER">
   <intent-filter>
       <action android:name="androidx.wear.tiles.action.BIND_TILE_PROVIDER" />
   </intent-filter>

   <!-- The tile preview shown when configuring tiles on your phone -->
   <meta-data
       android:name="androidx.wear.tiles.PREVIEW"
       android:resource="@drawable/tile_goals" />
</service>

Baca blok kode untuk mengetahui peristiwa yang sedang terjadi.

Ini mirip dengan layanan normal, tetapi kita menambahkan beberapa elemen tertentu untuk Kartu:

  1. Izin untuk mengikat penyedia kartu
  2. Filter intent yang mendaftarkan layanan sebagai penyedia Kartu
  3. Metadata tambahan yang menentukan gambar pratinjau untuk dilihat di ponsel

Selamat! Anda telah mempelajari cara membuat Kartu untuk Wear OS.

Apa selanjutnya?

Lihat codelab Wear OS lainnya:

Bacaan lebih lanjut