[Android SDK] 描画の基礎

Androidの描画の基礎として、Canvas、Paintクラスの使い方をまとめました。

[Android SDK] 加速度センサで傾きを測定する

Android携帯には様々なセンサが搭載されています。
機種によってまちまちですが、その中でも加速度センサを利用して、Android携帯の傾きを測定してみます。

まずは、SensorManagerという、センサ関連を統括して管理しているサービスを取得します。

view plainprint?

1. SensorManager manager = (SensorManager)getSystemService(SENSOR_SERVICE);  

SensorManager manager = (SensorManager)getSystemService(SENSOR_SERVICE);

続いて、センサの状態が変化したときに呼ばれるSensorEventListenerというリスナーを作成します。
サブクラスに実装するか、実装してインスタンスを作成してください。

view plainprint?

1. SensorEventListener lis = new SensorEventListener() {  
2.     // センサの精度が変化したときに呼ばれる  
3.     public void onAccuracyChanged(Sensor sensor, int accuracy) {}  
4.     // センサの値が変化したときに呼ばれる  
5.     public void onSensorChanged(SensorEvent event) {}  
6. };  

SensorEventListener lis = new SensorEventListener() {
    // センサの精度が変化したときに呼ばれる
    public void onAccuracyChanged(Sensor sensor, int accuracy) {}
    // センサの値が変化したときに呼ばれる
    public void onSensorChanged(SensorEvent event) {}
};

試しに、Activityの中に加速度センサで取得した値を表示するサンプルを作成してみました。

view plainprint?

1. /* フィールド変数 */  
2. SensorManager mSensorManager;  
3.   
4. /* 初期化処理メソッド */ {  
5.  // センサーマネージャを取得  
6.  mSensorManager = (SensorManager) c.getSystemService(Context.SENSOR_SERVICE);  
7.  List<sensor> sensors = mSensorManager.getSensorList(Sensor.TYPE_ACCELEROMETER);  
8.  if (sensors != null && sensors.size() > 0) {  
9.   Sensor s = sensors.get(0);  
10.   mSensorManager.registerListener(mSensorListener, s, SensorManager.SENSOR_DELAY_UI);  
11.  }  
12. }  
13. /* 終了処理メソッド */ {  
14.  // センサーマネージャを破棄  
15.  mSensorManager.unregisterListener(mSensorListener);  
16.  mSensorManager = null;  
17. }  
18. SensorEventListener mSensorListener = new SensorEventListener() {  
19.  public void onAccuracyChanged(Sensor sensor, int accuracy) {  
20.   Log.d(TAG, sensor.getName()+":"+accuracy);  
21.  }  
22.  public void onSensorChanged(SensorEvent event) {  
23.   if (event.values.length == 3) {  
24.    Log.d(TAG, event.sensor.getName()+" ("+event.values[0]+","+event.values[1]+","+event.values[2]+")");  
25.   }  
26.  }  
27. }  
28. </sensor>  

/* フィールド変数 */
SensorManager mSensorManager;

/* 初期化処理メソッド */ {
 // センサーマネージャを取得
 mSensorManager = (SensorManager) c.getSystemService(Context.SENSOR_SERVICE);
 List sensors = mSensorManager.getSensorList(Sensor.TYPE_ACCELEROMETER);
 if (sensors != null && sensors.size() > 0) {
  Sensor s = sensors.get(0);
  mSensorManager.registerListener(mSensorListener, s, SensorManager.SENSOR_DELAY_UI);
 }
}
/* 終了処理メソッド */ {
 // センサーマネージャを破棄
 mSensorManager.unregisterListener(mSensorListener);
 mSensorManager = null;
}
SensorEventListener mSensorListener = new SensorEventListener() {
 public void onAccuracyChanged(Sensor sensor, int accuracy) {
  Log.d(TAG, sensor.getName()+":"+accuracy);
 }
 public void onSensorChanged(SensorEvent event) {
  if (event.values.length == 3) {
   Log.d(TAG, event.sensor.getName()+" ("+event.values[0]+","+event.values[1]+","+event.values[2]+")");
  }
 }
}

解説すると、まずは加速度センサのオブジェクトを取得するために、引数にSensor.TYPE_ACCELEROMETERを指定します。

view plainprint?

1. List<sensor> sensors = mSensorManager.getSensorList(Sensor.TYPE_ACCELEROMETER);  
2. </sensor>  

