Membuat Wajah Jam

Artikel
08/23/2018

Panduan ini menjelaskan cara menerapkan layanan wajah jam tangan kustom untuk Android Wear 1.0. Instruksi langkah demi langkah disediakan untuk membangun layanan wajah jam tangan digital yang dilucuti, diikuti dengan lebih banyak kode untuk membuat wajah jam analog-style.

Gambaran Umum

Dalam panduan ini, layanan wajah jam tangan dasar dibuat untuk menggambarkan hal-hal penting dalam membuat wajah jam Android Wear 1.0 kustom. Layanan wajah jam tangan awal menampilkan jam tangan digital sederhana yang menampilkan waktu saat ini dalam jam dan menit:

Setelah wajah jam tangan digital ini dikembangkan dan diuji, lebih banyak kode ditambahkan untuk meningkatkannya ke wajah jam analog yang lebih canggih dengan tiga tangan:

Layanan wajah watch dibundel dan diinstal sebagai bagian dari aplikasi Wear 1.0. Dalam contoh berikut, MainActivity berisi tidak lebih dari kode dari templat aplikasi Wear 1.0 sehingga layanan wajah jam dapat dikemas dan disebarkan ke jam tangan pintar sebagai bagian dari aplikasi. Akibatnya, aplikasi ini akan berfungsi murni sebagai kendaraan untuk mendapatkan layanan wajah jam tangan yang dimuat ke dalam perangkat Wear 1.0 (atau emulator) untuk penelusuran kesalahan dan pengujian.

Persyaratan

Untuk menerapkan layanan wajah jam tangan, berikut ini diperlukan:

Android 5.0 (API level 21) atau yang lebih tinggi di perangkat Wear atau emulator.
Xamarin Android Wear Support Libraries harus ditambahkan ke proyek Xamarin.Android.

Meskipun Android 5.0 adalah tingkat API minimum untuk menerapkan layanan wajah jam tangan, Android 5.1 atau yang lebih baru direkomendasikan. Perangkat Android Wear yang menjalankan Android 5.1 (API 22) atau yang lebih tinggi memungkinkan aplikasi Wear mengontrol apa yang ditampilkan di layar saat perangkat dalam mode sekitar berdaya rendah. Ketika perangkat meninggalkan mode sekitar berdaya rendah, perangkat berada dalam mode interaktif. Untuk informasi selengkapnya tentang mode ini, lihat Menjaga Aplikasi Anda Tetap Terlihat.

Memulai Proyek Aplikasi

Buat proyek Android Wear 1.0 baru yang disebut WatchFace (untuk informasi selengkapnya tentang membuat proyek Xamarin.Android baru, lihat Halo, Android):

Visual Studio
Visual Studio untuk Mac

Atur nama paket ke com.xamarin.watchface:

Visual Studio
Visual Studio untuk Mac

Visual Studio
Visual Studio untuk Mac

Selain itu, gulir ke bawah dan aktifkan izin INTERNET dan WAKE_LOCK :

Selanjutnya, unduh preview.png - ini akan ditambahkan ke folder drawables nanti di panduan ini.

Menambahkan Paket Keausan Xamarin.Android

Visual Studio
Visual Studio untuk Mac

Mulai Manajer Paket NuGet (di Visual Studio, klik kanan Referensi di Penjelajah Solusi dan pilih Kelola Paket NuGet ...). Perbarui proyek ke versi stabil terbaru Xamarin.Android.Wear:

Selanjutnya, jika Xamarin.Android.Support.v13 diinstal, hapus instalannya:

Buat dan jalankan aplikasi di perangkat Wear atau emulator (untuk informasi selengkapnya tentang cara melakukannya, lihat panduan Memulai ). Anda akan melihat layar aplikasi berikut di perangkat Wear:

Pada titik ini, aplikasi Wear dasar tidak memiliki fungsionalitas watch face karena belum menyediakan implementasi layanan wajah jam. Layanan ini akan ditambahkan berikutnya.

CanvasWatchFaceService

Android Wear mengimplementasikan wajah jam melalui CanvasWatchFaceService kelas . CanvasWatchFaceService berasal dari WatchFaceService, yang berasal dari WallpaperService seperti yang ditunjukkan dalam diagram berikut:

