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

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 では、タップ、pull、push、フリング、ズームなどのジェスチャーに関してインタラクションが定義されています。未加工のタッチイベントを操作に変換するために、Android には GestureDetector が用意されています。

GestureDetector.OnGestureListener を実装するクラスのインスタンスを渡して、GestureDetector を作成します。少数の操作だけを処理する場合は、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 クラスは、フライホイール スタイルのフリング操作を処理するための基礎となります。

フリングを開始するには、フリングの開始速度と、xy の最小値と最大値を指定して 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 プロパティの 1 つである場合は、アニメーションの実行がさらに簡単になります。これは、次の例に示すように、複数のプロパティを同時にアニメーション化するように最適化された組み込みの ViewPropertyAnimator がビューに組み込まれているためです。

Kotlin

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

Java

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