List sensors = mSensorManager.getSensorList(Sensor.TYPE_ACCELEROMETER);

Android携帯によっては同一センサが複数搭載しているケースがあるため、Listオブジェクトが返り値となっている。
とりあえず、加速度センサが複数ついていないハズなので、要素0番目を取得してリスナーに登録する。

view plainprint?

1. if (sensors != null && sensors.size() > 0) {  
2.  Sensor s = sensors.get(0);  
3.  mSensorManager.registerListener(mSensorListener, s, SensorManager.SENSOR_DELAY_UI);  
4. }  

if (sensors != null && sensors.size() > 0) {
 Sensor s = sensors.get(0);
 mSensorManager.registerListener(mSensorListener, s, SensorManager.SENSOR_DELAY_UI);
}

ここでの3番目の引数は、センサー状態を通知する際の遅延時間です。
加速度センサの使用用途に合わせて、早すぎず遅すぎず適切なものを選ぶと良い。
定数の名前からも分かるように用途が分かりますね。

view plainprint?

1. SensorManager.SENSOR_DELAY_FASTEST：0ms  
2. SensorManager.SENSOR_DELAY_GAME：20ms  
3. SensorManager.SENSOR_DELAY_UI：60ms  
4. SensorManager.SENSOR_DELAY_NORMAL：200ms  

SensorManager.SENSOR_DELAY_FASTEST：0ms
SensorManager.SENSOR_DELAY_GAME：20ms
SensorManager.SENSOR_DELAY_UI：60ms
SensorManager.SENSOR_DELAY_NORMAL：200ms

肝心なSensorEventの中身ですが、重要なのはvaluesの値です。
加速度センサの場合はAndroid携帯を正面に持った状態で
values[0] ： X軸 左右(左+、右-)
values[1] ： Y軸 上下(下+、上-)
values[2] ： Z軸 前後(後ろ側+、手前-)

という風な加速度センサの値が入っている。

常に重力分(9.8m/s'2=約10.0)が働いているため、静止状態でベクトルの大きさを計算すると10.0となる。
要するに、平らな机の置くと、後ろ側方向にのみ重力がかかるので、
・values[0]：0.0
・values[1]：0.0
・values[2]：10.0
となる。

試しにやってみるのが一番です。

最後にActivity破棄されるときにはリスナーも登録破棄してくださいね。

view plainprint?

1. mSensorManager.unregisterListener(mSensorListener);  

mSensorManager.unregisterListener(mSensorListener);

[Android SDK] SurfaceViewを使った高速描画

SurfaceViewは、描画用のスレッドがアプリケーションのスレッドと独立しているため、ゲームなど定期的な描画が要求される場合に向いている。
なお、SurfaceViewはAPI Level１から利用できる。

試しに、適当なサンプルを作成してみる。
１．Activityは最初に生成されるものから変更なし

view plainprint?

1. package com.runpeta.android.angle;  
2.   
3. import android.app.Activity;  
4. import android.os.Bundle;  
5.   
6. public class RpAngleActivity extends Activity {  
7.  // アクティビティ作成時に最初に呼ばれる  
8.     @Override  
9.     public void onCreate(Bundle savedInstanceState) {  
10.         super.onCreate(savedInstanceState);  
11.         setContentView(R.layout.main);  
12.     }  
13. }  

package com.runpeta.android.angle;

import android.app.Activity;
import android.os.Bundle;

public class RpAngleActivity extends Activity {
 // アクティビティ作成時に最初に呼ばれる
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
    }
}

２．SurfaceViewのサブクラスを作り、線だけ描画する

view plainprint?

