Membuat Android Wear Watch Face

() translation by (you can also view the original English article)

Salah satu fitur yang membuat Android begitu istimewa adalah kemampuan untuk menyesuaikan setiap aspek dari pengalaman pengguna. Ketika memakai Android pertama kali diluncurkan di Google i/o 2014, banyak developer dan user menemukan bahwa ini tidak benar untuk smart watches, sebagai API resmi untuk membuat watch faces itu terasa hilang. Mengingat bahwa kemampuan untuk membuat custom watch faces adalah salah satu kunci ingin dari pengguna, hal ini tidak mengherankan bahwa developer menemukan cara untuk membuat watch faces mereka sendiri dengan tidak terdokumentasikan hack di Android Wear.

Untungnya, Google cepat membiarkan semua orang tahu bahwa API resmi di jalan dan di Desember 2014 yang API akhirnya dirilis ke komunitas development. Dalam artikel ini, Anda akan belajar tentang official Watch Faces API untuk memakai Android dan implementasi simple digital watch face bahwa Anda akan mampu memperluas pada kebutuhan Anda sendiri. Menerapkan watch faces dapat sedikit verbose, tetapi Anda dapat menemukan contoh aplikasi untuk artikel ini pada GitHub.

1. menyiapkan IDE Anda

Hal pertama yang Anda akan perlu untuk membuat wajah menonton Anda sendiri adalah mendapatkan proyek Anda di Android Studio. Ketika membuat proyek Anda, pilih Phone and Tablet dengan SDK Minimum API 18 sebagai Android 4.3 versi terendah dari sistem operasi untuk mendukung dibundel memakai Android aplikasi. Anda juga perlu untuk memeriksa Wear box memakai dengan Minimum SDK dari API 21 dipilih. Anda dapat melihat contoh dari Target Android Device layar akan terlihat seperti apa.

Ketika Anda mendapatkan ke dua Add an Activity, pilih Add No Activity untuk kedua layar.

Setelah mengklik Finish, project enviroment Anda harus membangun dan memiliki modul untuk mobile dan satu lagi untuk wear.

2. Membuat Wear Watch Service

Android memakai mengimplementasikan watch facdes melalui WatchFaceService. Dalam artikel ini, Anda akan membuat ekstensi CanvasWatchFaceService kelas, yang merupakan implementasi WatchFaceService yang juga menyediakan sebuah Canvas untuk menggambar watch face. Mulailah dengan membuat kelas Java baru di bawah modul wear di Studio Android yang extend CanvasWatchFaceService.

1	public class WatchFaceService extends CanvasWatchFaceService

Setelah Anda memiliki kelas Anda, Anda akan perlu untuk membuat inner kelas, WatchFaceEngine dalam file sumber dari artikel ini, yang extend Engine. Ini adalah watch face engine yang menangani sistem event, seperti layar mematikan atau pergi ke modus ambient.

1	private class WatchFaceEngine extends Engine

Ketika kode stub untuk WatchFaceEngine dimasukan, kembali ke luar kelas dan meng-override metode onCreateEngine untuk kembali ke kelas inner yang baru. Ini akan mengasosiasikan watch face service dengan kode yang akan mendorong tampilan.

1	@Override
2	public Engine onCreateEngine() {
3	return new WatchFaceEngine();
4	}

Setelah Anda memiliki layanan tulang telanjang menempatkan bersama-sama, Anda dapat melanjutkan untuk tugas-tugas rumah tangga umum memperbarui file AndroidManifest sehingga layanan Anda akan ditemukan oleh Android Wear. Perlu diketahui bahwa kode Anda saat ini tidak akan melakukan apa pun belum. Kami akan kembali ke kelas ini dan flesh out engine setelah melakukan beberapa project housekeeping.

3. memperbarui AndroidManifest file

Buka AndroidManifest.xml file dalam modul wear. Di dekat bagian atas Anda harus sudah melihat garis yang mengatakan:

1	<uses-feature android:name="android.hardware.type.watch" />

Di bawah baris tersebut, kita perlu menambahkan dua permission yang diperlukan untuk watch face. Persyaratan tersebut adalah:

1	<uses-permission android:name="com.google.android.permission.PROVIDE_BACKGROUND" />
2	<uses-permission android:name="android.permission.WAKE_LOCK" />

Setelah permission Anda ditetapkan, Anda akan perlu untuk menambahkan sebuah node untuk layanan Anda di node application dengan permission untuk BIND_WALLPAPER, beberapa set meta-data yang berisi referensi gambar wajah Anda menonton untuk layar seleksi (dalam contoh ini kita hanya menggunakan ikon pelancar), dan intent-filter untuk membiarkan sistem mengetahui bahwa layanan Anda dimaksudkan untuk menampilkan watch face.

