さて新作アプリの開発ですが、 4回にわたるテコ入れ編でクリティカルな問題に対しての対策が出来ました
あとは完成に向けてひた走るだけ！？
というわけで今回から見た目部分の改良で
GUIを盛る編といきたいと思います
まずは右上に表示していた残り時間の表示がスコアの表示と同じじゃわかりにくいし、
なんかしょぼいのでもう少し視覚的に残り時間がわかりやすいようにしたいと思います
完成イメージはこう
これをどうやって描画したらいいかなぁと考えました
やり方はいろいろでしょうが今回は丸いゲージの部分の画像をフルで用意して、それを扇形のclipPathでマスクして必要部分だけを描く方法を取りました
パーツを一個用意して回転させながら60個描く方法もありますが、clipPathの方法なら切れ目がないようなアナログ的なゲージにも対応できる思います
コード的には以下のような感じ
int time; //残り時間
int rect; //ゲージの大きさのRect
Bitmap gauge; //フルゲージ画像
Path clip = new Path();
clip.moveTo(rect.centerX(), rect.centerY());
clip.addArc(rect, 267 + ((60 - time) * 6), 360 - ((60 - time) * 6));
clip.lineTo(rect.centerX(), rect.centerY());
canvas.save();
canvas.clipPath(clip);
gauge.draw(canvas);
canvas.restore();
このブログで以前、
SurfaceViewで描画範囲を限定するでやった方法と同じですね
clipPathは描画したい部分の指定になるので、addArc()の開始角と終了角をずらしながらセットしてやります
わりといい感じにできました
