2013年6月21日金曜日

自作ライブラリ-SurfaceViewで画像の数字を表示

Androidアプリ・ゲームを作るときに、スコアやパラメータなど数字を表示したい場合が結構あります。
こんなときCanvas#drawText()で済めばいいんですが、見た目にこだわりたいときは画像を使う他ありません。 
やることは数字の画像を0から9まで用意して各桁の数字に合わせて位置を決めて描画するというだけですが、何回もでてくるので汎用的なクラスにしてしまったほうがいいかなということで作ってみました。 
まず0から9までの画像を用意。


表示用のクラスはこんな感じ

public class CvsNumber {
    public Rect res;
    public Bitmap[] images = null;
    public int number = 0;
    public int digit = 3;
    public boolean zerofill = false;
    public int top;
    public int left;
    public int width;
    public int height;
    public Paint paint = new Paint();
    private Rect src;

    public CvsNumber(int id, Context context, int[] resources) {
        images = new Bitmap[10];
        //0から9の画像をセット
        for (int i = 0; i < 10; i++) {
            images[i] = BitmapFactory.decodeResource(context.getResources(), resources[i]);
        }
        //1つ目の画像の大きさを取っておく
        src = new Rect(0, 0, images[0].getWidth(), images[0].getHeight());
    }

    public void draw(Canvas canvas) {
        int r = left + width; //描画範囲の右端
        int w = width / digit; //1桁当たりの描画幅
        int h = (w * images[0].getHeight()) / images[0].getWidth(); //1桁当たりの数字の描画高さ
        int t = top + ((height - h) / 2); //描画開始高さ
        int s = number % 10; //1の位の数字
        //1の位を描画
        canvas.drawBitmap(images[s], src, new Rect(r - (w * 1), t, r, t + h), paint);
        //digitで指定した位まで描画
        for (int i = 1; i < digit; i++) {
            if (zerofill || String.valueOf(number).length() > i) {
                s = (number / (int)(Math.pow(10, i))) % 10;
                canvas.drawBitmap(images[s], src, new Rect(r - (w * (i + 1)), t, r - (w * i), t + h), paint);
            }
        }
    }
}

表示結果はこんな感じ。
与えるパラメータは描画位置のtop,left,width,heightとnumber(値),digit(桁数),zerofill(0埋め)です。
 
四角い枠は指定した描画範囲をわかりやすいように表示してます。

一度作っておけば画像を差し替えれば、いろんなパターンで利用できて捗ること間違いなしです。
SurfaceViewに限らず自作Viewでも利用可能ですね。 

0 件のコメント:

コメントを投稿