カスタムビューをインタラクティブにする

Compose を試す
Jetpack Compose は、Android に推奨される UI ツールキットです。Compose でレイアウトを操作する方法を学習します。
ジェスチャー →

UI の描画は、カスタムビューを作成するプロセスの一部にすぎません。また、模倣しようとしている実際の行動によく似た方法で、ビューがユーザー入力に応答する必要もあります。

アプリ内のオブジェクトが実際のオブジェクトのように動作するようにします。たとえば、アプリ内の画像が存在から飛び出して別の場所で再表示されることは避けてください。現実世界のオブジェクトはこのような動作をしないためです。代わりに、イメージをある場所から別の場所に移動します。

ユーザーはインターフェースの微妙な動作や感覚にも反応し、現実世界を模倣した微妙な違いに最もよく反応します。たとえば、ユーザーが UI オブジェクトをフリングするときに、動きを遅らせる慣性を最初に感じられるようにします。動きが終わると、物体がフリングの向こう側に伝わる勢いを感じます。

このページでは、Android フレームワークの機能を使用して、このような実際の動作をカスタムビューに追加する方法について説明します。

その他の関連情報については、入力イベントの概要とプロパティ アニメーションの概要をご覧ください。

入力操作を処理する

他の多くの UI フレームワークと同様に、Android は入力イベントモデルをサポートしています。ユーザー アクションは、コールバックをトリガーするイベントに変換されるため、コールバックをオーバーライドして、アプリがユーザーにどのように応答するかをカスタマイズできます。Android システムで最も一般的な入力イベントはタップで、これにより onTouchEvent(android.view.MotionEvent) がトリガーされます。次のように、このメソッドをオーバーライドしてイベントを処理します。

Kotlin

override fun onTouchEvent(event: MotionEvent): Boolean {
    return super.onTouchEvent(event)
}

Java

@Override
   public boolean onTouchEvent(MotionEvent event) {
    return super.onTouchEvent(event);
   }

タッチイベント自体は特に有用ではありません。最新のタッチ UI は、タップ、プル、プッシュ、フリング、ズームなどのジェスチャーによってインタラクションを定義します。未加工のタッチイベントを操作に変換するために、Android には GestureDetector が用意されています。

GestureDetector を作成するには、GestureDetector.OnGestureListener を実装するクラスのインスタンスを渡します。少数の操作のみを処理する場合は、GestureDetector.OnGestureListener インターフェースを実装する代わりに GestureDetector.SimpleOnGestureListener を拡張できます。たとえば、次のコードは、GestureDetector.SimpleOnGestureListener を拡張して onDown(MotionEvent) をオーバーライドするクラスを作成します。

Kotlin

private val myListener =  object : GestureDetector.SimpleOnGestureListener() {
    override fun onDown(e: MotionEvent): Boolean {
        return true
    }
}

private val detector: GestureDetector = GestureDetector(context, myListener)

Java

class MyListener extends GestureDetector.SimpleOnGestureListener {
   @Override
   public boolean onDown(MotionEvent e) {
       return true;
   }
}
detector = new GestureDetector(getContext(), new MyListener());

GestureDetector.SimpleOnGestureListener を使用するかどうかにかかわらず、常に true を返す onDown() メソッドを実装します。これが必要になるのは、すべての操作が onDown() メッセージで始まるためです。onDown() から false を返すと、GestureDetector.SimpleOnGestureListener と同様に、システムは残りの操作を無視すると想定され、GestureDetector.OnGestureListener の他のメソッドは呼び出されません。操作全体を無視する場合にのみ、onDown() から false を返します。

GestureDetector.OnGestureListener を実装し、GestureDetector のインスタンスを作成したら、GestureDetector を使用して、onTouchEvent() で受け取るタッチイベントを解釈できます。

Kotlin

override fun onTouchEvent(event: MotionEvent): Boolean {
    return detector.onTouchEvent(event).let { result ->
        if (!result) {
            if (event.action == MotionEvent.ACTION_UP) {
                stopScrolling()
                true
            } else false
        } else true
    }
}

Java

@Override
public boolean onTouchEvent(MotionEvent event) {
   boolean result = detector.onTouchEvent(event);
   if (!result) {
       if (event.getAction() == MotionEvent.ACTION_UP) {
           stopScrolling();
           result = true;
       }
   }
   return result;
}

操作の一部として認識されないタッチイベントを onTouchEvent() に渡すと、false が返されます。その後、独自のカスタム ジェスチャー検出コードを実行できます。

身体的にもっともらしい動きを作成する

ジェスチャーはタッチスクリーン デバイスを操作するための優れた方法ですが、物理的に妥当な結果が得られない限り、直感に反して覚えるのが難しい場合があります。

