LoginSignup
5

More than 5 years have passed since last update.

Fragment変更時にナビゲーションドロワーアイコンをアニメーションさせる

Posted at

Gmailアプリでメール一覧 ⇔ メール詳細に移動した時のように、ナビゲーションドロワーアイコンをアニメーションさせます。

こんな感じです。

ezgif-1-d071526deb-iloveimg-resized.gif

ナビゲーションドロワー付きのActivity内にFragmentを持ちます。
FirstFragment のボタンをタップすると SecondFragment が表示されます。
バックボタンをタップするとFirstFragmentにもどります。

実装

※すでにナビゲーションドロワーの実装が完了していることを想定しています。

FirstFragment ⇔ SecondFragment 移動時に下記のメソッドを呼び出しています。

private void setNavigationIcon(boolean isSecondFragment) {
        ValueAnimator valueAnimator;
        if (isSecondFragment) {
            valueAnimator = ValueAnimator.ofFloat(0, 1);
        } else {
            valueAnimator = ValueAnimator.ofFloat(1, 0);
        }

        valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator valueAnimator) {
                float slideOffset = (Float) valueAnimator.getAnimatedValue();
                toggle.getDrawerArrowDrawable().setProgress(slideOffset);
            }
        });
        valueAnimator.setInterpolator(new DecelerateInterpolator());
        valueAnimator.setDuration(250);
        valueAnimator.start();
    }

ナビゲーションドロワーアイコンはDrawerArrowDrawable.setProgress()に0.0〜1.0の値を渡すことによってハンバーガーアイコン⇔矢印アイコンの変化度合いを設定することができます。
setProgress(0.5f);とした場合はこのような状態になります。

スクリーンショット 2017-06-21 19.14.46.png

DrawerArrowDrawable.setProgress()に0.0〜1.0の値を連続的に渡すことでナビゲーションドロワーアイコンのアニメーションさせることができます。

これにはValueAnimatorを使用しています。

ValueAnimator.ofFloat() で開始値と終了値を設定します。
ValueAnimator.setDuration() で設定したアニメーション時間の間で開始値〜終了値に値を変化させます。
値が変更される毎にonAnimationUpdate()が呼び出されます。

FirstFragment → SecondFragmentの場合は1.0〜0.0に変化させ、
SecondFragment → FirstFragmentの場合はその逆の0.0〜1.0に変化させています。

参考

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
5