五章:画像を出すⅡ

前回使用した「ImageView」は一種固定機能チックな感じになる。
そこで、ある程度自由にできる方法で画像を出してみる。
今回はたくさんプログラムいじるよー。

用意するもの
  • 小さめ(128x128とかそんな感じ)の画像

・画像を表示する

+ クリックして開く
 今までとはちょっと雰囲気の違うことをするよー
 今回はレイアウトファイルを使用しないで画面に画像を出す。
 前回使ったImageViewはレイアウトファイル内に設定を行っていたが、
 自前でViewを作ることでレイアウトファイルを用いないことで自由度が増す。
 この自前のViewのことをカスタムビューという。この辺は表記揺れが大きいのでインターネットを漁って
 自分なりにしっくりくる表現を見つけることをオススメする。
 ・以下ソース(MainActivity.java)
  1.  public class MainActivity extends Activity
  2.  {
  3.  
  4.   @Override
  5.   protected void onCreate(Bundle savedInstanceState)
  6.   {
  7.    super.onCreate(savedInstanceState);
  8.  
  9.    //カスタムビュークラスを設定する
  10.    MyView view = new MyView(this);
  11.    setContentView(view);
  12.   }
  13.  }
  14.  
  15.  class MyView extends View
  16.  {
  17.   private int x; //画像のx座標
  18.   private int y; //画像のy座標
  19.   private Bitmap bmp; //変換後の画像
  20.   private Paint paint = new Paint();
  21.   Resources res = this.getContext().getResources(); //変換後の画像の格納先
  22.  
  23.   public MyView(Context context)
  24.   {
  25.    super(context);
  26.    setFocusable(true);
  27.  
  28.    //座標の初期化
  29.    x = 0;
  30.    y = 0;
  31.   }
  32.  
  33.   /*******
  34.    * 描画
  35.    ******/
  36.   protected void onDraw(Canvas canvas)
  37.   {
  38.    //背景色を設定
  39.    canvas.drawColor(Color.WHITE); //白に設定する
  40.    //リソースファイル内の画像をBitmapに変換して格納する。
  41.    bmp = BitmapFactory.decodeResource(res, R.drawable.img);
  42.    //変換したBitmapで描画
  43.    canvas.drawBitmap(bmp, x, y, paint);
  44.   }
  45.  }
  46.  

・今回やった新しいことの簡単なまとめ

+ クリックして開く
 ・カスタムViewクラスの作成
  先に述べたとおり、ImageViewのような既に完成されたものを利用するのではなく、
  自前で必要な機能を実装できるカスタムビューは自由度が増す。
  実装方法はActivityクラスでカスタムViewクラスを宣言し、
  それをsetContentViewでビューに設定する。
  あとは上記ソースを参照。

 ・BitmapFactory
  ImageViewでは画像を指定してしまえば勝手に処理をやってくれる感じだったが、
  自前のViewでは読み込んだ画像をそのまま出すことは許されない。
  そこでリソースに登録された画像をBitmapに変換する処理が必要になる。

 ・canvas.drawColor
  画面の背景色を設定できる。
  canvasとはViewで何かを描くときの下地的なものとしてイメージするとよい。
  ImageViewなどの出来合いのViewを用いる時でも裏では利用されているが、
  そっちではあまり意識することはないだろう。

・画像にアクションをしていく

+ クリックして開く
 追加するのはほんの少しだけ。
 onDrawの下あたりに追記する。
 以下ソース
  1.  /*******
  2.   * タッチ
  3.   ******/
  4.  public boolean onTouchEvent(MotionEvent event)
  5.  {
  6.   //タッチ座標を取得する
  7.   x = (int)event.getX();
  8.   y = (int)event.getY();
  9.  
  10.   invalidate();
  11.   return true;
  12.  }
  13.  

 画面をタッチしてその位置に画像の左上が移動したら大成功。

・やったことのまとめⅡ

+ クリックして開く
 ・onTouchEvent(MotionEvant event)
  見ての通りの意味。タッチされたことを検知し(記述すれば)内容によって処理を振り分けてくれる。
  今回はタッチ位置を取るだけの簡単な処理だけ。

 ・invalidate()
  再描画をしてもらうための命令。
  折角位置が変更されても再描画されないと反映されないので注意。
最終更新:2013年08月07日 12:45