Step2 矢印の作成と値の受け渡し
Step1で、センサーの値を最終的に「sensorValues」という配列に格納しました。この値を利用して、今から作成する矢印を北に向けて回転させます。視覚的に実際にコーディングしたものが動くのは楽しいと思いますので頑張りましょう。
ここからは冒頭で作成した「CompassView.java」を編集していきます。
まずは、Viewを継承します。加えてコンストラクタも生成しましょう。
onDraw()メソッドを用意して、図形を描画する準備をします。 描画オブジェクト「paint」を生成し、アンチエイリアスも指定します。
public class CompassView extends View{ public CompassView(Context context) { super(context); } @Override protected void onDraw(Canvas canvas) { Paint paint = new Paint(); paint.setAntiAlias(true); } } |
次は、実際に矢印を描いてみます。画像を用意する方法等他の方法はいくらでもあるのですが赤の三角形程度なら「drawPath()」で簡単に描くことができます。
まず、画面の中心に矢印を表示するために基準となる座標を指定します。液晶画面左上の角を起点に、X座標を「POS_COMPASSX」、Y座標を「POS_COMPASSY」とします。端末ごとに適切な位置は異なるので、後ほど適宜調節してください。今回は縦向きの液晶を持つ端末を対象に大まかな値を設定しています。
「drawPath()」を内部に持つ「drawCompass()」メソッドを作成します。先ほど指定した基準となる座標を元に pathを利用して三角形を描き、赤色に塗りつぶしています。
加えて、この矢印を 回転させる値を計算する「drawScreen()」メソッドを追加します。「direction」という変数にCompassApp.javaで格納した「sensorValues[0]」を代入して、その値から角度を計算するコードを書いています。「invalidate()」は、毎フレームごとに描画する命令です。
そして「drawCompass()」に角度分矢印を回転させるコードを加え、「onDraw()」にてコンパスを描画すれば作業は終了です。
CompassView.javaは以下のようになります。
public class CompassView extends View {
// コンパスの描画位置を指定する
private final float POS_COMPASSX = 250;
private final float POS_COMPASSY = 400;
// 向きを保持する変数
float direction;
public CompassView(Context context) {
super(context);
}
@Override
protected void onDraw(Canvas canvas) {
Paint paint = new Paint();
paint.setAntiAlias(true);
// コンパスを描画する
drawCompass(canvas, paint);
}
// コンパスの描画
private void drawCompass(Canvas canvas, Paint paint) {
Path path = new Path();
path.moveTo(POS_COMPASSX, POS_COMPASSY - 160);
path.lineTo(POS_COMPASSX + 80, POS_COMPASSY + 80);
path.lineTo(POS_COMPASSX - 80, POS_COMPASSY + 80);
path.moveTo(POS_COMPASSX, POS_COMPASSY - 80);
paint.setColor(Color.RED);
canvas.rotate(-direction, POS_COMPASSX, POS_COMPASSY);
canvas.drawPath(path, paint);
canvas.rotate(direction, POS_COMPASSX, POS_COMPASSY);
}
public void drawScreen(float[] sensorValues) {
// センサーの値から端末の向きを計算する
direction = (sensorValues[0] + 0) % 360;
// onDrawを呼び出して再描画
invalidate();
}
} |
以上で、今回のコーディングは全て終了です。
第8回 センサーを使ってみよう(後編)
Step1 プロジェクトの作成とセンサーの利用
Step2 矢印の作成と値の受け渡し
Step3 実際に起動してみましょう
第1回 リファレンスコード(文字列編) |  |
第2回 リファレンスコード2（グラフィックス編） | |
第3回 リファレンスコード3（タッチイベント編） | |
第4回 リファレンスコード4（チェックボックス/ラジオグループ編） | |
第5回 リファレンスコード5（スピナー編） | |
第6回 リファレンスコード6（サウンド/ムービー編） | |
第7回 リファレンスコード7（トースト編） | |
第8回 リファレンスコード8（Google Maps API利用編） | |
第9回 リファレンスコード9（SQLite編） | |
第10回 リファレンスコード10（音声認識編） | |
第11回 リファレンスコード11（日付/時刻ダイアログ編） | |
第12回 リファレンスコード12（Bluetooth編） | |
