第13回 タッチイベント

さていよいよ赤丸を動かしてみようと思います
前回の描画で使用したdrawCircleで
canvas.drawCircle(50, 50, 20, pnt);
1番目の50が画面上のx座標
2番目の50が画面上のy座標
というとこまではわかったので
タッチした位置のx座標とy座標がわかれば
それをdrawCircleのx座標とy座標にいれてやると
タッチした位置に赤丸が移動して
drawCircleされるのではないかと思います。

ということでやるべき内容としては
タッチした位置のx座標とy座標を取得する
取得した座標をdrawCircleに設定する
で進めていきたいと思います。

タッチした位置のx座標とy座標を取得する
前回使用したonDrawと同じViewクラスの
onTouchEventを使用しようと思います。
前回のonDrawと同じような感じで
使い方は公式のリファレンスそのままに
GView.javaのonDrawの後に
public boolean onTouchEvent (MotionEvent event)
を追加。
そして、MotionEventのgetXとgetYで
タッチした場所のX座標とY座標を取得。
取得した値をdrawCircleで使用するための
格納する変数を作成。
変数を作成するにあたってデータ型は
getXとgetYのリファレンスに沿ってfloat。
なのでこんな感じ。
float Xposi;
float Yposi;
でそこに
Xposi = event.getX();
Yposi = event.getY();
これでタッチした位置の座標は取得完了
ただし、このままだとonTouchEventに
エラー表示でその内容が返り値の設定が
必要ということなので、trueを設定。
return true;
ここまででonTouchEventは一旦完了。

取得した座標をdrawCircleに設定する
これは簡単に取得した座標を
drawCircleに設定。
canvas.drawCircle(Xposi, Yposi, 20, pnt);

これでいけると思っていましたが
結果がこれ

まったくをもって微動だにせず。
さらに位置も変な所に登場。

今回はここであきらめず原因を調査した結果
座標を変更したのちに再描画が行われていないため
onTouchEventで取得した座標が反映されていなかった模様。
再描画がinvalidate。
これをonTouchEventが呼び出され
X座標とY座標が変わるたびに
行うによって更新された位置に
赤丸が移動する。

最終的なView.javaがこちら
package com.example.helloandroid;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.view.MotionEvent;
import android.view.View;

public class GView extends View
{
　　　　float Xposi;
　　　　float Yposi;
　　　　//Viewを継承しておいて
　　　　public GView(Context context)
　　　　{
　　　　　　　super(context);
　　　　　　　//とりあえず背景色を白に指定
　　　　　　　setBackgroundColor(Color.WHITE);
　　　　}

　　　　@Override
　　　　protected void onDraw(Canvas canvas)
　　　　{
　　　　　　　Paint pnt = new Paint();
　　　　　　　//一応アンチエイリアス処理しとく
　　　　　　　pnt.setAntiAlias(true);
　　　　　　　//ここから円を描きます。
　　　　　　　//中は塗りつぶしで
　　　　　　　pnt.setStyle(Paint.Style.FILL);
　　　　　　　//色を赤に
　　　　　　　pnt.setColor(Color.argb(255,255,0,0));
　　　　　　　//座標タッチした場所に半径20で円を
　　　　　　　canvas.drawCircle(Xposi, Yposi, 20, pnt);
　　　　}

　　　　public boolean onTouchEvent (MotionEvent event)
　　　　{
　　　　　　　　//X座標を取得
　　　　　　　　Xposi = event.getX();
　　　　　　　　//Y座標を取得
　　　　　　　　Yposi = event.getY();
　　　　　　　　//再描画
　　　　　　　　invalidate();

　　　　　　　　return true;
　　　　}
}

動画アップのテストも兼ねて
できあがりがこちら



動いております
一旦の目標はこれで完成したのですが
今回のタッチイベントについては
理解薄いままにこれはこういうもんだ
といった感じで進めていきました。
なのでいまいちつかみ切れていない
ところがあったりするので
次回は今回の流れを掘り下げたいと思ってます。
なにはともあれ、動いたことに感動