CanvasWatchFaceService termasuk berlapis CanvasWatchFaceService.Engine; ini membuat CanvasWatchFaceService.Engine instans objek yang melakukan pekerjaan aktual menggambar wajah jam. CanvasWatchFaceService.Engine berasal dari WallpaperService.Engine seperti yang ditunjukkan pada diagram di atas.

Tidak ditampilkan dalam diagram ini adalah Canvas yang menggunakan untuk menggambar wajah jam tangan - ini Canvas diteruskan melalui OnDraw metode seperti yang CanvasWatchFaceService dijelaskan di bawah ini.

Di bagian berikut, layanan wajah jam tangan kustom akan dibuat dengan mengikuti langkah-langkah berikut:

Tentukan kelas yang disebut MyWatchFaceService yang berasal dari CanvasWatchFaceService.
Dalam MyWatchFaceService, buat kelas berlapis yang disebut MyWatchFaceEngine yang berasal dari CanvasWatchFaceService.Engine.
Dalam MyWatchFaceService, terapkan CreateEngine metode yang membuat instans MyWatchFaceEngine dan mengembalikannya.
Dalam MyWatchFaceEngine, terapkan OnCreate metode untuk membuat gaya wajah jam dan melakukan tugas inisialisasi lainnya.
Terapkan OnDraw metode MyWatchFaceEngine. Metode ini dipanggil setiap kali wajah jam perlu digambar ulang (yaitu tidak valid). OnDraw adalah metode yang menggambar (dan menggambar ulang) menonton elemen wajah seperti jam, menit, dan tangan kedua.
Terapkan OnTimeTick metode MyWatchFaceEngine. OnTimeTick dipanggil setidaknya sekali per menit (dalam mode sekitar dan interaktif) atau ketika tanggal/waktu telah berubah.

Untuk informasi selengkapnya tentang CanvasWatchFaceService, lihat dokumentasi Android CanvasWatchFaceService API. Demikian pula, CanvasWatchFaceService.Engine menjelaskan implementasi aktual wajah jam.

Tambahkan file baru yang disebut MyWatchFaceService.cs (di Visual Studio, klik kanan WatchFace di Penjelajah Solusi, klik Tambahkan > Item Baru..., dan pilih Kelas).

Ganti isi file ini dengan kode berikut:

using System;
using Android.Views;
using Android.Support.Wearable.Watchface;
using Android.Service.Wallpaper;
using Android.Graphics;

namespace WatchFace
{
    class MyWatchFaceService : CanvasWatchFaceService
    {
        public override WallpaperService.Engine OnCreateEngine()
        {
            return new MyWatchFaceEngine(this);
        }

        public class MyWatchFaceEngine : CanvasWatchFaceService.Engine
        {
            CanvasWatchFaceService owner;
            public MyWatchFaceEngine (CanvasWatchFaceService owner) : base(owner)
            {
                this.owner = owner;
            }
        }
    }
}

MyWatchFaceService (berasal dari CanvasWatchFaceService) adalah "program utama" dari wajah jam. MyWatchFaceService hanya mengimplementasikan satu metode, OnCreateEngine, yang membuat instans MyWatchFaceEngine dan mengembalikan objek (MyWatchFaceEngine berasal dari CanvasWatchFaceService.Engine). Objek yang dibuat MyWatchFaceEngine harus dikembalikan sebagai WallpaperService.Engine. Objek enkapsulasi MyWatchFaceService diteruskan ke konstruktor.

MyWatchFaceEngine adalah implementasi wajah jam tangan yang sebenarnya - berisi kode yang menggambar wajah jam. Ini juga menangani peristiwa sistem seperti perubahan layar (mode sekitar/interaktif, mematikan layar, dll.).

Menerapkan metode Engine OnCreate

Metode ini OnCreate menginisialisasi wajah jam. Tambahkan bidang berikut ke MyWatchFaceEngine:

Paint hoursPaint;

Objek ini Paint akan digunakan untuk menggambar waktu saat ini pada wajah jam. Selanjutnya, tambahkan metode berikut ke MyWatchFaceEngine:

