Download presentation
Presentation is loading. Please wait.
1
５－４ 画像の表示 （１）複数画像の表示 Ａ．手順 (基本は５－２（１）Ｉｍａｇｅ Ｖｉｅｗ参照） ①画像ファイルをリソースに追加
５－４ 画像の表示 （１）複数画像の表示 Ａ．手順 (基本は５－２（１）Ｉｍａｇｅ Ｖｉｅｗ参照） ①画像ファイルをリソースに追加 ②リソースを指定してビットマップを取得。 ③イメージビューを作成して、イメージビューにビットマップを指定 ここでは2つの画像を組み込む。 【例】 // ビットマップの取得 bmp[0] = BitmapFactory.decodeResource(getResources(),R.drawable.bird1); bmp[1] = BitmapFactory.decodeResource(getResources(),R.drawable.bird2); for(int i=0; i<iv.length;i++){ iv[i] = new ImageView(this); // イメージビューを作成 iv[i].setImageBitmap(bmp[i]); // イメージビューにビットマップを指定 LL.addView(iv[i]); // レイアウトにイメージビューを追加 } // LLは LinearLayout
2
B. 関連するクラス 【android.graphic.BitmapFactory クラス】
Bitmap decodeResource 指定したリソース、IDからビットマップ (Resource rs, int id) オブジェクトを作成。 【android.content.ContextWrapper クラス】 Resources getResource() リソースを取得。 【android.view.ImageView クラス】 ImageView(Context c) 指定したコンテキストでイメージビューを作成。 Void setImageBitmap(Bitmap bmp) ビットマップオブジェクトを設定。
3
C. プログラム例 package jp.eclipse.image; import android.app.Activity;
import android.os.Bundle; import android.graphics.*; import android.view.*; import android.widget.*; public class MultiImageDTActivity extends Activity { /** Called when the activity is first created. */ Bitmap[] bmp = new Bitmap[2]; ImageView[] image = new ImageView[2]; @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); LinearLayout LL=new LinearLayout(this); LL.setOrientation(LinearLayout.HORIZONTAL); LL.setGravity(Gravity.CENTER); setContentView(LL); bmp[0]=BitmapFactory.decodeResource(getResources(), R.drawable.bird1); bmp[1]=BitmapFactory.decodeResource(getResources(), R.drawable.bird2); for(int i=0;i<image.length;i++) { image[i]=new ImageView(this); image[i].setImageBitmap(bmp[i]); LL.addView(image[i]); } C. プログラム例 【注】 あらかじめdrawable-hdpi に 2画像をコピーしておくこと。 ここでは、bird1.gif, bird2.gif を コピーした例を示す。
4
２つの画像が表示されている。（Java 1.6で動かすこと）
D. 実行例
5
（２）イメージ画像の切り替え Ａ．手順 複数の画像をビュー上で切り替えることで、絵が動いているようにみえる。 （前出（１）を変更して作成）
① ActivityにRunnable を実装 ② 「ボールの移動」と同様、Run を一定時間遅延させて実行する。
6
B. プログラム例（１） package jp.eclipse.anime; import android.app.Activity;
import android.os.Bundle; import android.os.Handler; import android.content.*; import android.graphics.*; import android.view.*; // Runnable を実装 public class Anime01Activity extends Activity implements Runnable { /** Called when the activity is first created. */ AnimationView v; Handler h; Bitmap[] bmp=new Bitmap[2]; float x, y; int nid; @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); bmp[0]=BitmapFactory.decodeResource(c.getResources(), R.drawable.bird1); bmp[1]=BitmapFactory.decodeResource(c.getResources(), R.drawable.bird2); requestWindowFeature(Window.FEATURE_NO_TITLE); v=new AnimationView(this); setContentView(v); h = new Handler(); h.postDelayed(this,10); } 【注】 あらかじめdrawable-hdpi に 2画像をコピーしておくこと。 ここでは、bird1.gif, bird2.gif を コピーした例を示す。
7
プログラム例（２） public void run(){
nid = 1 - nid; v.invalidate(); h.postDelayed(this,10); } public void onDestroy(){ super.onDestroy(); h.removeCallbacks(this); class AnimationView extends View{ public AnimationView(Context c) { super(c); nid=0; x=100; y=100; protected void onDraw(Canvas c){ super.onDraw(c); setBackgroundColor(Color.WHITE); c.drawBitmap(bmp[nid], x, y, null);
8
C. 実行例 ２つの画像が交互に表示されるので、 鳥が羽ばたいているように見える。 （Java 1.6で動かすこと）
9
（３）背景画像と画像の移動 Ａ．手順 前出（２）を変更して作成 ① 鳥の画像の他に背景画像ファイルをリソースに追加
① 鳥の画像の他に背景画像ファイルをリソースに追加 ② 1回ごとにX座標を減ずる。負になったら右端のＸ座標に移す。 ③ 背景と鳥を描画する。
10
B. 関連するクラス 【android.graphic.Canvas クラス】 int getWidth() キャンバスの幅
int getHeight() キャンバスの高さ void drawBitmap(Bitmap b, ビットマップの部分的な描画 Rect src, Rect dst, Paint p) src : ビットマップ側の範囲 dst : キャンバス側の範囲
11
C. プログラム例（１） package jp.eclipse.anime02; import android.app.Activity;
import android.os.Bundle; import android.os.Handler; import android.content.*; import android.graphics.*; import android.view.*; // Runnable を実装 public class Anime02Activity extends Activity implements Runnable{ /** Called when the activity is first created. */ AnimationView v; Handler h; Bitmap[] bmp=new Bitmap[2];Bitmap backBmp; float x, y, dx; int nid; @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); bmp[0]=BitmapFactory.decodeResource(c.getResources(), R.drawable.bird1); bmp[1]=BitmapFactory.decodeResource(c.getResources(), R.drawable.bird2); backBmp=BitmapFactory.decodeResource(c.getResources(), R.drawable.backsample); requestWindowFeature(Window.FEATURE_NO_TITLE); v=new AnimationView(this); setContentView(v); h = new Handler(); h.postDelayed(this,10); }
12
プログラム例（２） public void run(){
nid = 1 - nid; x += dx; v.invalidate(); h.postDelayed(this,10); } public void onDestroy(){ super.onDestroy(); h.removeCallbacks(this); class AnimationView extends View{ public AnimationView(Context c) { super(c); nid=0; x=300; y=100; dx=-10; protected void onDraw(Canvas c){ super.onDraw(c); int wd = c.getWidth(); int hd = c.getHeight(); Rect dst = new Rect(0,0,wd,hd); int ws = backBmp.getWidth(); int hs = backBmp.getHeight(); Rect src=new Rect(0,0,ws,hs); c.drawBitmap(backBmp, src, dst, null); // 背景画像表示 if(x<0) x = wd; c.drawBitmap(bmp[nid], x, y, null); // 鳥の画像表示
13
鳥が背景画像の前を羽ばたきながら左方向に移動する。
（Java 1.6で動かすこと） D. 実行例
14
（４）画像の回転 Ａ．手順 元の画像 回転した結果の 画像範囲 回転した結果 マトリックスで変換行列を指定する
① 回転する画像と静止する画像（動きの相対関係を明確にするため）をリソースに追加 ② 変換行列に回転を指定する。 ③ 回転したビットマップを作成する。 ④ 回転した図形を描画する。なお、回転した結果は元の画像より大きくなるので、 描画開始位置を調整する。 元の画像 回転した結果の 画像範囲 回転した結果
15
B. 関連するクラス 【android.graphic.Matrix クラス】
boolean postRotate(int a) 指定した角度(度：Degree)を設定する。 【android.graphic.BitmapFactory クラス】 Bitmap createBitmap(Bitmap bmp, 指定したビットマップ、X座標位置、Ｙ座標 int x, int y, int w, int h, 位置、幅、高さのビットマップオブジェク Matrix m, boolean filter) トを変換行列 m を用いて生成する。
16
C. プログラム例（１） package jp.eclipse.animation;
import android.app.Activity; import android.os.Bundle; import android.os.Handler; import android.content.*; import android.graphics.*; import android.view.*; // Runnableを実装 public class Anime03Activity extends Activity implements Runnable { /** Called when the activity is first created. */ AnimationView v; Handler h; Bitmap bmp1, bmp2; Matrix m; @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); requestWindowFeature(Window.FEATURE_NO_TITLE); bmp1=BitmapFactory.decodeResource(this.getResources(), R.drawable.fan1); bmp2=BitmapFactory.decodeResource(this.getResources(), R.drawable.fan2); m=new Matrix(); v=new AnimationView(this); setContentView(v); h = new Handler(); h.postDelayed(this,10); }
17
プログラム例（２） public void run(){
m.postRotate(10); v.invalidate(); h.postDelayed(this,10); } public void onDestroy(){ super.onDestroy(); h.removeCallbacks(this); class AnimationView extends View{ public AnimationView(Context c) { super(c); protected void onDraw(Canvas c){ super.onDraw(c); setBackgroundColor(Color.WHITE); c.drawBitmap(bmp2,180, 80, null); Bitmap tmp = Bitmap.createBitmap(bmp1,0, 0, bmp1.getWidth(), bmp1.getHeight(), m, true); // 回転画像で大きくなった分だけ移動する。 float f=(tmp.getWidth()-bmp1.getWidth())/2; c.drawBitmap(tmp,200-f,100-f, null);
18
ファンの形だけが回転している。 （Java 1.6で動かすこと） D. 実行例
19
（４）画像の拡大・縮小 Ａ．手順 ソースとディスティネーションの矩形を指定する方法でも可能だが
ここではマトリックスで拡大・縮小を行う方法について示す。 ① 拡大・縮小する画像をリソースに追加 ② 変換行列にスケールを指定する。 ③ 拡大・縮小したビットマップを作成する。 ④ 描画する。
20
B. 関連するクラス 【android.graphic.Matrix クラス】 void postScale 指定した角度を設定する。
(float sx, float sy) sx : X方向スケール sy : Y方向スケール 【android.graphic.BitmapFactory クラス】 Bitmap createBitmap(Bitmap bmp, 指定したビットマップ、X座標位置、Ｙ座標 int x, int y, int w, int h, 位置、幅、高さのビットマップオブジェク Matrix m, boolean filter) トを変換行列 m を用いて生成する。
21
C. プログラム例（１） package jp.eclipse.scale; import android.app.*;
import android.os.Bundle; import android.graphics.*; import android.view.*; import android.view.View.OnClickListener; import android.view.View.*; import android.widget.*; public class ScaleActivity extends Activity { /** Called when the activity is first created. */ ImageView img; Button b1,b2,b3; Bitmap bmp; @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); LinearLayout LL=new LinearLayout(this); LL.setOrientation(LinearLayout.HORIZONTAL); setContentView(LL);
22
プログラム例（２） b1=new Button(this); b1.setText("通常");LL.addView(b1);
bmp=BitmapFactory.decodeResource(getResources(), R.drawable.bird1); img=new ImageView(this); img.setImageBitmap(bmp); LL.addView(img); b1.setOnClickListener(new b1ClickListener()); b2.setOnClickListener(new b2ClickListener()); b3.setOnClickListener(new b3ClickListener()); }
23
プログラム例（３） class b1ClickListener implements OnClickListener{
public void onClick(View v){clickProc(1.0F,1.0F);} } class b2ClickListener implements OnClickListener{ public void onClick(View v){clickProc(2.0F,2.0F);} class b3ClickListener implements OnClickListener{ public void onClick(View v){clickProc(0.5F,0.5F);} public void clickProc(float sx, float sy){ Matrix m=new Matrix(); m.postScale(sx,sy); Bitmap bmp2=Bitmap.createBitmap(bmp,0,0, bmp.getWidth(),bmp.getHeight(),m,true); img.setImageBitmap(bmp2);
24
D. 実行例 「拡大」「縮小」ボタンをクリック すると拡大・縮小される （Java 1.6で動かすこと）
25
（５）クリッピング（キャンバスのくりぬき） Ａ．手順
① 複合図形（Path）を指定する ② Pathをクリッピング（Clipping）する（くりぬき） ③ キャンバスにビットマップを描画する。
26
B. 関連するクラス 【android.graphic.Canvas クラス】
void clipPath(Path p) パスをクリッピングする。 P : pathインスタンス その他(Canvasクラス) void clipRect(Rect／RectF r) void clipRect(int/float x1, int/float y1, int/float x2, int/float y2)
27
C. プログラム例（１） package jp.eclipse.Clip; import android.app.Activity;
import android.os.Bundle; import android.content.Context; import android.content.res.Resources; import android.graphics.*; import android.util.AttributeSet; import android.view.*; import android.widget.*; public class ClippingActivity extends Activity { /** Called when the activity is first created. */ Bitmap bmp=null; myView mv; @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); LinearLayout LL= new LinearLayout(this); LL.setOrientation(LinearLayout.HORIZONTAL); LL.setGravity(Gravity.CENTER); setContentView(LL);
28
プログラム例（２） bmp= BitmapFactory.decodeResource(getResources(),
R.drawable.backsample); mv=new myView(this); LL.addView(mv); } class myView extends View{ public myView(Context context) { super(context); protected void onDraw(Canvas c){ super.onDraw(c); c.drawColor(Color.WHITE); Path path =new Path(); path.addCircle(250,250, 100, Path.Direction.CW); path.addRect(100, 300, 400, 700, Path.Direction.CW); c.clipPath(path); Paint paint=new Paint(); c.drawBitmap(bmp,20,20,paint);
29
D. 実行例 クリッピング している様子
Similar presentations
