The Android Developer Challenge is back! Submit your idea before December 2.

Mengatasi masalah tampilan jam

Membuat tampilan jam kustom untuk Wear OS by Google sangat berbeda dengan membuat notifikasi dan aktivitas khusus perangkat wearable. Kelas ini menunjukkan cara menyelesaikan beberapa masalah yang mungkin Anda alami ketika mengimplementasikan tampilan jam pertama Anda.

Lihat referensi terkait berikut:

Mendeteksi bentuk layar

Perangkat Wear OS tersedia dalam bentuk layar persegi dan bundar. Perangkat dengan layar bundar dapat memiliki inset (atau "dagu") di bagian bawah layar. Tampilan jam Anda harus beradaptasi dan memanfaatkan bentuk layar tertentu, seperti dijelaskan dalam pedoman desain.

Wear OS memungkinkan tampilan jam Anda menentukan bentuk layar pada waktu proses. Untuk mendeteksi apakah layar berbentuk persegi atau lingkaran, ganti metode onApplyWindowInsets() dalam class CanvasWatchFaceService.Engine seperti berikut:

Kotlin

    private inner class Engine : CanvasWatchFaceService.Engine() {
        internal var mIsRound: Boolean = false
        internal var chinSize: Int = 0

        override fun onApplyWindowInsets(insets: WindowInsets) {
            super.onApplyWindowInsets(insets)
            mIsRound = insets.isRound
            chinSize = insets.systemWindowInsetBottom
        }
        ...
    }
    

Java

    private class Engine extends CanvasWatchFaceService.Engine {
        boolean mIsRound;
        int chinSize;

        @Override
        public void onApplyWindowInsets(WindowInsets insets) {
            super.onApplyWindowInsets(insets);
            mIsRound = insets.isRound();
            chinSize = insets.getSystemWindowInsetBottom();
        }
        ...
    }
    

Untuk menyesuaikan desain saat menggambar tampilan jam, periksa nilai variabel anggota mIsRound dan mChinSize.

Mengakomodasi kartu intip

Catatan: Kartu intip hanya muncul pada aplikasi Wear 1.x.

Ketika pengguna menerima notifikasi, kartu notifikasi dapat menutupi ruang layar, bergantung pada gaya UI sistem. Tampilan jam Anda harus beradaptasi dengan situasi ini dengan memastikan bahwa pengguna masih dapat melihat waktu saat kartu notifikasi tersebut muncul.

Tampilan jam analog dapat membuat penyesuaian saat kartu notifikasi muncul, misalnya dengan memperkecil tampilan jam agar pas di dalam bagian layar yang tidak tertutup kartu intip. Tampilan jam digital yang menampilkan waktu di area layar yang tidak tertutup kartu intip biasanya tidak memerlukan penyesuaian. Untuk menentukan ruang kosong di atas kartu intip agar Anda dapat menyesuaikan tampilan jam, gunakan metode WatchFaceService.Engine.getPeekCardPosition()

Dalam mode standby, kartu intip memiliki latar belakang transparan. Jika tampilan jam Anda berisi detail di dekat kartu tersebut dalam mode standby, pertimbangkan untuk menggambar persegi panjang hitam di atasnya guna memastikan bahwa pengguna dapat membaca konten kartu.

Mengonfigurasi indikator sistem

Untuk memastikan bahwa indikator sistem tetap terlihat, Anda dapat mengonfigurasi posisinya di layar dan menentukan apakah indikator tersebut memerlukan perlindungan latar belakang saat Anda membuat instance WatchFaceStyle:

  • Untuk menetapkan posisi status bar, gunakan metode setStatusBarGravity().
  • Untuk menetapkan posisi kata cepat, gunakan metode setHotwordIndicatorGravity().
  • Untuk melindungi status bar dan kata cepat dengan latar belakang abu-abu semitransparan, gunakan metode setViewProtection(). Perlindungan ini biasanya diperlukan jika tampilan jam Anda memiliki latar belakang terang, karena indikator sistem berwarna putih.

Untuk informasi tentang indikator sistem selengkapnya, lihat Mengonfigurasi UI Sistem dan baca pedoman desain.

Menggunakan ukuran relatif

Perangkat Wear OS dari berbagai produsen menggunakan layar dengan ukuran dan resolusi yang berbeda-beda. Tampilan jam Anda harus beradaptasi dengan perbedaan tersebut dengan menggunakan ukuran relatif, bukan nilai piksel absolut.

Saat menggambar tampilan jam, dapatkan ukuran kanvas dengan metode Canvas.getWidth() dan Canvas.getHeight(), lalu setel posisi elemen grafik Anda menggunakan nilai yang merupakan sebagian kecil dari ukuran layar yang terdeteksi. Jika Anda mengubah ukuran elemen tampilan jam sebagai respons terhadap kartu intip, gunakan nilai yang merupakan sepersekian dari ruang yang tersisa di atas kartu untuk menggambar ulang tampilan jam Anda.