🤱🏻 👨🏿 🚲 ユーザージェスチャー認識 🍧 🤾🏾 🕥

最近、Android用のゲームを開発するときに、ユーザージェスチャを使用した作業を実装する問題に遭遇しました。標準のAndroid SDKにはGestureDetectorクラスが含まれています（ここにこのクラスの操作のデモがあります）が 、必要なすべてのジェスチャを実装しているわけではありません。 長いタッチだけでなく、画面上の指での長いタッチによっても） 。ゲームに加えて、ジェスチャーは通常のアプリケーションで使用できます。インターフェイスのいくつかの要素を置き換えることができ、それにより簡単になります。ジェスチャは、タッチ入力を備えたデバイスの多くのアプリケーションで既に使用されており、これにより、ユーザーはすでにジェスチャに慣れていると想定する権利が与えられます。今日、アプリケーションでは長押し、ダブルタッチ、ピンチオープン、ピンチクローズなどの認識を実装しています。

こんにちは、Habr！

試作

タッチスクリーン、マルチタッチ、およびジェスチャを使用する例については、単純なグラフィックエディターを実装することにしました。私たちのグラフィックエディターはどうあるべきですか？指を広げて指を近づける距離を変更できる小さなラグのキャンバス。また、キャンバスのドラッグと描画を混同しないように、長いタッチのためにモードの変更を実装する必要があります。ダブルクリックすると、色選択ウィンドウを表示できます。

アプリケーションベース

開始するには、EclipseでAndroidアプリケーションプロジェクトを作成します。このプロジェクトでは、新しいSDKの機能を使用しないため、たとえば、API 8 （Android 2.2）をMinimum Required SDKとしてインストールできます。 MainActivity （存在しない場合は作成する必要があります）このフォームにそれをもたらします：

import android.os.Bundle; import android.app.Activity; public class MainActivity extends Activity { @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(new ApplicationView(this)); } }

