画像表示するAndroidアプリを作成する
画像を表示し、画面操作で画像を動かすAndroidアプリを作成します
■AndroidSDKリファレンス（サイト）
http://developer.android.com/reference/packages.html
■AndroidSDKリファレンス
android-sdk-windows-1.5_r2.zip
解凍後のフォルダ内
docs/reference/packages.html
Androidアプリを作成する
「「ファイル」→「新規」→「Androidプロジェクト」
プロジェクト名、アプリケーション名、パッケージ名を入力、ターゲット名を選択する。
完了ボタンをクリック。
画像を配置する
ImageViewDemo/res/drawable
に
（star.png）--- 透過png
を配置し、
ImageViewDemo
にフォーカスをあて、右クリックし「リフレッシュ」を選択します。
「プロジェクト」→「プロジェクトのビルド」を選択するとビルドが行われ、
R.javaにstar.pngのIDが追加されます。
※「自動的にビルド」がチェックされている状態ならば、リフレッシュを行った後に自動的にビルドされます。
R.java
package android.sample;
public final class R {
public static final class attr {
}
public static final class drawable {
public static final int icon=0x7f020000;
public static final int star=0x7f020001;
}
public static final class layout {
public static final int main=0x7f030000;
}
public static final class string {
public static final int app_name=0x7f040001;
public static final int hello=0x7f040000;
}
}
Android Virtual Devices Manager
ターゲットをAndroid 1.5で作成した AVDを使用します。
MainActivity.java
MainActivity.java
package android.sample;
import android.app.Activity;
import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.os.Bundle;
import android.view.MotionEvent;
import android.view.View;
public class MainActivity extends Activity {
private SampleView mView;
private Bitmap mBitmap;
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
mBitmap = BitmapFactory.decodeResource(getResources(),
R.drawable.star); mView = new SampleView(this);
setContentView(mView);
}
private class SampleView extends View {
private Paint mPaint;
private float imageX = 0f;
private float imageY = 0f;
public SampleView(Context context) {
super(context);
mPaint = new Paint();
}
@Override
protected void onDraw(Canvas canvas) {
//canvasのカラー
canvas.drawColor(Color.WHITE);
//アンチエイリアス
mPaint.setAntiAlias(true);
//カラー設定（デフォルトはBLACK）
mPaint.setColor(Color.BLUE);
//テキスト表示
canvas.drawText(getString(R.string.hello), 0, 20, mPaint);
//画像表示
canvas.drawBitmap(mBitmap,
imageX - mBitmap.getWidth() / 2,
imageY - mBitmap.getHeight() / 2,
mPaint);
}
@Override
public boolean onTouchEvent(MotionEvent event) {
//触る
if(event.getAction() == MotionEvent.ACTION_DOWN){
imageX = event.getX();
imageY = event.getY();
}
//触ったままスライド
else if(event.getAction() == MotionEvent.ACTION_MOVE){
imageX = event.getX();
imageY = event.getY();
}
//離す
else if(event.getAction() == MotionEvent.ACTION_UP){
imageX = event.getX();
imageY = event.getY();
}
// 再描画の指示
invalidate();
return true;
}
}
}
今回はViewクラスを使用して画面表示をしています。
画像表示にはandroid.graphics.Bitmapを使用しています。
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
mBitmap = BitmapFactory.decodeResource(getResources(),
R.drawable.star); mView = new SampleView(this);
setContentView(mView);
}
onCreate内で
android.graphics.BitmapFactory.decodeResource(Resources res, int id)
を使用し、Bitmapを作成しています。IDはstar.pngのIDを指定しています。
mView = new SampleView(this);
setContentView(mView);
setContentView()にはViewクラスを指定しています。
SampleViewクラスの描画処理
@Override
protected void onDraw(Canvas canvas) {
//canvasのカラー
canvas.drawColor(Color.WHITE);
//アンチエイリアス
mPaint.setAntiAlias(true);
//カラー設定（デフォルトはBLACK）
mPaint.setColor(Color.BLUE);
//テキスト表示
canvas.drawText(getString(R.string.hello), 0, 20, mPaint);
//画像表示
canvas.drawBitmap(mBitmap,
imageX - mBitmap.getWidth() / 2,
imageY - mBitmap.getHeight() / 2,
mPaint);
}
onDraw(Canvas canvas)
で画面の表示をしています。
canvas.drawColor(Color.WHITE);
でcanvasの色（背景色）を指定しています。
mPaint.setAntiAlias(true);
でアンチエイリアス設定をしています。
デフォルトはfalseであるため、アンチエイリアスがかかりません。
mPaint.setColor(Color.BLUE);
カラーを設定しています。
以降に記述しているテキストなどの色に反映されます。
canvas.drawText(getString(R.string.hello), 0, 20, mPaint);
drawText (String text, float x, float y, Paint paint)
を使用してテキスト表示の設定をしています。
getString (int resId)
でIDを指定し、string型のデータを取得しています。
canvas.drawBitmap(mBitmap,
imageX - mBitmap.getWidth() / 2,
imageY - mBitmap.getHeight() / 2,
mPaint);
drawBitmap (Bitmap bitmap, float left, float top, Paint paint)
を使用して画像表示の設定をしています。
left = 0f
top = 0f
を指定すると、画像の(0, 0)位置が画面の(0, 0)に表示されます。
今回はそれぞれ
- mBitmap.getWidth() / 2
- mBitmap.getHeight() / 2
を設定しているため、
imageX = 0f
imageY = 0f
の場合は画像の(0,0)位置が画面の
(- mBitmap.getWidth() / 2, - mBitmap.getHeight() / 2)に表示されます。
SampleViewクラスのタッチイベント処理
@Override
public boolean onTouchEvent(MotionEvent event) {
//触る
if(event.getAction() == MotionEvent.ACTION_DOWN){
imageX = event.getX();
imageY = event.getY();
}
//触ったままスライド
else if(event.getAction() == MotionEvent.ACTION_MOVE){
imageX = event.getX();
imageY = event.getY();
}
//離す
else if(event.getAction() == MotionEvent.ACTION_UP){
imageX = event.getX();
imageY = event.getY();
}
// 再描画の指示
invalidate();
return true;
}
今回はonTouchEvent(MotionEvent event)を使用して、画面がタッチされたときの処理を行っています。
event.getX();
event.getY();
でタッチされた画面の座標を取得し、画像の表示位置に反映されるように記述しています。
invalidate();
でonDraw(Canvas canvas)が呼ばれ、画面が再描画されます。
アプリを実行する
画面をタッチ、またはフリックをするとstar.pngを動かすことができます。