たとえば、ビューに描画されたアイテムを垂直軸を中心に回転させる水平フリング ジェスチャーを実装するとします。ユーザーがフライホイールを押して回転させるかのように、UI がフリングの方向に素早く動き、その後速度が遅くなる場合に、この操作は理にかなっています。

独自のスコープ動作を実装する方法については、スクロール操作のアニメーション化の方法に関するドキュメントをご覧ください。しかし、フライホイールの感覚をシミュレートするのは簡単なことではありません。フライホイール モデルを正しく機能させるには、多くの物理学と数学が必要です。幸い、Android には、このような動作をシミュレートするためのヘルパークラスが用意されています。Scroller クラスは、フライホイール スタイルのフリング操作を処理するための基礎となります。

フリングを開始するには、フリングの開始速度と、フリングの x 値と最大 y 値を指定して fling() を呼び出します。速度値には、GestureDetector で計算された値を使用できます。

Kotlin

fun onFling(e1: MotionEvent, e2: MotionEvent, velocityX: Float, velocityY: Float): Boolean {
    scroller.fling(
            currentX,
            currentY,
            (velocityX / SCALE).toInt(),
            (velocityY / SCALE).toInt(),
            minX,
            minY,
            maxX,
            maxY
    )
    postInvalidate()
    return true
}

Java

@Override
public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX, float velocityY) {
   scroller.fling(currentX, currentY, velocityX / SCALE, velocityY / SCALE, minX, minY, maxX, maxY);
   postInvalidate();
    return true;
}

fling() を呼び出すと、フリング ジェスチャーの物理モデルが設定されます。その後、定期的に Scroller.computeScrollOffset() を呼び出して Scroller を更新します。computeScrollOffset() は、現在の時刻を読み取り、物理モデルを使用してその時点の x と y の位置を計算することで、Scroller オブジェクトの内部状態を更新します。これらの値を取得するには、getCurrX() と getCurrY() を呼び出します。

ほとんどのビューは、Scroller オブジェクトの x 位置と y 位置を scrollTo() に直接渡します。こちらの例は少し異なり、現在のスクロールの x 位置を使用してビューの回転角度を設定しています。

Kotlin

scroller.apply {
    if (!isFinished) {
        computeScrollOffset()
        setItemRotation(currX)
    }
}

Java

if (!scroller.isFinished()) {
    scroller.computeScrollOffset();
    setItemRotation(scroller.getCurrX());
}

Scroller クラスはスクロール位置を計算しますが、その位置をビューに自動的に適用することはありません。新しい座標を頻繁に適用して、スクロール アニメーションが滑らかに見えるようにします。これには次の 2 つの方法があります。

  • fling() を呼び出した後に postInvalidate() を呼び出して、再描画を強制します。この手法では、onDraw() でスクロール オフセットを計算し、スクロール オフセットが変更されるたびに postInvalidate() を呼び出す必要があります。
  • フリングの持続時間にわたってアニメーション化する ValueAnimator をセットアップし、addUpdateListener() を呼び出してアニメーションの更新を処理するリスナーを追加します。この方法により、View のプロパティをアニメーション化できます。

移行をスムーズにする

ユーザーは、最新の UI が状態間をスムーズに遷移することを期待しています。UI 要素は表示 / 非表示ではなくフェードインとフェードアウトで、動作は突然開始 / 停止するのではなく滑らかに開始して終了する必要があります。Android プロパティ アニメーション フレームワークを使用すると、スムーズに遷移できます。

アニメーション システムを使用する場合、プロパティがビューの外観に影響を与えるものを変更する場合は、プロパティを直接変更しないでください。代わりに、ValueAnimator を使用して変更を行います。次の例では、ビュー内で選択された子コンポーネントを変更すると、選択ポインタが中央に配置されるように、レンダリングされたビュー全体が回転します。ValueAnimator は、新しい回転値をすぐに設定するのではなく、数百ミリ秒にわたってローテーションを変更します。

Kotlin

autoCenterAnimator = ObjectAnimator.ofInt(this, "Rotation", 0).apply {
    setIntValues(targetAngle)
    duration = AUTOCENTER_ANIM_DURATION
    start()
}

Java

autoCenterAnimator = ObjectAnimator.ofInt(this, "Rotation", 0);
autoCenterAnimator.setIntValues(targetAngle);
autoCenterAnimator.setDuration(AUTOCENTER_ANIM_DURATION);
autoCenterAnimator.start();

変更する値がベース View プロパティのいずれかである場合、アニメーションの実行はさらに簡単になります。ビューには、次の例に示すように、複数のプロパティの同時アニメーション用に最適化された組み込み ViewPropertyAnimator があるためです。

Kotlin

animate()
    .rotation(targetAngle)
    .duration = ANIM_DURATION
    .start()

Java

animate().rotation(targetAngle).setDuration(ANIM_DURATION).start();