public override void OnCreate(ISurfaceHolder holder)
{
    base.OnCreate (holder);

    SetWatchFaceStyle (new WatchFaceStyle.Builder(owner)
        .SetCardPeekMode (WatchFaceStyle.PeekModeShort)
        .SetBackgroundVisibility (WatchFaceStyle.BackgroundVisibilityInterruptive)
        .SetShowSystemUiTime (false)
        .Build ());

    hoursPaint = new Paint();
    hoursPaint.Color = Color.White;
    hoursPaint.TextSize = 48f;
}

OnCreate dipanggil tak lama setelah MyWatchFaceEngine dimulai. Ini mengatur WatchFaceStyle (yang mengontrol bagaimana perangkat Wear berinteraksi dengan pengguna) dan membuat instans Paint objek yang akan digunakan untuk menampilkan waktu.

Panggilan untuk SetWatchFaceStyle melakukan hal berikut:

Mengatur mode intip ke PeekModeShort, yang menyebabkan pemberitahuan muncul sebagai kartu "intip" kecil pada tampilan.
Mengatur visibilitas latar belakang ke Interruptive, yang menyebabkan latar belakang kartu intip ditampilkan hanya secara singkat jika mewakili pemberitahuan interuptif.
Menonaktifkan waktu antarmuka pengguna sistem default agar tidak digambar pada wajah jam sehingga wajah jam kustom dapat menampilkan waktu sebagai gantinya.

Untuk informasi selengkapnya tentang ini dan opsi gaya wajah jam lainnya, lihat dokumentasi Android WatchFaceStyle.Builder API.

Setelah SetWatchFaceStyle selesai, OnCreate buat instans Paint objek (hoursPaint) dan atur warnanya menjadi putih dan ukuran teksnya menjadi 48 piksel (TextSize harus ditentukan dalam piksel).

Menerapkan metode Engine OnDraw

Metode OnDraw ini mungkin metode yang paling penting CanvasWatchFaceService.Engine - itu adalah metode yang benar-benar menggambar elemen wajah jam seperti digit dan tangan wajah jam. Dalam contoh berikut, ia menggambar string waktu pada wajah jam. Tambahkan metode berikut ke MyWatchFaceEngine:

public override void OnDraw (Canvas canvas, Rect frame)
{
    var str = DateTime.Now.ToString ("h:mm tt");
    canvas.DrawText (str,
        (float)(frame.Left + 70),
        (float)(frame.Top  + 80), hoursPaint);
}

Saat Android memanggil , ia melewati Canvas instans OnDrawdan batas di mana wajah dapat digambar. Dalam contoh kode di atas, DateTime digunakan untuk menghitung waktu saat ini dalam jam dan menit (dalam format 12 jam). String waktu yang dihasilkan digambar pada kanvas dengan menggunakan Canvas.DrawText metode . String akan muncul 70 piksel dari tepi kiri dan 80 piksel ke bawah dari tepi atas.

Untuk informasi selengkapnya tentang metode ini OnDraw , lihat dokumentasi Android onDraw API.

Menerapkan metode Engine OnTimeTick

Android secara berkala memanggil OnTimeTick metode untuk memperbarui waktu yang ditampilkan oleh wajah jam. Ini disebut setidaknya sekali per menit (dalam mode sekitar dan interaktif), atau ketika tanggal/waktu atau zona waktu telah berubah. Tambahkan metode berikut ke MyWatchFaceEngine:

public override void OnTimeTick()
{
    Invalidate();
}

Implementasi OnTimeTick ini hanya memanggil Invalidate. Metode ini Invalidate menjadwalkan OnDraw untuk menggambar ulang wajah jam.

Untuk informasi selengkapnya tentang metode ini OnTimeTick , lihat dokumentasi Android onTimeTick API.

Mendaftarkan CanvasWatchFaceService

MyWatchFaceService harus terdaftar di AndroidManifest.xml aplikasi Wear terkait. Untuk melakukan ini, tambahkan XML berikut ke bagian <application> :

<service
    android:name="watchface.MyWatchFaceService"
    android:label="Xamarin Sample"
    android:allowEmbedded="true"
    android:taskAffinity=""
    android:permission="android.permission.BIND_WALLPAPER">
    <meta-data
        android:name="android.service.wallpaper"
        android:resource="@xml/watch_face" />
    <meta-data
        android:name="com.google.android.wearable.watchface.preview"
        android:resource="@drawable/preview" />
    <intent-filter>
        <action android:name="android.service.wallpaper.WallpaperService" />
        <category android:name="com.google.android.wearable.watchface.category.WATCH_FACE" />
    </intent-filter>