<service android:name=".service.CustomWatchFaceService"
    android:label="Tuts+ Wear Watch Face"
    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="@mipmap/ic_launcher" />
    <meta-data
        android:name="com.google.android.wearable.watchface.preview_circular"
        android:resource="@mipmap/ic_launcher" />
    <intent-filter>
        <action android:name="android.service.wallpaper.WallpaperService" />
        <category android:name="com.google.android.wearable.watchface.category.WATCH_FACE" />
    </intent-filter>

</service>

Setelah wear manifest selesai, Anda akan perlu untuk membuka AndroidManifest.xml file pada modul mobile dan menambahkan dalam dua permission kami digunakan dalam modul wear untuk PROVIDE_BACKGROUND dan WAKE_LOCK, karena Android memakai mengharuskan wear dan mobile modul meminta permission yang sama untuk wear APK untuk diinstal pada user watch. Setelah kedua file manifest diisi, Anda dapat kembali ke CustomWatchFaceService.java untuk mulai menerapkan engine.

4. Memulai Engine anda

Objek Engine yang terkait dengan layanan Anda adalah apa yang mendorong watch face anda. Ini menangani timer, menampilkan user interface Anda, bergerak masuk dan keluar dari modus ambient, dan mendapatkan informasi tentang tampilan fisik watch. Singkatnya, ini adalah dimana magic happen.

Langkah 1: Mendefinisikan nilai-nilai yang diperlukan dan variabel

Hal pertama yang Anda akan ingin lakukan adalah menerapkan serangkaian variabel member di engine Anda untuk melacak perangkat state, timer interval dan atribut untuk tampilan Anda.

//Member variables
private Typeface WATCH_TEXT_TYPEFACE = Typeface.create( Typeface.SERIF, Typeface.NORMAL );

private static final int MSG_UPDATE_TIME_ID = 42;
private long mUpdateRateMs = 1000;

private Time mDisplayTime;

private Paint mBackgroundColorPaint;
private Paint mTextColorPaint;

private boolean mHasTimeZoneReceiverBeenRegistered = false;
private boolean mIsInMuteMode;
private boolean mIsLowBitAmbient;

private float mXOffset;
private float mYOffset;

private int mBackgroundColor = Color.parseColor( "black" );
private int mTextColor = Color.parseColor( "red" );

Seperti yang Anda lihat, kita mendefinisikan TypeFace yang kita akan gunakan untuk teks digital watch serta watch face background dan warna teks. Objek Time yang digunakan untuk, Anda dapat menebaknya, keeping tract waktu device saat ini. mUpdateRateMs digunakan untuk mengontrol timer bahwa kita perlu untuk menerapkan untuk memperbarui kami watch face setiap detik (maka 1000 milidetik nilai untuk mUpdateRateMs), karena WatchFaceService standar hanya terus melacak yang waktu dalam satu menit secara bertahap. mXOffset dan mYOffset didefinisikan setelah engine tahu bentuk fisik watch sehingga facth watch kita dapat ditarik tanpa menjadi terlalu dekat ke atas atau ke kiri layar, atau dipotong dengan sudut bulat. Nilai-nilai boolean tiga yang digunakan untuk melacak berbagai perangkat dan aplikasi state.

Objek berikutnya yang Anda akan perlu untuk menentukan adalah penerima siaran yang menangani situasi dimana pengguna dapat bepergian dan mengubah zona waktu. Penerima ini hanya membersihkan out zona waktu disimpan dan me-reset waktu tampilan.

final BroadcastReceiver mTimeZoneBroadcastReceiver = new BroadcastReceiver() {
    @Override
    public void onReceive(Context context, Intent intent) {
        mDisplayTime.clear( intent.getStringExtra( "time-zone" ) );
        mDisplayTime.setToNow();
    }
};

Setelah Penerima Anda didefinisikan, tujuan akhir Anda akan perlu untuk membuat di bagian atas engine Anda adalah sebuah Handler untuk mengurus memperbarui watch face setiap detik. Hal ini diperlukan karena keterbatasan WatchFaceService yang dibahas di atas. Jika Anda watch face hanya perlu diperbarui setiap menit, maka Anda dapat dengan aman mengabaikan bagian ini.

private final Handler mTimeHandler = new Handler() {
    @Override
    public void handleMessage(Message msg) {
        switch( msg.what ) {
            case MSG_UPDATE_TIME_ID: {
                invalidate();
                if( isVisible() && !isInAmbientMode() ) {
                    long currentTimeMillis = System.currentTimeMillis();
                    long delay = mUpdateRateMs - ( currentTimeMillis % mUpdateRateMs );
                    mTimeHandler.sendEmptyMessageDelayed( MSG_UPDATE_TIME_ID, delay );
                }
                break;
            }
        }
    }
};

