編寫(xiě):heray1990 - 原文: http://developer.android.com/training/wearables/watch-faces/drawing.html

配置完工程和添加了實(shí)現(xiàn)表盤(pán)服務(wù)（watch face service）的類(lèi)之后，我們可以開(kāi)始編寫(xiě)初始化和繪制自定義表盤(pán)的代碼了。

這節(jié)課通過(guò) Android SDK 中的 WatchFace 示例，來(lái)介紹系統(tǒng)是如何調(diào)用表盤(pán)服務(wù)的方法。這個(gè)示例位于 android-sdk/samples/android-21/wearable/WatchFace 目錄。這里描述服務(wù)實(shí)現(xiàn)的很多方面（例如初始化和檢測(cè)設(shè)備功能）可以應(yīng)用到任意表盤(pán)，所以我們可以重用一些代碼到我們的表盤(pán)當(dāng)中。

http://wiki.jikexueyuan.com/project/android-training-geek/images/preview_digital.png" alt="" />

Figure 1. WatchFace 示例中的模擬和數(shù)字表盤(pán)

初始化表盤(pán)

當(dāng)系統(tǒng)加載我們的服務(wù)時(shí)，我們應(yīng)該分配和初始化表盤(pán)需要的大部分資源，包括加載位圖資源、創(chuàng)建定時(shí)器對(duì)象來(lái)運(yùn)行自定義動(dòng)畫(huà)、配置顏色風(fēng)格和執(zhí)行其他運(yùn)算。我們通常只執(zhí)行一次這些操作和重用它們的結(jié)果。這個(gè)習(xí)慣可以提高表盤(pán)的性能并且更容易地維護(hù)代碼。

初始化表盤(pán)，需要：

1. 為自定義定時(shí)器、圖形對(duì)象和其它組件聲明變量。
2. 在 Engine.onCreate() 方法中初始化表盤(pán)組件。
3. 在 Engine.onVisibilityChanged() 方法中初始化自定義定時(shí)器。

下面的部分詳細(xì)介紹了上述幾個(gè)步驟。

聲明變量

當(dāng)系統(tǒng)加載我們的服務(wù)時(shí)，我們初始化的那些資源需要在我們實(shí)現(xiàn)的不同點(diǎn)都可以被訪(fǎng)問(wèn)，所以我們可以重用這些資源。我們可以通過(guò)在 WatchFaceService.Engine 實(shí)現(xiàn)中為這些資源聲明成員變量來(lái)達(dá)到上述目的。

為下面的組件聲明變量：

圖形對(duì)象

大部分表盤(pán)至少包含一個(gè)位圖用于表盤(pán)的背景，如創(chuàng)建實(shí)施策略描述的一樣。我們可以使用額外的位圖圖像來(lái)表示表盤(pán)的時(shí)鐘指針或者其它設(shè)計(jì)元素。

定時(shí)計(jì)時(shí)器

當(dāng)時(shí)間變化時(shí)，系統(tǒng)每隔一分鐘會(huì)通知表盤(pán)一次，但一些表盤(pán)會(huì)根據(jù)自定義的時(shí)間間隔來(lái)運(yùn)行動(dòng)畫(huà)。在這種情況下，我們需要用一個(gè)按照所需頻率計(jì)數(shù)的自定義定時(shí)器來(lái)刷新表盤(pán)。

時(shí)區(qū)變化接收器

用戶(hù)可以在旅游的時(shí)候調(diào)整時(shí)區(qū)，系統(tǒng)會(huì)廣播這個(gè)事件。我們的服務(wù)實(shí)現(xiàn)必須注冊(cè)一個(gè)廣播接收器，該廣播接收器用于接收時(shí)區(qū)改變或者更新時(shí)間的通知。

WatchFace 示例中的 AnalogWatchFaceService.Engine 類(lèi)定義了上述變量（見(jiàn)下面的代碼）。自定義定時(shí)器實(shí)現(xiàn)為一個(gè) Handler 實(shí)例，該 Handler 實(shí)例使用線(xiàn)程的消息隊(duì)列發(fā)送和處理延遲的消息。對(duì)于這個(gè)特定的表盤(pán)，自定義定時(shí)器每秒計(jì)數(shù)一次。當(dāng)定時(shí)器計(jì)數(shù)，handler 調(diào)用 invalidate() 方法，然后系統(tǒng)調(diào)用 onDraw() 方法重新繪制表盤(pán)。

private class Engine extends CanvasWatchFaceService.Engine {
    static final int MSG_UPDATE_TIME = 0;

    /* a time object */
    Time mTime;

    /* device features */
    boolean mLowBitAmbient;

    /* graphic objects */
    Bitmap mBackgroundBitmap;
    Bitmap mBackgroundScaledBitmap;
    Paint mHourPaint;
    Paint mMinutePaint;
    ...

    /* handler to update the time once a second in interactive mode */
    final Handler mUpdateTimeHandler = new Handler() {
        @Override
        public void handleMessage(Message message) {
            switch (message.what) {
                case MSG_UPDATE_TIME:
                    invalidate();
                    if (shouldTimerBeRunning()) {
                        long timeMs = System.currentTimeMillis();
                        long delayMs = INTERACTIVE_UPDATE_RATE_MS
                                - (timeMs % INTERACTIVE_UPDATE_RATE_MS);
                        mUpdateTimeHandler
                            .sendEmptyMessageDelayed(MSG_UPDATE_TIME, delayMs);
                    }
                    break;
            }
        }
    };

    /* receiver to update the time zone */
    final BroadcastReceiver mTimeZoneReceiver = new BroadcastReceiver() {
        @Override
        public void onReceive(Context context, Intent intent) {
            mTime.clear(intent.getStringExtra("time-zone"));
            mTime.setToNow();
        }
    };

    /* service methods (see other sections) */
    ...
}

初始化表盤(pán)組件

在為位圖資源、色彩風(fēng)格和其它每次重新繪制表盤(pán)都會(huì)重用的組件聲明成員變量之后，在系統(tǒng)加載服務(wù)時(shí)初始化這些組件。只初始化這些組件一次，然后重用它們以提升性能和電池使用時(shí)間。

在 Engine.onCreate() 方法中，初始化下面的組件：

• 加載背景圖片。
• 創(chuàng)建風(fēng)格和色彩來(lái)繪制圖形對(duì)象。
• 分配一個(gè)對(duì)象來(lái)保存時(shí)間。
• 配置系統(tǒng) UI。

在 AnalogWatchFaceService 類(lèi)的 Engine.onCreate() 方法初始化這些組件的代碼如下：

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

    /* configure the system UI (see next section) */
    ...

    /* load the background image */
    Resources resources = AnalogWatchFaceService.this.getResources();
    Drawable backgroundDrawable = resources.getDrawable(R.drawable.bg);
    mBackgroundBitmap = ((BitmapDrawable) backgroundDrawable).getBitmap();

    /* create graphic styles */
    mHourPaint = new Paint();
    mHourPaint.setARGB(255, 200, 200, 200);
    mHourPaint.setStrokeWidth(5.0f);
    mHourPaint.setAntiAlias(true);
    mHourPaint.setStrokeCap(Paint.Cap.ROUND);
    ...

    /* allocate an object to hold the time */
    mTime = new Time();
}

當(dāng)系統(tǒng)初始化表盤(pán)時(shí)，只會(huì)加載背景位圖一次。圖形風(fēng)格被 Paint 類(lèi)實(shí)例化。然后我們?cè)?Engine.onDraw() 方法中使用這些風(fēng)格來(lái)繪制表盤(pán)的組件，如繪制表盤(pán)描述的那樣。

初始化自定義定時(shí)器

作為表盤(pán)開(kāi)發(fā)者，我們通過(guò)使定時(shí)器按照要求的頻率計(jì)數(shù)，來(lái)決定設(shè)備在交互模式時(shí)多久更新一次表盤(pán)。這使得我們可以創(chuàng)建自定義的動(dòng)畫(huà)和其它視覺(jué)效果。

Note: 在環(huán)境模式下，系統(tǒng)不會(huì)可靠地調(diào)用自定義定時(shí)器。關(guān)于在環(huán)境模式下更新表盤(pán)的內(nèi)容，請(qǐng)看在環(huán)境模式下更新表盤(pán)。

在聲明變量部分介紹了一個(gè) AnalogWatchFaceService 類(lèi)定義的每秒計(jì)數(shù)一次的定時(shí)器例子。在 Engine.onVisibilityChanged() 方法里，如果滿(mǎn)足如下兩個(gè)條件，則啟動(dòng)自定義定時(shí)器：

• 表盤(pán)可見(jiàn)的。
• 設(shè)備處于交互模式。

如果有必要，AnalogWatchFaceService 會(huì)調(diào)度下一個(gè)定時(shí)器進(jìn)行計(jì)數(shù)：

private void updateTimer() {
    mUpdateTimeHandler.removeMessages(MSG_UPDATE_TIME);
    if (shouldTimerBeRunning()) {
        mUpdateTimeHandler.sendEmptyMessage(MSG_UPDATE_TIME);
    }
}

private boolean shouldTimerBeRunning() {
    return isVisible() && !isInAmbientMode();
}

該自定義定時(shí)器每秒計(jì)數(shù)一次，如聲明變量介紹的一樣。

在 Engine.onVisibilityChanged() 方法中，按要求啟動(dòng)定時(shí)器并為時(shí)區(qū)的變化注冊(cè)接收器：

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

    if (visible) {
        registerReceiver();

        // Update time zone in case it changed while we weren't visible.
        mTime.clear(TimeZone.getDefault().getID());
        mTime.setToNow();
    } else {
        unregisterReceiver();
    }

    // Whether the timer should be running depends on whether we're visible and
    // whether we're in ambient mode), so we may need to start or stop the timer
    updateTimer();
}

當(dāng)表盤(pán)可見(jiàn)時(shí)，onVisibilityChanged() 方法為時(shí)區(qū)變化注冊(cè)了接收器，并且如果設(shè)備在交互模式，則啟動(dòng)自定義定時(shí)器。當(dāng)表盤(pán)不可見(jiàn)，這個(gè)方法停止自定義定時(shí)器并且注銷(xiāo)檢測(cè)時(shí)區(qū)變化的接收器。下面是registerReceiver() 和 unregisterReceiver() 方法的實(shí)現(xiàn)：

private void registerReceiver() {
    if (mRegisteredTimeZoneReceiver) {
        return;
    }
    mRegisteredTimeZoneReceiver = true;
    IntentFilter filter = new IntentFilter(Intent.ACTION_TIMEZONE_CHANGED);
    AnalogWatchFaceService.this.registerReceiver(mTimeZoneReceiver, filter);
}

private void unregisterReceiver() {
    if (!mRegisteredTimeZoneReceiver) {
        return;
    }
    mRegisteredTimeZoneReceiver = false;
    AnalogWatchFaceService.this.unregisterReceiver(mTimeZoneReceiver);
}

在環(huán)境模式下更新表盤(pán)

在環(huán)境模式下，系統(tǒng)每分鐘調(diào)用一次 Engine.onTimeTick() 方法。通常在這種模式下，每分鐘更新一次表盤(pán)已經(jīng)足夠了。為了在環(huán)境模式下更新表盤(pán)，我們必須使用一個(gè)在初始化自定義定時(shí)器介紹的自定義定時(shí)器。

在環(huán)境模式下，大部分表盤(pán)實(shí)現(xiàn)在 Engine.onTimeTick() 方法中簡(jiǎn)單地銷(xiāo)毀畫(huà)布來(lái)重新繪制表盤(pán)：

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

    invalidate();
}

配置系統(tǒng) UI

表盤(pán)不應(yīng)該干涉系統(tǒng) UI 組件，在 Accommodate System UI Element 中有介紹。如果我們的表盤(pán)背景比較亮或者在屏幕的底部附近顯示了信息，那么我們可能要配置 notification cards 的尺寸或者啟用背景保護(hù)。

當(dāng)表盤(pán)在動(dòng)的時(shí)候，Android Wear 允許我們配置系統(tǒng) UI 的下面幾個(gè)方面：

• 指定第一個(gè) notification card 離屏幕有多遠(yuǎn)。
• 指定系統(tǒng)是否將時(shí)間繪制在表盤(pán)上。
• 在環(huán)境模式下，顯示或者隱藏 notification card。
• 用純色背景保護(hù)系統(tǒng)指針。
• 指定系統(tǒng)指針的位置。

為了配置這些方面的系統(tǒng) UI，需要?jiǎng)?chuàng)建一個(gè) WatchFaceStyle 實(shí)例并且將其傳進(jìn) Engine.setWatchFaceStyle() 方法。

下面是 AnalogWatchFaceService 類(lèi)配置系統(tǒng) UI 的方法：

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

    /* configure the system UI */
    setWatchFaceStyle(new WatchFaceStyle.Builder(AnalogWatchFaceService.this)
            .setCardPeekMode(WatchFaceStyle.PEEK_MODE_SHORT)
            .setBackgroundVisibility(WatchFaceStyle
                                    .BACKGROUND_VISIBILITY_INTERRUPTIVE)
            .setShowSystemUiTime(false)
            .build());
    ...
}

上述的代碼將 card 配置成一行高，card 的背景只會(huì)簡(jiǎn)單地顯示和只用于中斷的 notification，不會(huì)顯示系統(tǒng)時(shí)間（因?yàn)楸肀P(pán)會(huì)繪制自己的時(shí)間）。

我們可以在表盤(pán)實(shí)現(xiàn)的任意時(shí)刻配置系統(tǒng)的 UI 風(fēng)格。例如，如果用戶(hù)選擇了白色背景，我們可以為系統(tǒng)指針添加背景保護(hù)。

更多關(guān)于配置系統(tǒng) UI 的內(nèi)容，請(qǐng)見(jiàn) WatchFaceStyle 類(lèi)的 API 參考文檔。

獲得設(shè)備屏幕信息

當(dāng)系統(tǒng)確定了設(shè)備屏幕的屬性時(shí)，系統(tǒng)會(huì)調(diào)用 Engine.onPropertiesChanged() 方法，例如設(shè)備是否使用低比特率的環(huán)境模式和屏幕是否需要燒毀保護(hù)。

下面的代碼介紹如何獲得這些屬性：

@Override
public void onPropertiesChanged(Bundle properties) {
    super.onPropertiesChanged(properties);
    mLowBitAmbient = properties.getBoolean(PROPERTY_LOW_BIT_AMBIENT, false);
    mBurnInProtection = properties.getBoolean(PROPERTY_BURN_IN_PROTECTION,
            false);
}

當(dāng)繪制表盤(pán)時(shí)，我們應(yīng)該考慮這些設(shè)備屬性。

• 對(duì)于使用低比特率環(huán)境模式的設(shè)備，屏幕在環(huán)境模式下為每種顏色提供更少的比特，所以當(dāng)設(shè)備切換到環(huán)境模式時(shí)，我們應(yīng)該禁用抗鋸齒和位圖濾鏡。
• 對(duì)于要求燒毀保護(hù)的設(shè)備，在環(huán)境模式下避免使用大塊的白色像素，并且不要將內(nèi)容放在離屏幕邊緣 10 個(gè)像素范圍內(nèi)，因?yàn)橄到y(tǒng)會(huì)周期地改變內(nèi)容以避免像素?zé)龤А?/li>

更多關(guān)于低比特率環(huán)境模式和燒毀保護(hù)的內(nèi)容，請(qǐng)見(jiàn) Optimize for Special Screens。更多關(guān)于如何禁用位圖濾鏡的內(nèi)容，請(qǐng)見(jiàn)位圖濾鏡

響應(yīng)兩種模式間的變化

當(dāng)設(shè)備在環(huán)境模式和交互模式之間轉(zhuǎn)換時(shí)，系統(tǒng)會(huì)調(diào)用 Engine.onAmbientModeChanged() 方法。我們的服務(wù)實(shí)現(xiàn)應(yīng)該對(duì)在兩種模式間切換作出必要的調(diào)整，然后調(diào)用 invalidate() 方法來(lái)重新繪制表盤(pán)。

下面的代碼介紹了這個(gè)方法如何在 WatchFace 示例的 AnalogWatchFaceService 類(lèi)中實(shí)現(xiàn)：

@Override
public void onAmbientModeChanged(boolean inAmbientMode) {

    super.onAmbientModeChanged(inAmbientMode);

    if (mLowBitAmbient) {
        boolean antiAlias = !inAmbientMode;
        mHourPaint.setAntiAlias(antiAlias);
        mMinutePaint.setAntiAlias(antiAlias);
        mSecondPaint.setAntiAlias(antiAlias);
        mTickPaint.setAntiAlias(antiAlias);
    }
    invalidate();
    updateTimer();
}

這個(gè)例子對(duì)一些圖形風(fēng)格做出了調(diào)整和銷(xiāo)毀畫(huà)布，使得系統(tǒng)可以重新繪制表盤(pán)。

繪制表盤(pán)

繪制自定義的表盤(pán)，系統(tǒng)調(diào)用帶有 Canvas 實(shí)例和繪制表盤(pán)所在的 bounds 兩個(gè)參數(shù)的 Engine.onDraw() 方法。bounds 參數(shù)說(shuō)明任意內(nèi)插的區(qū)域，如一些圓形設(shè)備底部的“下巴”。我們可以像下面介紹的一樣來(lái)使用畫(huà)布繪制表盤(pán)：

1. 如果是首次調(diào)用 onDraw() 方法，縮放背景來(lái)匹配它。
2. 檢查設(shè)備處于環(huán)境模式還是交互模式。
3. 處理任何圖形計(jì)算。
4. 在畫(huà)布上繪制背景位圖。
5. 使用 Canvas 類(lèi)中的方法繪制表盤(pán)。

在 WatchFace 示例中的 AnalogWatchFaceService 類(lèi)按照如下這些步驟來(lái)實(shí)現(xiàn) onDraw() 方法：

@Override
public void onDraw(Canvas canvas, Rect bounds) {
    // Update the time
    mTime.setToNow();

    int width = bounds.width();
    int height = bounds.height();

    // Draw the background, scaled to fit.
    if (mBackgroundScaledBitmap == null
        || mBackgroundScaledBitmap.getWidth() != width
        || mBackgroundScaledBitmap.getHeight() != height) {
        mBackgroundScaledBitmap = Bitmap.createScaledBitmap(mBackgroundBitmap,
                                         width, height, true /* filter */);
    }
    canvas.drawBitmap(mBackgroundScaledBitmap, 0, 0, null);

    // Find the center. Ignore the window insets so that, on round watches
    // with a "chin", the watch face is centered on the entire screen, not
    // just the usable portion.
    float centerX = width / 2f;
    float centerY = height / 2f;

    // Compute rotations and lengths for the clock hands.
    float secRot = mTime.second / 30f * (float) Math.PI;
    int minutes = mTime.minute;
    float minRot = minutes / 30f * (float) Math.PI;
    float hrRot = ((mTime.hour + (minutes / 60f)) / 6f ) * (float) Math.PI;

    float secLength = centerX - 20;
    float minLength = centerX - 40;
    float hrLength = centerX - 80;

    // Only draw the second hand in interactive mode.
    if (!isInAmbientMode()) {
        float secX = (float) Math.sin(secRot) * secLength;
        float secY = (float) -Math.cos(secRot) * secLength;
        canvas.drawLine(centerX, centerY, centerX + secX, centerY +
                        secY, mSecondPaint);
    }

    // Draw the minute and hour hands.
    float minX = (float) Math.sin(minRot) * minLength;
    float minY = (float) -Math.cos(minRot) * minLength;
    canvas.drawLine(centerX, centerY, centerX + minX, centerY + minY,
                    mMinutePaint);
    float hrX = (float) Math.sin(hrRot) * hrLength;
    float hrY = (float) -Math.cos(hrRot) * hrLength;
    canvas.drawLine(centerX, centerY, centerX + hrX, centerY + hrY,
                    mHourPaint);
}

這個(gè)方法根據(jù)現(xiàn)在的時(shí)間計(jì)算時(shí)鐘指針的位置和使用在 onCreate() 方法中初始化的圖形風(fēng)格將時(shí)鐘指針繪制在背景位圖之上。其中，秒針只會(huì)在交互模式下繪制出來(lái)，環(huán)境模式不會(huì)顯示。

更多的關(guān)于用 Canvas 實(shí)例繪制的內(nèi)容，請(qǐng)見(jiàn) Canvas and Drawables。

在 Android SDK 的 WatchFace 示例包括附加的表盤(pán)，我們可以用作如何實(shí)現(xiàn) onDraw() 方法的例子。