</service>

XML ini melakukan hal berikut:

android.permission.BIND_WALLPAPER Mengatur izin. Izin ini memberikan izin layanan wajah jam untuk mengubah wallpaper sistem pada perangkat. Perhatikan bahwa izin ini harus diatur di bagian <service> daripada di bagian luar <application> .
watch_face Menentukan sumber daya. Sumber daya ini adalah file XML singkat yang mendeklarasikan wallpaper sumber daya (file ini akan dibuat di bagian berikutnya).
Mendeklarasikan gambar yang dapat digambar yang disebut preview yang akan ditampilkan oleh layar pemilih jam tangan.
intent-filter Termasuk untuk memberi tahu Android bahwa MyWatchFaceService akan menampilkan wajah jam tangan.

Yang melengkapi kode untuk contoh dasar WatchFace . Langkah selanjutnya adalah menambahkan sumber daya yang diperlukan.

Menambahkan file sumber daya

Sebelum dapat menjalankan layanan jam tangan, Anda harus menambahkan sumber daya watch_face dan gambar pratinjau. Pertama, buat file XML baru di Resources/xml/watch_face.xml dan ganti kontennya dengan XML berikut:

<?xml version="1.0" encoding="UTF-8"?>
<wallpaper xmlns:android="http://schemas.android.com/apk/res/android" />

Atur tindakan build file ini ke AndroidResource:

Visual Studio
Visual Studio untuk Mac

File sumber daya ini mendefinisikan elemen sederhana wallpaper yang akan digunakan untuk wajah jam.

Jika Anda belum melakukannya, unduh preview.png. Instal di Resources/drawable/preview.png. Pastikan untuk menambahkan file ini ke WatchFace proyek. Gambar pratinjau ini ditampilkan kepada pengguna di pemilih wajah jam di perangkat Wear. Untuk membuat gambar pratinjau untuk wajah jam Anda sendiri, Anda dapat mengambil cuplikan layar wajah jam saat sedang berjalan. (Untuk informasi selengkapnya tentang mendapatkan cuplikan layar dari perangkat Wear, lihat Mengambil cuplikan layar).

Cobalah!

Buat dan sebarkan aplikasi ke perangkat Wear. Anda akan melihat layar aplikasi Wear muncul seperti sebelumnya. Lakukan hal berikut untuk mengaktifkan wajah jam baru:

Geser ke kanan hingga Anda melihat latar belakang layar jam tangan.
Sentuh dan tahan di mana saja di latar belakang layar selama dua detik.
Geser dari kiri ke kanan untuk menelusuri berbagai wajah jam tangan.
Pilih wajah jam Xamarin Sample (ditampilkan di sebelah kanan):
Ketuk wajah jam Xamarin Sample untuk memilihnya.

Ini mengubah wajah jam perangkat Wear untuk menggunakan layanan wajah jam tangan kustom yang diimplementasikan sejauh ini:

Ini adalah wajah jam tangan yang relatif kasar karena implementasi aplikasi sangat minimal (misalnya, tidak termasuk latar belakang wajah jam tangan dan tidak memanggil Paint metode anti-alias untuk meningkatkan penampilan). Namun, itu memang mengimplementasikan fungsionalitas bare-bones yang diperlukan untuk membuat wajah jam tangan kustom.

Di bagian berikutnya, wajah jam ini akan ditingkatkan ke implementasi yang lebih canggih.

Meningkatkan wajah jam

Di sisa panduan ini, MyWatchFaceService ditingkatkan untuk menampilkan wajah jam analog-style dan diperluas untuk mendukung lebih banyak fitur. Kemampuan berikut akan ditambahkan untuk membuat wajah jam yang ditingkatkan:

Menunjukkan waktu dengan jam analog, menit, dan tangan kedua.
Bereaksi terhadap perubahan visibilitas.
Merespons perubahan antara mode sekitar dan mode interaktif.
Membaca properti perangkat Wear yang mendasar.
Secara otomatis memperbarui waktu ketika perubahan zona waktu terjadi.

Sebelum menerapkan perubahan kode di bawah ini, unduh drawable.zip, unzip, dan pindahkan file .png yang tidak di-zip ke Sumber Daya/yang dapat digambar (timpa preview.png sebelumnya). Tambahkan file .png baru ke WatchFace proyek.

