Android Studioを使用して、とりあえず動くWatch faceを作る(3/3)(編集中)

2/3からの続きです。
1/3←はこちらです。

#カスタマイズ

2/3で記述したコードは一旦削除して、代わりに以下のコードを入力しましょう。

Implement the Service and Callback Methodsによると、Watch face作成のためのサービスとして、実装するべきkey methodsの概要は、以下の通りです。

なお、以下のコードを入力して実行すると、黒い画面のみが出ます。
何も設定していないので、当然ですが……

public class AnalogWatchFaceService extends CanvasWatchFaceService {

    @Override
    public Engine onCreateEngine() {
        /* provide your watch face implementation */
        return new Engine();
    }

    /* implement service callback methods */
    private class Engine extends CanvasWatchFaceService.Engine {

        @Override
        public void onCreate(SurfaceHolder holder) {
            /* initialize your watch face */
        }

        @Override
        public void onPropertiesChanged(Bundle properties) {
            /* get device features (burn-in, low-bit ambient) */
        }

        @Override
        public void onTimeTick() {
            /* the time changed */
        }

        @Override
        public void onAmbientModeChanged(boolean inAmbientMode) {
            /* the wearable switched between modes */
        }

        @Override
        public void onDraw(Canvas canvas, Rect bounds) {
            /* draw your watch face */
        }

        @Override
        public void onVisibilityChanged(boolean visible) {
            /* the watch face became visible or invisible */
        }
    }
}

##背景をつける

最初に、背景用の変数を宣言します。

  private class Engine extends CanvasWatchFaceService.Engine {

    Bitmap mBackgroundBitmap;
    Bitmap mBackgroundScaledBitmap;

    ...

次に、上記変数へ背景画像を設定します。

    @Override
    public void onCreate(SurfaceHolder holder) {
            /* initialize your watch face */

      Resources resources = AnalogWatchFaceService.this.getResources();
      Drawable backgroundDrawable = resources.getDrawable(R.drawable.bg, null);
      mBackgroundBitmap = ((BitmapDrawable) backgroundDrawable).getBitmap();

      ...

最後に、背景を描画します。
用意した背景画像のサイズが画面の解像度と合わない場合、createScaledBitmapを使用して縮尺を合わせてから、描画しています。

    @Override
    public void onDraw(Canvas canvas, Rect bounds) {
            /* draw your watch face */

      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);

    }

wear→res→drawableに、背景画像にしたいファイルを入れましょう。(hoge.png等)
その後、2つ上のコードにある"R.drawable.bg"を、ファイル名に合わせて書き換えます。
(hoge.pngなら、"R.drawable.hoge"になります)

以下のサイトでは、時間に応じて背景画像を変える方法が紹介されています。

美女時計を作ろう！Android Wear開発入門 30分で作る盤面アプリ

##時針、分針、秒針を加える

ひとまず、動かない時計を作成します。
最初に、各針用の変数を宣言します。

  private class Engine extends CanvasWatchFaceService.Engine {

    Paint mHourPaint;
    Paint mMinutePaint;
    Paint mSecondPaint;

    Time mTime;

    ...

次に、上記変数へ各針を設定します。

    @Override
    public void onCreate(SurfaceHolder holder) {
            /* initialize your watch face */

      ...

      //Paintクラスのインスタンスを取得して、変数に設定する
      mHourPaint = new Paint();
      //色を設定する
      mHourPaint.setARGB(255, 200, 200, 200);
      //線の太さを設定する
      mHourPaint.setStrokeWidth(5.f);
      //アンチエイリアス処理を設定する
      mHourPaint.setAntiAlias(true);
      //線の角の形を設定する
      mHourPaint.setStrokeCap(Paint.Cap.ROUND);

      mMinutePaint = new Paint();
      mMinutePaint.setARGB(255, 200, 200, 200);
      mMinutePaint.setStrokeWidth(3.f);
      mMinutePaint.setAntiAlias(true);
      mMinutePaint.setStrokeCap(Paint.Cap.ROUND);

      mSecondPaint = new Paint();
      mSecondPaint.setARGB(255, 255, 0, 0);
      mSecondPaint.setStrokeWidth(2.f);
      mSecondPaint.setAntiAlias(true);
      mSecondPaint.setStrokeCap(Paint.Cap.ROUND);

      mTime = new Time();

      ...

最後に、作成した各針を描画します。

@Override
    public void onDraw(Canvas canvas, Rect bounds) {
            /* draw your watch face */

      ...

      // 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;

      // Draw hands.
      float secX = (float) Math.sin(secRot) * secLength;
      float secY = (float) -Math.cos(secRot) * secLength;
      canvas.drawLine(centerX, centerY, centerX + secX, centerY +
          secY, mSecondPaint);

      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);

    ...

Canvasクラスにおいては、平面の左上座標を(0,0)としていることに注意して下さい。

ここまでを記述して実行すると、動かない時計が完成すると思います。
なお、上記で使用しているTimeクラスは、API level 22ではdeprecatedとなっていますので、今後はCalendar、GregorianCalendarクラスを使用しましょう。

##時計を動かす

まず、盤面更新の頻度を決定します。秒針は通常1秒に1回動くため、ここでは頻度も1秒に1度とします。

頻度を決定したら、変数"INTERACTIVE_UPDATE_RATE_MS"に頻度を設定します。盤面更新の頻度に係る秒数をミリ秒に変換し、当該変数に設定します。¹

public class AnalogWatchFaceService extends CanvasWatchFaceService {

  private static final long INTERACTIVE_UPDATE_RATE_MS = TimeUnit.SECONDS.toMillis(1);

 ...

以下作成中

1. ここを"5"にすると、盤面更新の頻度は5秒に1度となります。 ↩