Viewで画像を表示する

1.開発目標

このページの目標は、Viewを使って、画面に画像を表示することです。これでだいぶ華やかになります。

2.画像を用意する

画像を用意します。pngやgif、jpegなどが使えます。ネット上には、すばらしいフリー素材サイトがあるもので、この開発では「たからじま」から借りてくることにします。

戦闘背景「草原」と、モンスター「ゴブリン」をダウンロードしました。

これらの画像をdrawableフォルダの中に置きます。-hdpiとか-ldpiとかは解像度の違いです。どれか1つに入れて置けばOKです。適当にリサイズされます。

フォルダ構成

[ UsingView ]
    [ src ]
    [ gen ]
    [ Android 1.6 ]
    [ assets ]
    [ res ]
        [ drawable-hdpi ]
        [ drawable-ldpi ]
            icon.png
            grass.png
            goburin.png
        [ drawable-mdpi ]
        [ layout ]
        [ values ]
    AndroidManifest.xml
    default.properties
    proguard.cfg

3.画像を読み込む

画像を表示するために、まずプログラムに画像を読み込みます。「grass」や「goburin」の部分が画像ファイル名です。

SampleView.java

package sample.android.usingview;

import android.content.Context;
import android.content.res.Resources;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Canvas;
import android.view.View;

class SampleView extends View {
    //画像読み込み
    Resources res = this.getContext().getResources();
    Bitmap grass = BitmapFactory.decodeResource(res, R.drawable.grass);
    Bitmap goburin = BitmapFactory.decodeResource(res, R.drawable.goburin);
    
    public SampleView(Context context) {
        super(context);
    }
    
    @Override
    public void onDraw(Canvas c) {
    }
}

4.画像を表示する

画面に画像を表示します。これはdrawBitmapメソッドで実現できます。引数は「ビットマップ、X座標、Y座標、ペイント」です。ペイントは、半透明にしたりするときに役に立ちます。

SampleView.java

package sample.android.usingview;

import android.content.Context;
import android.content.res.Resources;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.view.View;

class SampleView extends View {
    Paint paint = new Paint();
    
    //画像読み込み
    Resources res = this.getContext().getResources();
    Bitmap grass = BitmapFactory.decodeResource(res, R.drawable.grass);
    Bitmap goburin = BitmapFactory.decodeResource(res, R.drawable.goburin);
    
    public SampleView(Context context) {
        super(context);
    }
    
    @Override
    public void onDraw(Canvas c) {
        //描画処理
        c.drawBitmap(grass, 0, 0, paint);
        c.drawBitmap(goburin, 250, 150, paint);
    }
}

5.開発結果

これで画像が表示されるはずです。実行してみます。

画像が表示されました。でも、動きが無いのは寂しすぎます。次回は、ループ処理を使って画像を動かします。