Fitur Mesin Pembaruan

Langkah selanjutnya adalah meningkatkan MyWatchFaceService.cs ke implementasi yang menarik wajah jam analog dan mendukung fitur baru. Ganti konten MyWatchFaceService.cs dengan versi analog kode wajah jam tangan di MyWatchFaceService.cs (Anda dapat memotong dan menempelkan sumber ini ke MyWatchFaceService.cs yang ada).

Versi MyWatchFaceService.cs ini menambahkan lebih banyak kode ke metode yang ada dan menyertakan metode penggantian tambahan untuk menambahkan lebih banyak fungsionalitas. Bagian berikut menyediakan tur berpemandu kode sumber.

OnCreate

Metode OnCreate yang diperbarui mengonfigurasi gaya wajah jam seperti sebelumnya, tetapi mencakup beberapa langkah tambahan:

Mengatur gambar latar belakang ke sumber daya xamarin_background yang berada di Resources/drawable-hdpi/xamarin_background.png.
Menginisialisasi Paint objek untuk menggambar tangan jam, tangan menit, dan tangan kedua.
Menginisialisasi Paint objek untuk menggambar tanda centang jam di sekitar tepi wajah jam.
Membuat timer yang memanggil Invalidate metode (redraw) sehingga tangan kedua akan digambar ulang setiap detik. Perhatikan bahwa timer ini diperlukan karena OnTimeTick panggilan Invalidate hanya sekali setiap menit.

Contoh ini hanya mencakup satu gambar xamarin_background.png ; namun, Anda mungkin ingin membuat gambar latar belakang yang berbeda untuk setiap kepadatan layar yang akan didukung wajah jam tangan kustom Anda.

OnDraw

Metode OnDraw yang diperbarui menggambar wajah jam analog-style menggunakan langkah-langkah berikut:

Mendapatkan waktu saat ini, yang sekarang dipertahankan dalam time objek.
Menentukan batas permukaan gambar dan pusatnya.
Menggambar latar belakang, diskalakan agar sesuai dengan perangkat saat latar belakang digambar.
Menggambar dua belas kutu di sekitar wajah jam (sesuai dengan jam pada wajah jam).
Menghitung sudut, rotasi, dan panjang untuk setiap tangan jam tangan.
Menggambar setiap tangan di permukaan jam tangan. Perhatikan bahwa tangan kedua tidak digambar jika jam tangan dalam mode sekitar.

OnPropertiesChanged

Metode ini dipanggil untuk menginformasikan MyWatchFaceEngine tentang properti perangkat Wear (seperti mode sekitar bit rendah dan perlindungan burn-in). Dalam MyWatchFaceEngine, metode ini hanya memeriksa mode sekitar bit rendah (dalam mode sekitar bit rendah, layar mendukung lebih sedikit bit untuk setiap warna).

Untuk informasi selengkapnya tentang metode ini, lihat dokumentasi Android onPropertiesChanged API.

OnAmbientModeChanged

Metode ini dipanggil ketika perangkat Wear memasuki atau keluar dari mode sekitar. Dalam implementasinya MyWatchFaceEngine , wajah jam menonaktifkan anti-aliasing ketika berada dalam mode sekitar.

Untuk informasi selengkapnya tentang metode ini, lihat dokumentasi Android onAmbientModeChanged API.

OnVisibilityChanged

Metode ini dipanggil setiap kali jam tangan menjadi terlihat atau tersembunyi. Dalam MyWatchFaceEngine, metode ini mendaftarkan/membatalkan pendaftaran penerima zona waktu (dijelaskan di bawah) sesuai dengan status visibilitas.

Untuk informasi selengkapnya tentang metode ini, lihat dokumentasi Android onVisibilityChanged API.

Fitur zona waktu

MyWatchFaceService.cs baru juga menyertakan fungsionalitas untuk memperbarui waktu saat ini setiap kali zona waktu berubah (seperti saat bepergian melintasi zona waktu). Di dekat akhir MyWatchFaceService.cs, perubahan BroadcastReceiver zona waktu ditentukan yang menangani objek Niat yang diubah zona waktu:

public class TimeZoneReceiver: BroadcastReceiver
{
    public Action<Intent> Receive { get; set; }
    public override void OnReceive (Context context, Intent intent)
    {
        if (Receive != null)
            Receive (intent);
    }
}

Metode RegisterTimezoneReceiver dan UnregisterTimezoneReceiver dipanggil dengan OnVisibilityChanged metode . UnregisterTimezoneReceiver dipanggil ketika status visibilitas wajah jam diubah menjadi tersembunyi. Ketika wajah jam terlihat lagi, RegisterTimezoneReceiver dipanggil (lihat metode ).OnVisibilityChanged

Metode mesin RegisterTimezoneReceiver mendeklarasikan handler untuk peristiwa penerima Receive zona waktu ini; handler ini memperbarui time objek dengan waktu baru setiap kali zona waktu disilangkan:

timeZoneReceiver = new TimeZoneReceiver ();
timeZoneReceiver.Receive = (intent) => {
    time.Clear (intent.GetStringExtra ("time-zone"));
    time.SetToNow ();
};

Filter niat dibuat dan didaftarkan untuk penerima zona waktu:

IntentFilter filter = new IntentFilter(Intent.ActionTimezoneChanged);
Application.Context.RegisterReceiver (timeZoneReceiver, filter);

Metode UnregisterTimezoneReceiver membatalkan pendaftaran penerima zona waktu:

Application.Context.UnregisterReceiver (timeZoneReceiver);

Menjalankan wajah jam yang ditingkatkan

Buat dan sebarkan aplikasi ke perangkat Wear lagi. Pilih wajah jam dari pemilih wajah jam seperti sebelumnya. Pratinjau di pemilih jam tangan ditampilkan di sebelah kiri, dan wajah jam baru ditampilkan di sebelah kanan:

Dalam cuplikan layar ini, tangan kedua bergerak sekali per detik. Saat Anda menjalankan kode ini pada perangkat Wear, tangan kedua menghilang saat jam tangan memasuki mode sekitar.

Ringkasan

Dalam panduan ini, watchface Android Wear 1.0 kustom diimplementasikan dan diuji. Kelas CanvasWatchFaceService dan CanvasWatchFaceService.Engine diperkenalkan, dan metode penting dari kelas mesin diimplementasikan untuk membuat wajah jam tangan digital sederhana. Implementasi ini diperbarui dengan lebih banyak fungsionalitas untuk membuat wajah jam analog, dan metode tambahan diterapkan untuk menangani perubahan visibilitas, mode sekitar, dan perbedaan dalam properti perangkat. Terakhir, penerima siaran zona waktu diimplementasikan sehingga jam tangan secara otomatis memperbarui waktu ketika zona waktu disilangkan.

Bagikan melalui

Membuat Wajah Jam

Gambaran Umum

Persyaratan

Memulai Proyek Aplikasi

Menambahkan Paket Keausan Xamarin.Android

CanvasWatchFaceService

Menambahkan CanvasWatchFaceService

Menerapkan metode Engine OnCreate

Menerapkan metode Engine OnDraw

Menerapkan metode Engine OnTimeTick

Mendaftarkan CanvasWatchFaceService

Menambahkan file sumber daya

Cobalah!

Meningkatkan wajah jam

Fitur Mesin Pembaruan

OnCreate

OnDraw

OnPropertiesChanged

OnAmbientModeChanged

OnVisibilityChanged

Fitur zona waktu

Menjalankan wajah jam yang ditingkatkan

Ringkasan

Sumber Daya Tambahan:

Bagikan melalui

Membuat Wajah Jam

Gambaran Umum

Persyaratan

Memulai Proyek Aplikasi

Menambahkan Paket Keausan Xamarin.Android

CanvasWatchFaceService

Menambahkan CanvasWatchFaceService

Menerapkan metode Engine OnCreate

Menerapkan metode Engine OnDraw

Menerapkan metode Engine OnTimeTick

Mendaftarkan CanvasWatchFaceService

Menambahkan file sumber daya

Cobalah!

Meningkatkan wajah jam

Fitur Mesin Pembaruan

OnCreate

OnDraw

OnPropertiesChanged

OnAmbientModeChanged

OnVisibilityChanged

Fitur zona waktu

Menjalankan wajah jam yang ditingkatkan

Ringkasan

Link Terkait

Sumber Daya Tambahan: