ビューのインタラクティブ機能の作成

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.SimpleOnGestureListener を拡張できます(GestureDetector.OnGestureListener インターフェースの実装は不要です)。たとえば、次のコードは、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(PieChart.this.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 を返します。その後、独自のカスタム ジェスチャー検出コードを実行できます。

現実味のある動きを作成する

ジェスチャーは、タッチスクリーン デバイスを制御する強力な方法ですが、現実味のある効果が出せないと、直感に反し、覚えづらくなります。その良い例は、ユーザーが画面上で 1 本の指をすばやくスライドさせてから上にあげる「フリング」ジェスチャーです。このジェスチャーは、ユーザーがあたかもフライホイールを押して回転させたかのように、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;
    }
    

注: GestureDetector によって計算される速度は物理的には正確ですが、多くの開発者は、この値を使用したフリング アニメーションは速すぎると感じています。x と y の速度を 4 から 8 の係数で除算するのが通例です。

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

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

Kotlin

    scroller.apply {
        if (!isFinished) {
            computeScrollOffset()
            setPieRotation(currY)
        }
    }
    

Java

    if (!scroller.isFinished()) {
        scroller.computeScrollOffset();
        setPieRotation(scroller.getCurrY());
    }
    

Scroller クラスはスクロール位置を計算しますが、それらの位置を自動的にはビューに適用しません。スクロール アニメーションが滑らかに見えるように、十分な頻度で新しい座標を取得して適用するのは、アプリの役目です。これには次の 2 通りの方法があります。

  • fling() を呼び出した後で postInvalidate() を呼び出し、強制的に再描画を行います。この手法では、スクロール オフセットが変わるたびに、onDraw() でスクロール オフセットを計算して postInvalidate() を呼び出す必要があります。
  • ValueAnimator を設定してフリング中のアニメーションを作成し、addUpdateListener() を呼び出してアニメーションの更新を処理するリスナーを追加します。

PieChart の例では、2 番目のアプローチを採用しています。この手法は設定がやや複雑ですが、アニメーション システムとの連携がより緊密になり、不必要なビューの無効化を避けられます。難点は、API レベルが 11 より前の場合、ValueAnimator を使用できないことです。つまり、バージョン 3.0 未満の Android を実行しているデバイスでは、この手法は使用できません。

注: 低い API レベルをターゲットとするアプリでは、ValueAnimator を使用できます。実行時に現在の API レベルをチェックし、現在のレベルが 11 未満の場合は、ビュー アニメーション システムへの呼び出しを省略してください。

Kotlin

    private val scroller = Scroller(context, null, true)
    private val scrollAnimator = ValueAnimator.ofFloat(0f, 1f).apply {
        addUpdateListener {
            if (scroller.isFinished) {
                scroller.computeScrollOffset()
                setPieRotation(scroller.currY)
            } else {
                cancel()
                onScrollFinished()
            }
        }
    }
    

Java

    scroller = new Scroller(getContext(), null, true);
    scrollAnimator = ValueAnimator.ofFloat(0,1);
    scrollAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
        @Override
        public void onAnimationUpdate(ValueAnimator valueAnimator) {
            if (!scroller.isFinished()) {
                scroller.computeScrollOffset();
                setPieRotation(scroller.getCurrY());
            } else {
                scrollAnimator.cancel();
                onScrollFinished();
            }
        }
    });
    

遷移を滑らかにする

ユーザーは、最新の UI に対して、状態が滑らかに遷移することを期待しています。最新の UI 要素は、現れたり消えたりするのではなく、フェードインしてフェードアウトします。モーションは、突然始まったり終わったりせず、滑らかに始まって終わります。Android 3.0 で導入された Android プロパティ アニメーション フレームワークを使用すると、滑らかな遷移を容易に実現できます。

アニメーション システムを使用するには、ビューの外観に影響するプロパティが変更されたときはいつでも、プロパティを直接変更しないようにします。その代わりに、ValueAnimator を使用して変更を加えます。次の PieChart の例では、円グラフ内の現在選択されているスライスを変更すると、グラフ全体が回転して、選択ポインタが選択されたスライスの中央に来ます。ValueAnimator は、新しい回転値をすぐに設定するのではなく、数百ミリ秒の時間をかけて回転を変更します。

Kotlin

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

Java

    autoCenterAnimator = ObjectAnimator.ofInt(PieChart.this, "PieRotation", 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();