Mtk's Blog: [Android] アナログ時計アプリをライブ壁紙に改造する

The analog clock on the live wallpaper
前回 SurfaceViewで作成したアナログ時計アプリをライブ壁紙として改造てみました。
ライブ壁紙のAPIはSurfaceViewにそっくりです。
ソースコードを丸ごと流用できるわけではありませんが、SurfaceViewで開発したアプリはライブ壁紙に移植しやすいです。

針の画像です。128×128ピクセルです。

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

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

解像度ごとに大きさを合せた針の画像を用意したほうがいいかもしれません。

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

ライブ壁紙の対応OSはAndroid2.1以上なのでSDKの最小バージョンは7以上にする必要があります。

ライブ壁紙はXMLによるメタデータが必要です。
Eclipseのパッケージ・エクスプローラーで res フォルダーの下に xml というフォルダーを作り、メタデータのファイルを保存します。
メタデータファイル(res/xml/wallpaper.xml)

<?xml version="1.0" encoding="utf-8"?>
<wallpaper
 xmlns:android="http://schemas.android.com/apk/res/android"
 android:thumbnail="@drawable/ic_launcher" />

ライブ壁紙のソース(WallpaperSasmple.java)

package jp.fujiu.analogclockwallpaper;

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

import android.content.SharedPreferences;
import android.content.SharedPreferences.OnSharedPreferenceChangeListener;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Canvas;
import android.graphics.Color;
import android.os.Handler;
import android.os.Message;
import android.service.wallpaper.WallpaperService;
import android.view.SurfaceHolder;

public class AnalogClockWallpaper extends WallpaperService {
 private static boolean isAlive = true;

 @Override
 public Engine onCreateEngine() {
  return new MyEngine();
 }

 private static class MyHandler extends Handler {
  static final int WHAT = 1;
  private static final long INTERVAL = 50;

  private WeakReference<MyEngine> engine = 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;
  private int width = 0;
  private int height = 0;

  //時間
  int preSec = -1;

  public MyHandler(WeakReference<MyEngine> engine) {
   this.isFast = true;
   this.engine = engine;
   this.secNeedleImg = engine.get().secNeedleImg;
   this.minNeedleImg = engine.get().minNeedleImg;
   this.hourNeedleImg = engine.get().hourNeedleImg;
  }
  
  public void setScreenSize (int width, int height){
   this.width = width;
   this.height = height;
    isFast = true;
   
  }

  //描画のメインループ
  @Override
  public void handleMessage(Message msg) {
   removeMessages(WHAT);

   /*
   Log.d(getClass().getSimpleName(), "handleMessage");
   Log.d(getClass().getSimpleName(), "isAlive: " + String.valueOf(isAlive));
    */
   
   if (isAlive == false) {
    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;

    SurfaceHolder holder = this.engine.get().getSurfaceHolder();
    Canvas canvas = holder.lockCanvas();
    if (canvas == null) {
     //SurfaceViewの準備が終わってなければ時間を空けてリトライ
     sendEmptyMessageDelayed(WHAT, 10);
     return;
    }

    //最初の1回だけの処理
    if (isFast) {
     //中心座標を計算
     centerX = this.width / 2;
     centerY = this.height / 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();

    holder.unlockCanvasAndPost(canvas);

   }
   sendEmptyMessageDelayed(WHAT, INTERVAL);
  }
 };

 public class MyEngine extends Engine implements OnSharedPreferenceChangeListener {
  private MyHandler myHandler = null;
  private Bitmap needleImg = null;
  private Bitmap secNeedleImg = null;
  private Bitmap minNeedleImg = null;
  private Bitmap hourNeedleImg = null;

  @Override
  public void onSurfaceChanged(SurfaceHolder holder, int format, int width, int height) {
   super.onSurfaceChanged(holder, format, width, height);
   if (myHandler == null) {
    initHandler();
   }
   myHandler.setScreenSize(width, height);
   myHandler.sendEmptyMessage(MyHandler.WHAT);
  }

  @Override
  public void onVisibilityChanged(boolean visible) {
   AnalogClockWallpaper.isAlive = visible;
   if (visible) {
    if (myHandler == null) {
     initHandler();
    }
    myHandler.sendEmptyMessage(MyHandler.WHAT);
   }
  }
  
  private void initHandler(){
   //画像のロード
   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();

   myHandler = new MyHandler(new WeakReference<MyEngine>(this));
  }

  @Override
  public void onSharedPreferenceChanged(SharedPreferences sharedPreferences, String key) {
  }
 }
}

マニフェスト(AndroidManifest.xml)

<manifest
    xmlns:android="http://schemas.android.com/apk/res/android"
    package="jp.fujiu.analogclockwallpaper"
    android:versionCode="1"
    android:versionName="1.0" >

    <uses-sdk
        android:minSdkVersion="7"
        android:targetSdkVersion="7" />

    <uses-feature
        android:name="android.software.live_wallpaper" />

    <uses-permission
        android:name="android.permission.SET_WALLPAPER" />

    <application
        android:allowBackup="true"
        android:icon="@drawable/ic_launcher"
        android:label="Analog Clock Wallpaper" >
        <service
            android:name=".AnalogClockWallpaper"
            android:label="Analog Clock Wallpaper"
            android:permission="android.permission.BIND_WALLPAPER" >
            <intent-filter>
                <action android:name="android.service.wallpaper.WallpaperService" />
            </intent-filter>

            <meta-data
                android:name="android.service.wallpaper"
                android:resource="@xml/wallpaper" />
        </service>
    </application>

</manifest>

エミュレーターで動作させたスクリーンショットです。
動作保証は出来ませんがこのようになると思います。
ライブ壁紙なので、ショートカットアイコンやウィジットより後ろに重ねて表示されます。

Mtk's Blog

新アプリケーション

2014年1月18日土曜日

[Android] アナログ時計アプリをライブ壁紙に改造する

0 件のコメント:

コメントを投稿