1. package com.runpeta.android.angle;  
2.   
3. import android.content.Context;  
4. import android.graphics.Canvas;  
5. import android.graphics.Color;  
6. import android.graphics.Paint;  
7. import android.util.AttributeSet;  
8. import android.view.SurfaceHolder;  
9. import android.view.SurfaceView;  
10.   
11. public class RpAngleSurfaceView extends SurfaceView implements SurfaceHolder.Callback {  
12.  public RpAngleSurfaceView(Context context) {  
13.   super(context);  
14.   getHolder().addCallback(this);  
15.  }  
16.  public RpAngleSurfaceView(Context context, AttributeSet attrs) {  
17.   super(context, attrs);  
18.   getHolder().addCallback(this);  
19.  }  
20.  public RpAngleSurfaceView(Context context, AttributeSet attrs, int defStyle) {  
21.   super(context, attrs, defStyle);  
22.   getHolder().addCallback(this);  
23.  }  
24.  public void surfaceChanged(SurfaceHolder holder, int format, int width, int height) {  
25.     
26.  }  
27.  public void surfaceCreated(SurfaceHolder holder) {  
28.   doDraw();  
29.  }  
30.  public void surfaceDestroyed(SurfaceHolder holder) {  
31.     
32.  }  
33.  private void doDraw() {  
34.      // キャンバスをロックする  
35.      Canvas c = getHolder().lockCanvas();  
36.      c.save();  
37.        
38.      // ここにCanvasに描画処理を書く  
39.      Paint p = new Paint();  
40.      p.setColor(Color.BLACK);  
41.      c.drawColor(Color.WHITE);  
42.      c.drawLines(new float[]{20,20,60,60}, p);  
43.        
44.      // キャンバスのロックを解除する  
45.      c.restore();  
46.      getHolder().unlockCanvasAndPost(c);  
47.     }  
48. }  

package com.runpeta.android.angle;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.util.AttributeSet;
import android.view.SurfaceHolder;
import android.view.SurfaceView;

public class RpAngleSurfaceView extends SurfaceView implements SurfaceHolder.Callback {
 public RpAngleSurfaceView(Context context) {
  super(context);
  getHolder().addCallback(this);
 }
 public RpAngleSurfaceView(Context context, AttributeSet attrs) {
  super(context, attrs);
  getHolder().addCallback(this);
 }
 public RpAngleSurfaceView(Context context, AttributeSet attrs, int defStyle) {
  super(context, attrs, defStyle);
  getHolder().addCallback(this);
 }
 public void surfaceChanged(SurfaceHolder holder, int format, int width, int height) {
  
 }
 public void surfaceCreated(SurfaceHolder holder) {
  doDraw();
 }
 public void surfaceDestroyed(SurfaceHolder holder) {
  
 }
 private void doDraw() {
     // キャンバスをロックする
     Canvas c = getHolder().lockCanvas();
     c.save();
     
     // ここにCanvasに描画処理を書く
     Paint p = new Paint();
     p.setColor(Color.BLACK);
     c.drawColor(Color.WHITE);
     c.drawLines(new float[]{20,20,60,60}, p);
     
     // キャンバスのロックを解除する
     c.restore();
     getHolder().unlockCanvasAndPost(c);
    }
}

３．メインレイアウトに作成したSurfaceViewを追加します。
・id：surface (とりあえず)
・width：fill_parent
・height：fill_parent

これで線なるものが描画されているハズだ。

これは非常に分かりづらいサンプルになってしまった。

ゲームのように定期的に再描画を行ってみる。

さきほどの"onDraw"をタイマーで定期的に呼び出すために、"ScheduledExecutorService"を利用します。
こんな感じにしようできますので、(定期処理内容)で"onDraw"を呼びます。

view plainprint?

1. // タイマーを開始する  
2. ScheduledExecutorService　schedule;  
3. schedule = Executors.newSingleThreadScheduledExecutor();  
4. schedule.scheduleAtFixedRate(new Runnable(){  
5.     public void run() {  
6.         //定期処理内容  
7.   
8.     }  
9. }, 0, 100, TimeUnit.MILLISECONDS);  
10.   
11. // タイマーを終了する  
12. schedule.shutdown();  

// タイマーを開始する
ScheduledExecutorService　schedule;
schedule = Executors.newSingleThreadScheduledExecutor();
schedule.scheduleAtFixedRate(new Runnable(){
    public void run() {
        //定期処理内容

    }
}, 0, 100, TimeUnit.MILLISECONDS);

// タイマーを終了する
schedule.shutdown();

さきほどの線がアニメーションで伸び縮みするようにしてみます。

view plainprint?