Pelaksanaan Handler cukup sederhana. Pertama-tama memeriksa pesan ID. Jika cocok MSG_UPDATE_TIME_ID, terus invalidate view saat ini untuk redrawing. Setelah view telah di invalidated, Handler memeriksa untuk melihat jika layar terlihat dan tidak dalam modus ambient. Jika terlihat, hal mengirimkan permintaan berulang sedetik kemudian. Alasan kami hanya mengulangi tindakan di Handler ketika watch face terlihat dan tidak dalam modus ambient adalah bahwa hal itu dapat sedikit baterai intensif untuk terus update setiap detik. Jika pengguna tidak melihat layar, kita hanya kembali pada implementasi WatchFaceService yang update setiap menit.

Langkah 2: Initializing Engine

Sekarang bahwa variabel dan objek dinyatakan, saatnya untuk memulai initializing watch face. Engine ini memiliki onCreate metode yang harus digunakan untuk membuat objek dan tugas-tugas lain yang dapat mengambil sejumlah besar waktu dan baterai. Anda juga akan ingin untuk mengatur beberapa falg untuk WatchFaceStyle di sini untuk mengontrol bagaimana sistem berinteraksi dengan pengguna ketika watch face Anda aktif.

@Override
public void onCreate(SurfaceHolder holder) {
    super.onCreate(holder);

    setWatchFaceStyle( new WatchFaceStyle.Builder( CustomWatchFaceService.this )
                    .setBackgroundVisibility( WatchFaceStyle.BACKGROUND_VISIBILITY_INTERRUPTIVE )
                    .setCardPeekMode( WatchFaceStyle.PEEK_MODE_VARIABLE )
                    .setShowSystemUiTime( false )
                    .build()
    );

    mDisplayTime = new Time();

    initBackground();
    initDisplayText();
}

Untuk contoh aplikasi, Anda akan menggunakan setWatchFaceStyle untuk mengatur background kartu notification singkat menunjukkan jika jenis kartu ditetapkan sebagai interruptive. Anda juga akan mengatur modus mengintip sehingga notification card hanya mengambil ruang sebanyak yang diperlukan.

Akhirnya, Anda akan ingin memberitahu sistem untuk menunjukkan waktu standar karena Anda akan menampilkan itu sendiri. Sementara ini hanya beberapa pilihan yang tersedia, Anda dapat menemukan lebih banyak informasi dalam dokumentasi resmi untuk WatchFaceStyle.Builder objek.

Setelah WatchFaceStyle Anda telah ditetapkan, Anda dapat menginisialisasi mDisplayTime sebagai objek Time baru.

initBackground dan initDisplayText mengalokasikan cat dua objek yang Anda tetapkan di bagian atas Paint. Latar belakang dan teks kemudian memiliki warna mereka mengatur dan teks telah menetapkan ukuran huruf dan font, sementara juga berputar pada anti-aliasing.

private void initBackground() {
    mBackgroundColorPaint = new Paint();
    mBackgroundColorPaint.setColor( mBackgroundColor );
}

private void initDisplayText() {
    mTextColorPaint = new Paint();
    mTextColorPaint.setColor( mTextColor );
    mTextColorPaint.setTypeface( WATCH_TEXT_TYPEFACE );
    mTextColorPaint.setAntiAlias( true );
    mTextColorPaint.setTextSize( getResources().getDimension( R.dimen.text_size ) );
}

Langkah 3: Menangani perangkat state

Selanjutnya, Anda harus menerapkan berbagai metode dari kelas Engine yang dipicu oleh perubahan status perangkat. Kita akan mulai dengan pergi ke onVisibilityChanged metode, yang disebut saat pengguna menyembunyikan atau menunjukkan watch face.

@Override
public void onVisibilityChanged( boolean visible ) {
    super.onVisibilityChanged(visible);

    if( visible ) {
        if( !mHasTimeZoneReceiverBeenRegistered ) {

            IntentFilter filter = new IntentFilter( Intent.ACTION_TIMEZONE_CHANGED );
            CustomWatchFaceService.this.registerReceiver( mTimeZoneBroadcastReceiver, filter );

            mHasTimeZoneReceiverBeenRegistered = true;
        }

        mDisplayTime.clear( TimeZone.getDefault().getID() );
        mDisplayTime.setToNow();
    } else {
        if( mHasTimeZoneReceiverBeenRegistered ) {
            CustomWatchFaceService.this.unregisterReceiver( mTimeZoneBroadcastReceiver );
            mHasTimeZoneReceiverBeenRegistered = false;
        }
    }

    updateTimer();
}

Ketika metode ini disebut, itu akan memeriksa untuk melihat apakah watch face terlihat atau tidak. Jika menonton wajah terlihat, tampaknya untuk melihat apakah BroadcastReceiver yang Anda tetapkan di bagian atas Engine terdaftar. Jika tidak, metode menciptakan IntentFilter untuk tindakan ACTION_TIMEZONE_CHANGED dan register BroadcastReceiver mendengarkan untuk itu.

Jika watch face tidak terlihat, metode ini akan memeriksa untuk melihat apakah BroadcastReceiver bisa di unregister. Setelah BroadcastReceiver telah ditangani, updateTimer dipanggil untuk memicu invalid watch face dan redraw watch face. updateTimer memberhikan semua Handler yang tertunda dan memeriksa untuk melihat apakah lain harus dikirim.

private void updateTimer() {
    mTimeHandler.removeMessages( MSG_UPDATE_TIME_ID );
    if( isVisible() && !isInAmbientMode() ) {
        mTimeHandler.sendEmptyMessage( MSG_UPDATE_TIME_ID );
    }
}

Langkah 4: Bekerja sama dengan Wearable Hardware

Ketika layanan Anda dikaitkan dengan memakai Android, onApplyWindowInsets dipanggil. Ini digunakan untuk menentukan apakah perangkat watch face Anda berjalan pada bulat atau persegi. Hal ini memungkinkan Anda mengubah watch face Anda untuk menyesuaikan dengan hardware.

Ketika metode ini disebut dalam aplikasi sampel, metode ini hanya memeriksa bentuk perangkat dan perubahan x offset digunakan untuk drawing watch face untuk memastikan watch face Anda terlihat pada perangkat.

@Override
public void onApplyWindowInsets(WindowInsets insets) {
    super.onApplyWindowInsets(insets);

    mYOffset = getResources().getDimension( R.dimen.y_offset );

    if( insets.isRound() ) {
        mXOffset = getResources().getDimension( R.dimen.x_offset_round );
    } else {
        mXOffset = getResources().getDimension( R.dimen.x_offset_square );
    }
}

Metode berikutnya yang akan Anda perlukan untuk menimpa adalah onPropertiesChanged. Metode ini disebut ketika properti hardware untuk memakai perangkat yang ditentukan, misalnya, jika perangkat mendukung burn-in perlindungan atau modus ambient bit rendah.

Dalam metode ini, Anda memeriksa jika atribut tersebut berlaku untuk perangkat yang menjalankan watch face Anda dan menyimpannya dalam variabel anggota yang didefinisikan di atas Engine Anda.

@Override
public void onPropertiesChanged( Bundle properties ) {
    super.onPropertiesChanged( properties );

    if( properties.getBoolean( PROPERTY_BURN_IN_PROTECTION, false ) ) {
        mIsLowBitAmbient = properties.getBoolean( PROPERTY_LOW_BIT_AMBIENT, false );
    }
}

Langkah 5: Conserving baterai dalam mode Ambient dan Muted

Setelah Anda menangani initial state perangkat, Anda akan ingin untuk implementasi onAmbientModeChanged dan onInterruptionFilterChanged. Seperti namanya, onAmbientModeChanged dipanggil ketika perangkat bergerak dalam atau keluar dari modus ambient.

Jika perangkat ini dalam ambient mode, Anda akan ingin mengubah warna Anda watch face menjadi hitam dan putih untuk menjadi sadar pengguna baterai. Ketika perangkat kembali dari ambient mode, Anda dapat menyetel warna wajah watch face. Anda juga akan ingin untuk berhati-hati dari anti-aliasing untuk perangkat yang meminta dukungan ambient bit rendah. Setelah semua variabel flag yang ditetapkan, Anda dapat menyebabkan watch face invalide redraw dan kemudian memeriksa jika satu timer kedua harus mulai.

@Override
public void onAmbientModeChanged(boolean inAmbientMode) {
    super.onAmbientModeChanged(inAmbientMode);

    if( inAmbientMode ) {
        mTextColorPaint.setColor( Color.parseColor( "white" ) );
    } else {
        mTextColorPaint.setColor( Color.parseColor( "red" ) );
    }

    if( mIsLowBitAmbient ) {
        mTextColorPaint.setAntiAlias( !inAmbientMode );
    }

    invalidate();
    updateTimer();
}

