Androidのライブ壁紙でアナログ時計

■Androidのライブ壁紙でアナログ時計

アナログ時計自体はウィジェットとか使えば楽ちんで出来るんだけど、
ライブ壁紙でも作りたいよね。よね。
1回つくっとけば応用もできそうだし、よし作ろう。

ということで作り始めたはいいが、どちらかというとJAVAのお話にも
なるので、それ系で調べてみると素敵な参考サイト発見。（相変わらずの他力本願）

参考サイト：
http://d.hatena.ne.jp/yatcho/20090423/1240477532

きっと色々とやり方はあるんだろうけど、ここが一番わかりやすかった。
このサイトでやってるのをライブ壁紙用に改造した↓まずはライブ壁紙の本体。


public class Clock01 extends WallpaperService { private final Handler mHandler = new Handler(); @Override public Engine onCreateEngine() { // TODO 自動生成されたメソッド・スタブ return new LiveWallpaperEngine(); } class LiveWallpaperEngine extends Engine{ private Clock clock; public LiveWallpaperEngine(){ clock = new Clock(480,800); paint = new Paint(); } @Override public void onCreate(SurfaceHolder surfaceHolder){ super.onCreate(surfaceHolder); } private final Runnable runLiveWallPaper= new Runnable(){ public void run(){ Timer timer = new Timer(); timer.schedule(new TimerTask(){ public void run(){ drawFrame(); } },0,1000); } }; @Override public void onVisibilityChanged(boolean visible){ if(visible){ runLiveWallPaper.run(); }else{ mHandler.removeCallbacks(runLiveWallPaper); } } void drawFrame(){ final SurfaceHolder holder = getSurfaceHolder(); Canvas c = null; try{ c = holder.lockCanvas(); if(c != null){ c.drawColor(Color.WHITE); Calendar cal = Calendar.getInstance(); int hour = cal.get(Calendar.HOUR_OF_DAY); //現在の時を取得 int minute = cal.get(Calendar.MINUTE); //現在の分を取得 int second = cal.get(Calendar.SECOND); //現在の秒を取得 mojiban(c); secLine(second,c); minuteLine(minute,second,c); hourLine(hour,minute,second,c); } }finally{ if(c != null)holder.unlockCanvasAndPost(c); } } Paint paint; public void mojiban(Canvas c1){ for(int angle=0;angle<=11;angle++){ Clock.Point[] points = clock.getMojiLinePoints(angle); paint.setStrokeWidth(5.0f); paint.setColor(Color.RED); c1.drawLine(points[0].x, points[0].y, points[1].x, points[1].y, paint); } } public void secLine(int second,Canvas c2){ Clock.Point[] points = clock.getSecLinePoints(second); paint.setStrokeWidth(5.0f); paint.setColor(Color.BLUE); c2.drawLine(points[0].x, points[0].y, points[1].x, points[1].y, paint); } public void minuteLine(int minute,int second,Canvas c3){ Clock.Point[] points = clock.getMinuteLinePoints(minute,second); paint.setStrokeWidth(5.0f); paint.setColor(Color.CYAN); c3.drawLine(points[0].x, points[0].y, points[1].x, points[1].y, paint); } public void hourLine(int hour,int minute,int second,Canvas c4){ Clock.Point[] points = clock.getHourLinePoints(hour,minute,second); paint.setStrokeWidth(5.0f); paint.setColor(Color.GREEN); c4.drawLine(points[0].x, points[0].y, points[1].x, points[1].y, paint); } } }

つづいて、時計の計算クラス。これはほぼそのまま↓。

public class Clock { public class Point { public final int x; public final int y; public Point(int x, int y) { this.x = x; this.y = y; } } private final int width; // GUIウィンドウの幅 private final int height; // GUIウィンドウの高さ private final int centerX; // GUIウィンドウの中心Ｘ private final int centerY; // GUIウィンドウの中心Ｙ public static final int HAND_TYPE_SECOND = 6;// 一秒当たりに動く度数 public static final int HAND_TYPE_MIN = 6;// 一分当たりに動く度数 public static final int HAND_TYPE_HOUR = 30;// 一持間当たりに動く度数 private int handRsize; private int secondHandSize; private int minuteHandSize; private int hourHandSize; private int mojiHandSizeFrom; private int mojiHandSizeTo; public Clock(int width, int height) { this.width = width; this.height = height; centerX = width / 2; centerY = height / 2; handRsize = width > height ? height / 2 : width / 2; mojiHandSizeFrom = (int) (handRsize * 1); mojiHandSizeTo = (int) (handRsize * 0.95); secondHandSize = (int) (handRsize * 0.9); minuteHandSize = (int) (handRsize * 0.8); hourHandSize = (int) (handRsize * 0.6); } private double getPointX(int handType, int handSize, int handTime, int b) {//角度からX座標を求める double pointX = (Math.sin(Math.toRadians(handTime * handType + b))) * handSize; return pointX; } private double getPointY(int handType, int handSize, int handTime, int b) {//角度からY座標を求める double pointY = -(Math.cos(Math.toRadians(handTime * handType + b))) * handSize; return pointY; } private Point[] getLinePoints(int handType, int handSize, int handTime,int b) {//針のタイプ、サイズ、時刻からXとYの座標を返す Point[] points = new Point[2]; points[0] = new Point(centerX, centerY); points[1] = new Point(centerX + (int) getPointX(handType, handSize, handTime, b), centerY + (int) getPointY(handType, handSize, handTime, b)); return points; } public Point[] getMojiLinePoints(int angle) {//文字盤の線のX,Yの座標を返す Point[] points = new Point[2]; points[0] = new Point(centerX+(int)getPointX(HAND_TYPE_HOUR, mojiHandSizeFrom, angle, 0), centerY+(int)getPointY(HAND_TYPE_HOUR, mojiHandSizeFrom, angle, 0)); points[1] = new Point(centerX+(int)getPointX(HAND_TYPE_HOUR, mojiHandSizeTo, angle, 0), centerY+(int)getPointY(HAND_TYPE_HOUR, mojiHandSizeTo, angle, 0)); return points; } public Point[] getSecLinePoints(int second) {//秒から針のX,Y座標を返す return getLinePoints(HAND_TYPE_SECOND, secondHandSize, second, 0); } public Point[] getMinuteLinePoints(int minute, int second) {//分、秒から針のX,Y座標を返す return getLinePoints(HAND_TYPE_MIN, minuteHandSize, minute, (second * 30 / 60)); } public Point[] getHourLinePoints(int hour, int minute, int second) {//時、分、秒から針のX,Y座標を返す return getLinePoints(HAND_TYPE_HOUR, hourHandSize, hour, (minute * 30 / 60) + (second * 30 / 3600)); } public int getSecondHandSize() {// return secondHandSize; } public void setSecondHandSize(int secondHandSize) {// this.secondHandSize = secondHandSize; } }

解説： Clockクラスで計算した座標をもとに、Clock01のライブ壁紙クラス側で描画してます。
Clockの座標計算のあたりは見ておくと勉強になります。特に僕のような初心者には。
ここまでできてれば、あとは秒針とかの画像を変えればそれなりに良いのできるんでないかい？
ありがたや～
あ、画像サイズは今は480,800が入ってるから適宜変えて下さい。

ちゃんとできてたら、こんな感じで見えるはず。↓


秒針が動いていたらOKです。
あと、Manifestとかは通常のライブ壁紙と同様に設定してください。

LiveWall（ライブ壁紙）でタッチの座標がずれる

■LiveWall（ライブ壁紙）でタッチの座標がずれる


ライブ壁紙にPreferenceを設定したころ、困った問題が…

「Preferenceで設定変更して、SurfaceViewを
再描画するとタッチの座標がずれる！」

というもの。別にびっくりマーク付けるほどのもんでもないけど、
うっかり見落としそうになったので。
座標がずれるということは、widthとheightの設定が上手くいってないからじゃね？
と思い調べてみると、Engine内でのonSurfacechangedとか、
Thread内でのinitializeとか、renderer内でのonSurfacechangedとか、

まー、ことあるごとにwidthとheightがしゃしゃり出てくる

ということで、それぞれに

Log.i(getClass().toString(),"onSurfaceChanged+windowWith" + width);

みたいにログをしかけてデータをとる。
獲物をしとめる漁師のように地道に大きさを見ていくと、所々で
おかしな数字が…。
それらの参照するwidthやheightの変数をしっかり作ってあげることで解消できました。


いやー、いま思うとなんてことないんだけど、最初タッチしても無反応だから焦った。

LiveWallPaperとOpenGLとonSharedPreferenceChanged

■LiveWallPaperとOpenGLとonSharedPreferenceChanged

さて、無事OpenGLをつかってライブ壁紙を作れたわけですが、
1個作ったら俄然欲が出てきて
「壁紙変えてぇ」
「パーティクルの数変更してぇ」
となるわけです。バッテリーのことも考慮して、負担へらせる
設定変更もできたらなと。

お手軽な設定変更方法といえば、SharedPreferencesを使った方法があります。

PreferenceActivityを継承したプリファレンス用のクラスを作成し、
実装するわけですが、ここでハマった点を説明（というか自分用メモ）

・onSharedPreferenceChanged()を実装する場所
まずそこからして分からなかったおバカさんな僕ですが、試行錯誤の末に
ライブ壁紙の場合はエンジンを継承したクラス（参考本の例だとGLengineクラス）
に実装します。

ライブ壁紙に設定画面を追加する
↑こちらの内容を100万回ほど参考にしてなんとか実装したのだけれど、困ったことが。
リンク先でも言及されているが、設定変更後は通常drawframe()などで再描画を行い
変更を反映する必要がある。
ところがところが、OpenGLで作った場合そのdrawfameメソッドみたいなのがないのです。
いやあるんだけど、まずは↓を見てみよう。

@Override
public void onSharedPreferenceChanged(SharedPreferences sharedPreferences, String key) {
　String wall_list = sharedPreferences.getString("list_key","wall001"); //preference.xmlに設定したキーと初期値
　if(wall_list.equals("wall002")){ //処理いろいろ。ここではリストから選択して壁紙変更
　mWall = R.drawable.wall002;

　}else if(wall_list.equals("wall003")){
　mWall = R.drawable.wall003;

　}else if(wall_list.equals("wall001")){
　mWall = R.drawable.wall001;
　
　…その他変更処理いろいろ
　
　onCreate(getSurfaceHolder());
　onSurfaceCreated(getSurfaceHolder());
　
}

まー、drawのメソッドがないならもう一回surfaceをCreateすればええんちゃう？
とやってみたら、ダメでした。そらそーだ、これだと初回読み込みとかにも
エラー出るし、この状態でパーティクルの再描画もしたら変更した瞬間に
処理が追いつかなくてオーバーフローでした。
で、↑を↓に変えたらOKでした。

@Override
public void onSharedPreferenceChanged(SharedPreferences sharedPreferences, String key) {
{
　String wall_list = sharedPreferences.getString("list_key","wall001"); //preference.xmlに設定したキーと初期値
　if(wall_list.equals("wall002")){ //処理いろいろ。ここではリストから選択して壁紙変更
　mWall = R.drawable.wall002;
　}else if(wall_list.equals("wall003")){
　mWall = R.drawable.wall003;
　}else if(wall_list.equals("wall001")){
　mWall = R.drawable.wall001;
　}
　…その他変更処理いろいろ
}
if(gl != null){
　onSurfaceDestroyed(getSurfaceHolder());
　onCreate(getSurfaceHolder());
　onSurfaceCreated(getSurfaceHolder());
　onVisibilityChanged(false);
　}
}

やったこと
・最後のif文で、glがnullじゃないときのみ再描画処理を行う（初回起動対策）
ここでいうglはThreadを継承したOpenGLの開始処理とかを行うクラス。
ていうか本に載ってるママの変数。

・if文で判別したら、再描画処理するんだけど、まずは
　onSurfaceDestroyed、で破壊→そののちにonCreate。単なる
draw処理じゃなくて一度破棄しないとダメみたい。

・最後にonVisibilityChangedでポーズ状態にする。
これをしないと変更した瞬間に、変更画面のままパーティクルが動きまくって
処理エラーになります。（何を隠そうここが一番ハマった）


同じ本を使って作っている人の参考になれば幸いです。
そして多分もっといい方法があると思うので教えてくれる素敵な
人たちを募集中です。