したがって、Viewを継承するApplicationViewクラスを作成する必要があります。

 import android.view.View; import android.content.Context; import android.graphics.Color; import android.graphics.Paint; import android.graphics.Canvas; public class ApplicationView extends View { Paint paint = new Paint(); //  ,  static float density; public ApplicationView(Context context) { super(context); density = getResources().getDisplayMetrics().density; this.setBackgroundColor(Color.GRAY); //     paint.setStrokeWidth(5*density); //     5dp } @Override protected void onDraw(Canvas canvas) { } }

次に、キャンバスの表示方法を理解する必要があります。キャンバスを作成するには、それをビットマップオプションに渡します。この場合、キャンバスに何かを描画すると、ビットマップに表示されます。また、キャンバスの可変位置とキャンバスまでの距離も必要です。 ApplicationViewクラスにいくつかの変数を追加します。

 Canvas canvas; //  Bitmap image; //   float zoom = 500; //    Point position = new Point(50, 50); //

クラスコンストラクターで、キャンバスとそのコンテンツを初期化し、白色でペイントします。

 image = Bitmap.createBitmap(500, 500, Config.ARGB_4444); //    canvas = new Canvas(image); //   canvas.drawColor(Color.WHITE); //

onDrawメソッドで表示します：

 canvas.translate(position.x, position.y); //   canvas.scale(zoom / 500, zoom / 500); //     canvas.drawBitmap(image, 0, 0, paint); //

ここでアプリケーションを起動すると、灰色の背景に白い正方形が表示されます。

良くする

全画面表示にし、横向きを追加することで、アプリケーションを改善できます。これを行うには、アクティビティのパラメーターを変更する必要があります。

 <activity android:name=".MainActivity" android:label="@string/title_activity_main" android:screenOrientation="landscape">

また、フルスクリーンの場合は、スタイルファイルを変更します。 API 10以下（値/ styles.xml）の場合 ：

 <resources> <style name="AppTheme" parent="android:Theme.Light.NoTitleBar.Fullscreen" /> </resources>

API 11以上（values-v11 / styles.xml）の場合 ：

 <resources> <style name="AppTheme" parent="android:Theme.Holo.Light.NoActionBar.Fullscreen" /> </resources>

API 14 （値/ styles-v14.xml）の場合 ：

 <resources> <style name="AppTheme" parent="android:Theme.DeviceDefault.Light.NoActionBar.Fullscreen" /> </resources>

タッチスクリーンでの仕事の実現

onTouchEventメソッドをオーバーライドして、タッチスクリーンとの対話を開始する必要があります（タッチスクリーンの操作の詳細については、こちらをご覧ください） 。

 ArrayList<Finger> fingers = new ArrayList<Finger>(); //  ,    @Override public boolean onTouchEvent(MotionEvent event) { int id = event.getPointerId(event.getActionIndex()); //   int action = event.getActionMasked(); //  if(action == MotionEvent.ACTION_DOWN || action == MotionEvent.ACTION_POINTER_DOWN) fingers.add(event.getActionIndex(), new Finger(id, (int)event.getX(), (int)event.getY())); else if(action == MotionEvent.ACTION_UP || action == MotionEvent.ACTION_POINTER_UP) fingers.remove(fingers.get(event.getActionIndex())); //  ,    else if(action == MotionEvent.ACTION_MOVE){ for(int n = 0; n < fingers.size(); n++){ //     fingers.get(n).setNow((int)event.getX(n), (int)event.getY(n)); } //checkGestures(); invalidate(); } return true; }

指をタッチすると、Fingerタイプのオブジェクトが指のリストに追加されます。指を持ち上げると、このオブジェクトが削除され、指を移動すると、すべてのオブジェクトの座標が更新されます。その結果、指のリストには、現在および以前の座標とのすべてのタッチが含まれます。指のクラス：

 import android.graphics.Point; public class Finger { public int ID; //   public Point Now; public Point Before; boolean enabled = false; //      public Finger(int id, int x, int y){ ID = id; Now = Before = new Point(x, y); } public void setNow(int x, int y){ if(!enabled){ enabled = true; Now = Before = new Point(x, y); }else{ Before = Now; Now = new Point(x, y); } } }

検証

簡単な操作ですべてのタッチを表示できます。これを行うには、onDrawメソッドで次のように入力します。

 canvas.restore(); //      for(int i = 0; i < fingers.size(); i++){ //       canvas.drawCircle(fingers.get(i).Now.x, fingers.get(i).Now.y, 40 * density, paint); }

移動キャンバス

キャンバスの移動を実装するには、オブジェクトの移動ブロックでonTouchEventメソッドのcheckGesturesメソッドを呼び出す必要があります。これはタッチで機能します。ただし、このメソッドの呼び出しは既にコメントの下にあります。コメントを外し、メソッド自体を記述します。

 public void checkGestures(){ Finger point = fingers.get(0); //    position.x += point.Now.x - point.Before.x; //   position.y += point.Now.y - point.Before.y; }

指を開始して移動できます。すべてが正しく完了したら、キャンバスをその後ろにドラッグする必要があります。

キャンバスまでの距離を変更する

このジェスチャーを実装するには、メソッドのコンテンツ全体をマルチタッチ（複数の指がある場合）と通常のタッチに分離する必要があります。これがマルチタッチの場合、2本の指と過去の現在の距離を常にチェックします。 checkGesturesメソッドの内容を変更します。

 Finger point = fingers.get(0); if(fingers.size() > 1){ // Multitouch //     (now)   (before) float now = checkDistance(point.Now, fingers.get(1).Now); float before = checkDistance(point.Before, fingers.get(1).Before); float oldSize = zoom; //     zoom = Math.max(now - before + zoom, density * 25); //     position.x -= (zoom - oldSize) / 2; //    position.y -= (zoom - oldSize) / 2; }else{ //   position.x += point.Now.x - point.Before.x; position.y += point.Now.y - point.Before.y; }

このコードセクションでは、checkDistanceメソッドが使用されました。これはApplicationViewに追加する必要があります。彼のコードは次のとおりです。

 static float checkDistance(Point p1, Point p2){ //       return FloatMath.sqrt((p1.x - p2.x)*(p1.x - p2.x)+(p1.y - p2.y)*(p1.y - p2.y)); }

これで、2本の指に触れて混合/繁殖させると、キャンバスまでの距離が変わります。エミュレータを使用している場合、何も機能しません。

モード変更

モードを担当する変数を作成する必要があります。 boolean型のdrawingModeと呼びます。ロングタッチを実装するには、しばらくしてから呼び出されるメソッドを使用する必要があります。いくつかのシナリオがあります。

onDrawメソッドでコードを記述します。
onTouchEventにコードを記述します。
タイマーを作成し、その中にコードを記述します。
ハンドラーを作成し、postDelayedメソッドを使用してRunnableを呼び出します。

私の意見では、onDrawメソッドでは、グラフィックスのみを表示する必要があります。 onTouchEventに書き込むことができるのは、指が移動するという事実のみを考慮して、常にこのメソッドを呼び出すことです。タイマーは常に機能し、これは少し面倒なので、4番目のオプションを使用します。 ApplicationViewクラスで、Handlerタイプのハンドラー変数を作成し、ifに行を追加します：action == MotionEvent.ACTION_DOWN || action == MotionEvent.ACTION_POINTER_DOWNブロック：

 handler.postDelayed(longPress, 1000);

ここで、longPressという名前のRunnableを作成する必要があります。

 Runnable longPress = new Runnable() { public void run() { } };

ここで、Fingerクラスでは、押す時間を含むlong型のwasDown変数を作成する必要があります（ダブルタップに便利です） 。この変数のコンストラクターで、System.currentTimeMillis（）の値を設定する必要があります。また、Point型のstartPoint変数を追加する必要があります。これには、指の開始位置が含まれます。コンストラクターに渡された値、またはsetNowが最初に呼び出されたときの値を含める必要があります。また、実装するイベントに対するこのタッチの適合性を表示するブール型のenabledLongTouch変数を作成する必要があります。指が最初から動きすぎているかどうかを常に確認する必要があります。この機能はsetNowで実装できます。結果は次のようになります。

 import android.graphics.Point; public class Finger { public int ID; public Point Now; public Point Before; public long wasDown; boolean enabled = false; public boolean enabledLongTouch = true; Point startPoint; public Finger(int id, int x, int y){ wasDown = System.currentTimeMillis(); ID = id; Now = Before = startPoint = new Point(x, y); } public void setNow(int x, int y){ if(!enabled){ enabled = true; Now = Before = startPoint = new Point(x, y); }else{ Before = Now; Now = new Point(x, y); if(ApplicationView.checkDistance(Now, startPoint) > ApplicationView.density * 25) enabledLongTouch = false; } } }

Runnableのrunメソッドで、このタッチが長時間続くかどうかを確認できます。

 if(fingers.size() > 0 && fingers.get(0).enabledLongTouch){ fingers.get(0).enabledLongTouch = false; drawingMode = !drawingMode; vibrator.vibrate(80); }

良くする

長いタッチをより良くするためには、アクティブになったときにわずかな振動をオンにする必要があります。これを行うには、単にバイブレータタイプのバイブレータ変数を作成し、次のようにコンストラクタでその値を設定します。

 vibrator = (Vibrator)context.getSystemService(Context.VIBRATOR_SERVICE);

重要：マニフェストで振動を処理するには、次の行が必要です。

 <uses-permission android:name="android.permission.VIBRATE"/>

次に、タイマーのrunメソッドで、ロングタッチテストの最後に、次のように入力できます。

 vibrator.vibrate(80);

描画

現在、キャンバスにペイントを実装し、ブラシのサイズを変更しています。これを行うには、checkGesturesメソッドの各部分を、描画モードと通常モードの2つの部分に分割します。タッチするときの描画モードでは、線を描くだけで、マルチタッチの描画モードでは、ブラシのサイズを変更します。これは、checkGesturesメソッドがどのようになるかを示しています。

 Finger finger = fingers.get(0); if(fingers.size() > 1){ float now = checkDistance(finger.Now, fingers.get(1).Now); float before = checkDistance(finger.Before, fingers.get(1).Before); if(!drawingMode){ float oldSize = zoom; zoom = Math.max(now - before + zoom, density * 25); position.x -= (zoom - oldSize) / 2; position.y -= (zoom - oldSize) / 2; }else paint.setStrokeWidth(paint.getStrokeWidth() + (now - before) / 8); }else{ if(!drawingMode){ position.x += finger.Now.x - finger.Before.x; position.y += finger.Now.y - finger.Before.y; }else{ float x1 = (finger.Before.x-position.x)*500/zoom; //   float x2 = (finger.Now.x-position.x)*500/zoom; //    float y1 = (finger.Before.y-position.y)*500/zoom; //   float y2 = (finger.Now.y-position.y)*500/zoom; canvas.drawLine(x1, y1, x2, y2, paint); //   canvas.drawCircle(x1, y1, paint.getStrokeWidth() / 2, paint); //   canvas.drawCircle(x2, y2, paint.getStrokeWidth() / 2, paint); cursor = finger.Now; } }

最後の行では、値を1つのカーソルに設定しません。これは、カーソルの座標を含むPoint型の変数です。カーソルは、ブラシのサイズでナビゲートするためにのみ必要です。 onDrawメソッドでカーソルを表示するには、次を追加します。

 if(drawingMode){ int old = paint.getColor(); //    paint.setColor(Color.GRAY); //     canvas.drawCircle((cursor.x-position.x)*500/zoom, (cursor.y-position.y)*500/zoom, paint.getStrokeWidth() / 2, paint); //      paint.setColor(old); //    }

これで、キャンバスの移動、ズームイン、ズームアウト、描画モードへの切り替え、描画、ブラシのサイズ変更ができます。色の選択を実現するためだけに残っています。

カラーピッカー

色を選択するには、画面をダブルタップします。これを行うには、画面上の最後のタッチを保持するApplicationViewの変数と、このタッチの座標を保持する変数を作成する必要があります。最初のものはlong型のlastTapTimeと呼ばれ、2番目はPoint型のlastTapPositionと呼ばれます。次に、onTouchEventメソッドを変更します。

 int id = event.getPointerId(event.getActionIndex()); int action = event.getActionMasked(); if(action == MotionEvent.ACTION_DOWN || action == MotionEvent.ACTION_POINTER_DOWN) fingers.add(event.getActionIndex(), new Finger(id, (int)event.getX(), (int)event.getY())); else if(action == MotionEvent.ACTION_UP || action == MotionEvent.ACTION_POINTER_UP){ Finger finger = fingers.get(event.getActionIndex()); //    //     100,       200, //             25dp if(System.currentTimeMillis() - finger.wasDown < 100 && finger.wasDown - lastTapTime < 200 && finger.wasDown - lastTapTime > 0 && checkDistance(finger.Now, lastTapPosition) < density * 25){ //     } lastTapTime = System.currentTimeMillis(); //     lastTapPosition = finger.Now; //     fingers.remove(fingers.get(event.getActionIndex())); }else if(action == MotionEvent.ACTION_MOVE){ for(int n = 0; n < fingers.size(); n++){ fingers.get(n).setNow((int)event.getX(n), (int)event.getY(n)); } checkGestures(); } return true;

残っているのは、色選択ダイアログを実装することだけです。タッチ（コメントのマーク）がある場合、次のように記述します。

 Builder builder = new AlertDialog.Builder(getContext()); String[] items = {"", "", "", "", "", "", "", ""}; final AlertDialog dialog = builder.setTitle("  ").setItems(items, new DialogInterface.OnClickListener() { public void onClick(DialogInterface dialog, int which) { int[] colors = {Color.RED, Color.GREEN, Color.BLUE, 0xFF99CCFF, Color.BLACK, Color.WHITE, Color.YELLOW, 0xFFFFCC99}; paint.setColor(colors[which]); } }).create(); dialog.show();

アプリケーションを実行すると、色選択ウィンドウをダブルクリックして表示されることがわかります。

おわりに

カスタムジェスチャを認識することはそれほど難しくありませんでした。グラフィカルエディターの例を使用してこれを分析しました。もちろん、アプリケーションだけでなく、ゲームも同様の実装を所有できます。

プロジェクトのソースコードはこちらです。

developer.android.comからの情報を使用しました。最初にこの記事を使用しました。

AndreyMI 、 LeoCcoder 、 silentnuke 、 vovkabのユーザーにも感謝します。

ユーザージェスチャー認識

試作