onInterruptionFilterChanged dipanggil ketika pengguna secara manual perubahan pengaturan gangguan pada dpt dipakai mereka. Ketika ini terjadi, Anda akan perlu untuk memeriksa jika muted dan kemudian mengubah antarmuka pengguna yang sesuai. Dalam situasi ini, Anda akan mengubah transparansi watch face, menetapkan Handler Anda hanya update setiap menit jika dibisukan, dan kemudian redraw watch face Anda.

@Override
public void onInterruptionFilterChanged(int interruptionFilter) {
    super.onInterruptionFilterChanged(interruptionFilter);

    boolean isDeviceMuted = ( interruptionFilter == android.support.wearable.watchface.WatchFaceService.INTERRUPTION_FILTER_NONE );
    if( isDeviceMuted ) {
        mUpdateRateMs = TimeUnit.MINUTES.toMillis( 1 );
    } else {
        mUpdateRateMs = DEFAULT_UPDATE_RATE_MS;
    }

    if( mIsInMuteMode != isDeviceMuted ) {
        mIsInMuteMode = isDeviceMuted;
        int alpha = ( isDeviceMuted ) ? 100 : 255;
        mTextColorPaint.setAlpha( alpha );
        invalidate();
        updateTimer();
    }
}

Bila perangkat Anda dalam modus ambient, Handler timer akan dinonaktifkan. Watch face masih dapat memperbarui saat setiap menit melalui menggunakan metode built-in onTimeTick untuk invalide Canvas.

@Override
public void onTimeTick() {
    super.onTimeTick();

    invalidate();
}

Langkah 6: Drawing Watch Face

Setelah semua kontinjensi Anda dilindungi, saatnya untuk akhirnya menarik keluar Watch face Anda. CanvasWatchFaceService menggunakan objek Canvas standar, sehingga Anda akan perlu untuk menambahkan onDraw ke Engine Anda dan secara manual menarik keluar watch face anda.

Dalam tutorial ini kita hanya akan menggambar representasi teks waktu, meskipun Anda bisa mengubah Anda onDraw untuk dengan mudah mendukung analog watch face. Dalam metode ini, Anda akan ingin untuk memverifikasi bahwa Anda menampilkan waktu yang tepat dengan memperbarui objek Time Anda dan kemudian Anda dapat mulai menerapkan watch face Anda.

@Override
public void onDraw(Canvas canvas, Rect bounds) {
    super.onDraw(canvas, bounds);

    mDisplayTime.setToNow();

    drawBackground( canvas, bounds );
    drawTimeText( canvas );
}

drawBackground berlaku warna solid untuk latar belakang wear device.

1	private void drawBackground( Canvas canvas, Rect bounds ) {
2	canvas.drawRect( 0, 0, bounds.width(), bounds.height(), mBackgroundColorPaint );
3	}

drawTimeText, namun, membuat teks waktu yang akan ditampilkan dengan bantuan beberapa metode helper dan kemudian berlaku untuk canvas di x dan y offset poin yang Anda tetapkan dalam onApplyWindowInsets.

private void drawTimeText( Canvas canvas ) {
    String timeText = getHourString() + ":" + String.format( "%02d", mDisplayTime.minute );
    if( isInAmbientMode() || mIsInMuteMode ) {
        timeText += ( mDisplayTime.hour < 12 ) ? "AM" : "PM";
    } else {
        timeText += String.format( ":%02d", mDisplayTime.second);
    }
    canvas.drawText( timeText, mXOffset, mYOffset, mTextColorPaint );
}

private String getHourString() {
    if( mDisplayTime.hour % 12 == 0 )
        return "12";
    else if( mDisplayTime.hour <= 12 )
        return String.valueOf( mDisplayTime.hour );
    else
        return String.valueOf( mDisplayTime.hour - 12 );
}

Kesimpulan

Setelah Anda telah menerapkan metode untuk drawing watch face Anda, Anda harus siap dengan pengetahuan dasar yang diperlukan untuk pergi keluar dan membuat watch face Anda sendiri. Yang menyenangkan tentang Android watch face adalah bahwa ini adalah hanya menggaruk permukaan dari apa yang mungkin.

Anda dapat menambahkan pendamping konfigurasi kegiatan watch atau telepon, menggantikan Canvas berbasis watch face dengan implementasi OpenGL, atau mendapatkan kelas Anda sendiri dari WatchFaceService untuk memenuhi kebutuhan Anda.

Tambahkan ke bahwa Anda dapat mengakses api atau informasi lainnya dari pengguna telepon dan kemungkinan tampaknya tak ada habisnya. Mendapatkan kreatif dengan watch face Anda dan menikmati.