1. package com.runpeta.android.angle;  
2.   
3. import java.util.concurrent.Executors;  
4. import java.util.concurrent.ScheduledExecutorService;  
5. import java.util.concurrent.TimeUnit;  
6.   
7. import android.content.Context;  
8. import android.graphics.Canvas;  
9. import android.graphics.Color;  
10. import android.graphics.Paint;  
11. import android.util.AttributeSet;  
12. import android.view.SurfaceHolder;  
13. import android.view.SurfaceView;  
14.   
15. public class RpAngleSurfaceView extends SurfaceView implements SurfaceHolder.Callback {  
16.  private ScheduledExecutorService mSchedule;  
17.  private Runnable repeatDraw = new Runnable() {  
18.   public void run() {  
19.    size += 5;  
20.    if (size > 400) {  
21.     size = 100;  
22.    }  
23.    doDraw();  
24.   }  
25.  };  
26.  private int size = 100;  
27.  public RpAngleSurfaceView(Context context) {  
28.   super(context);  
29.   getHolder().addCallback(this);  
30.  }  
31.  public RpAngleSurfaceView(Context context, AttributeSet attrs) {  
32.   super(context, attrs);  
33.   getHolder().addCallback(this);  
34.  }  
35.  public RpAngleSurfaceView(Context context, AttributeSet attrs, int defStyle) {  
36.   super(context, attrs, defStyle);  
37.   getHolder().addCallback(this);  
38.  }  
39.  public void surfaceChanged(SurfaceHolder holder, int format, int width, int height) {  
40.     
41.  }  
42.  public void surfaceCreated(SurfaceHolder holder) {  
43.   doDraw();  
44.   mSchedule = Executors.newSingleThreadScheduledExecutor();  
45.   mSchedule.scheduleAtFixedRate(repeatDraw, 0, 100, TimeUnit.MILLISECONDS);  
46.  }  
47.  public void surfaceDestroyed(SurfaceHolder holder) {  
48.   mSchedule.shutdown();  
49.   mSchedule = null;  
50.  }  
51.  private void doDraw() {  
52.      // キャンバスをロックする  
53.      Canvas c = getHolder().lockCanvas();  
54.      c.save();  
55.        
56.      // ここにCanvasに描画処理を書く  
57.      Paint p = new Paint();  
58.      p.setColor(Color.BLACK);  
59.      c.drawColor(Color.WHITE);  
60.      c.drawLines(new float[]{20,20,size,size}, p);  
61.        
62.      // キャンバスのロックを解除する  
63.      c.restore();  
64.      getHolder().unlockCanvasAndPost(c);  
65.     }  
66. }  

package com.runpeta.android.angle;

import java.util.concurrent.Executors;
import java.util.concurrent.ScheduledExecutorService;
import java.util.concurrent.TimeUnit;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.util.AttributeSet;
import android.view.SurfaceHolder;
import android.view.SurfaceView;

public class RpAngleSurfaceView extends SurfaceView implements SurfaceHolder.Callback {
 private ScheduledExecutorService mSchedule;
 private Runnable repeatDraw = new Runnable() {
  public void run() {
   size += 5;
   if (size > 400) {
    size = 100;
   }
   doDraw();
  }
 };
 private int size = 100;
 public RpAngleSurfaceView(Context context) {
  super(context);
  getHolder().addCallback(this);
 }
 public RpAngleSurfaceView(Context context, AttributeSet attrs) {
  super(context, attrs);
  getHolder().addCallback(this);
 }
 public RpAngleSurfaceView(Context context, AttributeSet attrs, int defStyle) {
  super(context, attrs, defStyle);
  getHolder().addCallback(this);
 }
 public void surfaceChanged(SurfaceHolder holder, int format, int width, int height) {
  
 }
 public void surfaceCreated(SurfaceHolder holder) {
  doDraw();
  mSchedule = Executors.newSingleThreadScheduledExecutor();
  mSchedule.scheduleAtFixedRate(repeatDraw, 0, 100, TimeUnit.MILLISECONDS);
 }
 public void surfaceDestroyed(SurfaceHolder holder) {
  mSchedule.shutdown();
  mSchedule = null;
 }
 private void doDraw() {
     // キャンバスをロックする
     Canvas c = getHolder().lockCanvas();
     c.save();
     
     // ここにCanvasに描画処理を書く
     Paint p = new Paint();
     p.setColor(Color.BLACK);
     c.drawColor(Color.WHITE);
     c.drawLines(new float[]{20,20,size,size}, p);
     
     // キャンバスのロックを解除する
     c.restore();
     getHolder().unlockCanvasAndPost(c);
    }
}

こんな感じで描画ができることが分かったので、後はCanvasとPaintの使い方次第でいろいろ描画できます。