ジェスチャーを処理します
はじめにの例からわかるように、マップ ビューでは、ピンチやダブルタップでズームインなど、一般的なすべての地図ジェスチャがデフォルトでサポートされています。 次の表に、使用可能なジェスチャと、マップ上の対応するデフォルトの動作の概要を示します。
| 1 本の指で画面をタップします。 このジェスチャには、定義済みのマップアクションがありません。 |
| 地図を一定の量だけ拡大 するには、 1 本の指で画面を 2 回タップします。 |
| 1 本の指を押して画面に移動します。 このジェスチャには、定義済みのマップアクションがありません。 |
| 地図を移動 するには、 1 本の指を画面に合わせて押し続け、任意の方向に動かします。 指を持ち上げると、地図が少し勢いをつけて動き続けます。 |
| 地図を傾けるに は、 2 本の指を画面に合わせて押し続け、垂直に動かします。 他の方向の動作は事前に定義されていません。 |
| 一定の量だけズームアウトするに は、 2 本の指で画面をタップします。 |
| 連続的にズームインまたはズームアウトする には、 2 本の指を押したまま画面に移動し、その間の距離を増減します。 地図を連続的に回転させるに は、 2 本の指を画面に合わせて押し続け、両方を回転するか、いずれかを動かして、地図の角度を変更します。 |
HERE SDK for Android では、次のジェスチャがサポートされています。
- タップ :
TapListener
- ダブルタップ :
DoubleTapListener
- 長押し :
LongPressListener
- パン :
PanListener
- 2 本指でパン :
TwoFingerPanListener
- 2 本指でタップ :
TwoFingerTapListener
- ピンチ回転 :
PinchRotateListener
各リスナーには、ユーザーが検出可能なアクション(特定のジェスチャの開始時や終了時など)を実行するたびに通知する専用のコールバックがあります。 通常は、ジェスチャが検出された後に、マップ マーカーを長押しした後に配置するなど、特定の動作をアプリケーションに追加します。
同じジェスチャには、一度に 1 つのリスナーのみを設定できます。
地図操作を制御します
リスナーを設定しても、ジェスチャのデフォルトのマップ動作には影響がありません。 個別に制御できます。 既定では、マップをダブルタップしたときの拡大など、すべての標準的な動作が有効になっています。
たとえば、次のように、ダブルタップ ( ズームイン ) および 2 本指タップ ( ズームアウト ) のデフォルトのマップジェスチャの動作を無効にできます。
mapView.getGestures().disableDefaultAction(GestureType.DOUBLE_TAP);
mapView.getGestures().disableDefaultAction(GestureType.TWO_FINGER_TAP);
既定のマップアクションを無効にしても、ジェスチャイベントをリッスンできます。 これは、例えば独自のズーム動作を実装するために、ジェスチャのデフォルトのアクションをオフにする場合に役立ちます。 タップと長押しを除くすべてのジェスチャで、デフォルトのマップアクションが提供されます。 詳細については、上の概要を参照してください。
デフォルトのマップジェスチャの動作を戻すには、次のように呼び出します。
mapView.getGestures().enableDefaultAction(GestureType.DOUBLE_TAP);
mapView.getGestures().enableDefaultAction(GestureType.TWO_FINGER_TAP);
ジェスチャーリスナーを添付します
ジェスチャーリスナーをマップ ビューに添付する方法の例を見てみましょう。 マップ ビューでは、各ジェスチャに固有の setter が提供されています。 リスナーを設定するとすぐに、そのジェスチャに関連するすべてのイベントが専用のコールバックを介して受信されます。これは onTap()
、次の場合に該当し TapListener
ます。
private void setTapGestureHandler(MapView mapView) {
mapView.getGestures().setTapListener(new TapListener() {
@Override
public void onTap(@NonNull Point2D touchPoint) {
GeoCoordinates geoCoordinates = mapView.viewToGeoCoordinates(touchPoint);
Log.d(TAG, "Tap at: " + geoCoordinates);
}
});
}
リスナーを設定するとすぐに、ジェスチャが検出されたことを知らせる通知が届き始めます。
touchPoint
は 、ジェスチャが発生したMapView
座標を指定します。 を呼び出すことで mapView.viewToGeoCoordinates(touchPoint)
、ピクセルを地理座標に変換できます ( 上図を参照 ) 。
同様に、リスニングを停止するには、以下の電話番号を使用します。
mapView.getGestures().setTapListener(null);
連続したジェスチャ ( 長押し、ピンチ、パン、 2 本の指のパンなど ) の場合 BEGIN
、ジェスチャの状態はジェスチャが検出されたことを示します。 指がディスプレイに触れている間に UPDATE
、 END
指が持ち上げられたことを示す状態になるか CANCEL
、ジェスチャ検出がキャンセルされたことを示す状態になるまで、次の状態が発生することがあります。
private void setLongPressGestureHandler(MapView mapView) {
mapView.getGestures().setLongPressListener(new LongPressListener() {
@Override
public void onLongPress(@NonNull GestureState gestureState, @NonNull Point2D touchPoint) {
GeoCoordinates geoCoordinates = mapView.viewToGeoCoordinates(touchPoint);
if (gestureState == GestureState.BEGIN) {
Log.d(TAG, "LongPress detected at: " + geoCoordinates);
}
if (gestureState == GestureState.UPDATE) {
Log.d(TAG, "LongPress update at: " + geoCoordinates);
}
if (gestureState == GestureState.END) {
Log.d(TAG, "LongPress finger lifted at: " + geoCoordinates);
}
if (gestureState == GestureState.CANCEL) {
Log.d(TAG, "Map view lost focus. Maybe a modal dialog is shown or the app is sent to background.");
}
}
});
}
たとえば、長押しのイベントが検出された後も、ユーザーが指を画面に置いたままにしたり、移動したりすることがあります。 ただし BEGIN
、長押しジェスチャが検出された時点でマークされるのはイベントのみです。
地図上にマップ マーカーを配置する場合は、長押しのジェスチャが便利です。 この例について は、 アプリの検索例を参照してください。
連続していないジェスチャ ( タップ、ダブルタップ、 2 本の指タップなど ) の GestureState
場合、ジェスチャイベントを処理するためには必要ありません。
注
パンジェスチャを使用すると、マップをスワイプして移動することがあります。これにより、ジェスチャはすでに終了しており、すべての指が持ち上げられているにもかかわらず、移動が継続されます。 マップの移動がいつ終了したかを検出 MapIdleListener
するには、を使用します。 HereMap
インスタンスに追加 MapView
できます。インスタンスから取得できます。
GitHub では 、ジェスチャ のサンプルアプリの一部として、コードスニペットおよびその他の使用例を利用できます。
チュートリアル - 地図のアクションをカスタマイズします
すでに確認したように、既定ではダブルタップジェスチャによって、都市レベルから通りのレベルに近い場所など、地図が個別のステップでズームされます。 このようなデフォルトのマップジェスチャアクションを無効にして独自のビヘイビアーを実装することも、既存のビヘイビアーに必要なアクションを追加することもできます。
必要に応じて、プラットフォームジェスチャ操作と HERE SDK ジェスチャ検出を組み合わせることもできます。 HERE SDK では、利便性のために、一般的な地図ジェスチャに重点を置いているため、すべての種類の低レベルのジェスチャイベントを提供するわけではありません。 より詳細な制御が必要な場合は、 HERE SDK で利用できるジェスチャ処理とネイティブの Android ジェスチャ検出をいつでも組み合わせることができます。
このチュートリアルで は、カスタムズームアニメーションを有効にする方法を示します。 ユーザー がダブルタップまたは 2 本の指でタップした後、地図が徐々に拡大または縮小されます。 ズームのアニメーションはしばらくすると遅くなります。
カスタムズーム動作を追加します
アニメーションから始めましょう。 このために、 Android の アニメーションフレームワーク とを使用し ValueAnimator
て、特定の開始値と終了値の間で補間を行うことができます。
便宜上 GestureMapAnimator
、という名前の新しいクラスを作成します。このクラスは、ジェスチャに関連するすべてのアニメーションを処理する必要があります。 MapCamera
地図をカメラでズームする必要があるため、地図のインスタンスへの参照が必要です。
既定では、地図は、途中のステップを使わずに、指が地図に触れる位置で、 1 つの個別のステップでズームイン / ズームアウトします。
必要なジェスチャイベントをフックしてみましょう。
mapView.getGestures().disableDefaultAction(GestureType.DOUBLE_TAP);
mapView.getGestures().disableDefaultAction(GestureType.TWO_FINGER_TAP);
mapView.getGestures().setDoubleTapListener(new DoubleTapListener() {
@Override
public void onDoubleTap(@NonNull Point2D touchPoint) {
gestureMapAnimator.zoomIn(touchPoint);
}
});
mapView.getGestures().setTwoFingerTapListener(new TwoFingerTapListener() {
@Override
public void onTwoFingerTap(@NonNull Point2D touchCenterPoint) {
gestureMapAnimator.zoomOut(touchCenterPoint);
}
});
魔法のような HERE はありません 2 つのジェスチャイベントをリッスンするだけです。 既定のズーム動作が事前に無効になっていることを確認する必要があります。 上記のzoomIn()
メソッドおよびzoomOut()
メソッドは、以下に示すGestureMapAnimator
新しいメソッドにつながります。
public void zoomIn(Point2D touchPoint) {
zoomOrigin = touchPoint;
startZoomAnimation(true);
}
public void zoomOut(Point2D touchPoint) {
zoomOrigin = touchPoint;
startZoomAnimation(false);
}
地図 zoomOrigin
のどこを拡大または縮小するかを把握するために、を保存します。
startZoomAnimation()
新しい GestureMapAnimator
クラス内でのの実装では ValueAnimator
、次のものを使用します。
private void startZoomAnimation(boolean zoomIn) {
stopAnimations();
zoomValueAnimator = createZoomValueAnimator(zoomIn);
zoomValueAnimator.start();
}
private ValueAnimator createZoomValueAnimator(boolean zoomIn) {
ValueAnimator zoomValueAnimator = ValueAnimator.ofFloat(0.1F, 0);
zoomValueAnimator.setInterpolator(new AccelerateDecelerateInterpolator());
zoomValueAnimator.addUpdateListener(animation -> {
float zoomVelocity = (float) animation.getAnimatedValue();
double zoomFactor = 1;
zoomFactor = zoomIn ? zoomFactor + zoomVelocity : zoomFactor - zoomVelocity;
camera.zoomBy(zoomFactor, zoomOrigin);
});
long halfSecond = 500;
zoomValueAnimator.setDuration(halfSecond);
return zoomValueAnimator;
}
0.1 ValueAnimator
~ 0 の値を補間するには、を使用します。 これらの値によって、ズーム速度が決まります。 に AccelerateDecelerateInterpolator
は、中間値があり、最後にスローダウンの影響があります に設定したリスナー ValueAnimator
は zoomVelocity
、が 0 に達するまで定期的に実行 zoomVelocity
されます。は、マップのズームに使用できるアニメーション値です。 ズーム倍率を設定する引数として使用します。 zoomVelocity
ゆっくりと 0 に達すると、ズームステップのサイズが小さくなります。
上の図では、保存したタッチの起点を使用 zoomOrigin
して、指が画面に触れたポイントにズームインします。 ズームアウトする場合は、 2 本の指でタップするジェスチャの間のポイントになります。 カメラ zoomBy()
のメソッドは、指定した場所で離散的なズームステップを実行するように処理します。
地図を拡大または 縮小するかどうかを示すブール型値が提供されます。 これにより、両方のズームケースでコードを使用できます。 唯一の違い は、アニメーション化された値zoomVelocity
が現在のズーム係数に加算または減算されることです。
ズーム倍率では、マップのズームインまたはズームアウトする距離を指定します。 ズーム係数 1 を指定しても、現在のズーム レベルは変更されません。
stopAnimations()
上記のメソッドは、対応 ValueAnimator
するインスタンスの進行中のアニメーションをキャンセルするだけです。
public void stopAnimations() {
if (zoomValueAnimator != null) {
zoomValueAnimator.cancel();
}
}
これで、小旅行になりました。 上記のコードスニペットは、ご自身のニーズに合わせて自由に変更できます。 たとえば、さまざまな補間法、さまざまなアニメーション値、または異なるアニメーション期間を使用して再生を開始します。