Mtk's Blog: [Android] SurfaceViewのアナログ時計アプリを作ってみました

The analog clock application on SurfaceView
前々回と前回のアナログ時計のアプリをSurfaceViewで表示するように作り直してみました。
OpenGLよりSurfaceViewのほうがずっと簡単です。

今回の開発環境は次の通りです。
・64bit版 Windows8
・32bit版 Eclipse3.7 (Windows XPモードで使用)
・Android-SDK r22.3

針の画像です。

左から秒針、分針、時針のつもりです。
針の画像それぞれのピクセル数は32×128です。一番右の黒い塗りつぶしの領域は使用しません。

Eclipseのパッケージ・エクスプローラーで、プロジェクトの res フォルダーの下に
drawable-nodpi
というフォルダーを作り針の画像を配置します。

以下ソースです。

アクティビティ(MainActivity.java)

package jp.fujiu.surfaceclock;

import java.lang.ref.WeakReference;
import java.util.Calendar;

import android.os.Bundle;
import android.os.Handler;
import android.os.Message;
import android.app.Activity;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Canvas;
import android.graphics.Color;
import android.view.SurfaceView;

public class MainActivity extends Activity {

 private static class  MyHandler extends Handler {
  static final int WHAT = 1;
  private static final long INTERVAL = 50;
  private SurfaceView surface = null;
  
  private Bitmap secNeedleImg = null;
  private Bitmap minNeedleImg = null;
  private Bitmap hourNeedleImg = null;

  private boolean isFast;
  private int centerX = 0;
  private int centerY = 0;
  private int drawX = 0;
  private int drawY = 0;

  //時間
  int preSec = -1;
  
  public MyHandler(WeakReference<MainActivity> activity){
   this.isFast = true;
   this.surface = activity.get().surface;
   this.secNeedleImg = activity.get().secNeedleImg;
   this.minNeedleImg = activity.get().minNeedleImg;
   this.hourNeedleImg = activity.get().hourNeedleImg;
  }
  
  @Override
  public void handleMessage(Message msg) {
   removeMessages(WHAT);
   
   if (!isAlive) {
    //フラグオフなら終了
    return;
   }
   
   //現在時刻から各針の角度を算出
   Calendar now = Calendar.getInstance();
   int sec = now.get(Calendar.SECOND);
   if (sec != preSec){
    preSec = sec;
    float secDegree = (float) sec * 6;
    int min = now.get(Calendar.MINUTE);
    float minDegree = (float) min * 6 + secDegree/60;
    int hour = now.get(Calendar.HOUR);
    float hourDegree = (float) hour * 30 + minDegree/12;
    
    Canvas canvas = surface.getHolder().lockCanvas();
    if (canvas == null) {
     //SurfaceViewの準備が終わってなければ時間を空けてリトライ
     sendEmptyMessageDelayed(WHAT, 10);
     return;
    }
    
    //最初の1回だけの処理
    if (isFast) {
    //中心座標を計算
     centerX = surface.getWidth() / 2;
     centerY = surface.getHeight() / 2;
     drawX = centerX - secNeedleImg.getWidth() / 2;
     drawY = centerY - secNeedleImg.getHeight() / 2;
     isFast = false;
    }
    
    //背景を灰色で塗りつぶし
    canvas.drawColor(Color.GRAY);
    
    //秒針の表示
    canvas.save();
    canvas.rotate(secDegree, centerX, centerY);
    canvas.drawBitmap(secNeedleImg, drawX, drawY, null);
    canvas.restore();
    
    //分針の表示
    canvas.save();
    canvas.rotate(minDegree, centerX, centerY);
    canvas.drawBitmap(minNeedleImg, drawX, drawY, null);
    canvas.restore();
    
    //時針の表示
    canvas.save();
    canvas.rotate(hourDegree, centerX, centerY);
    canvas.drawBitmap(hourNeedleImg, drawX, drawY, null);
    canvas.restore();
    
    surface.getHolder().unlockCanvasAndPost(canvas);
   }
   
   sendEmptyMessageDelayed(WHAT, INTERVAL);
  }
 }

 private SurfaceView surface = null;
 private MyHandler myHandler = null;
 
 private Bitmap needleImg = null;
 private Bitmap secNeedleImg = null;
 private Bitmap minNeedleImg = null;
 private Bitmap hourNeedleImg = null;
 
 private static boolean isAlive;
 
 @Override
 protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
 }

 @Override
 protected void onResume() {
  super.onResume();
  
  //画像のロード
  needleImg = BitmapFactory.decodeResource(getResources(), R.drawable.clock_needles);
  
  int destWidth = this.needleImg.getWidth();
  int destHeight = this.needleImg.getHeight();
  
  //秒針の画像
  secNeedleImg = Bitmap.createBitmap(needleImg, 0, 0, destWidth / 4, destHeight);
  
  //分針の画像
  minNeedleImg = Bitmap.createBitmap(needleImg, destWidth / 4, 0, destWidth / 4, destHeight);
  
  //時針の画像
  hourNeedleImg = Bitmap.createBitmap(needleImg, (destWidth / 4) * 2, 0, destWidth / 4, destHeight);
  
  needleImg.recycle();
  
  surface = new SurfaceView(getApplicationContext());
  surface.setFocusable(true);
  surface.setKeepScreenOn(true);
  setContentView(surface);
  
  //ループ処理開始
  isAlive = true;
  myHandler = new MyHandler(new WeakReference<MainActivity>(this));
  myHandler.sendEmptyMessage(MyHandler.WHAT);
 }
 
 @Override
 protected void onPause() {
  super.onPause();
  
  //ループフラグ・オフ
  isAlive = false;
  
  //画像の解放
  secNeedleImg.recycle();
  minNeedleImg.recycle();
  hourNeedleImg.recycle();
 }
}

MyHandlerクラスでループ処理の頻度を制御しています。
設定次第でループ処理を減らせるのでOpenGLで作った場合にに比べるとバッテリーの持ちをよくする効果が期待できます。
MyHandlerクラスのINTERVALという定数の数値を大きくすればループ処理を減らせます。
ただし、INTERVALの数値を大きくしすぎると針が指す時刻と実際の時刻の誤差が大きくなります。

320×480ピクセルのエミュレーターで実行するとこんな感じになります。