Gmailアプリでメール一覧 ⇔ メール詳細に移動した時のように、ナビゲーションドロワーアイコンをアニメーションさせます。
こんな感じです。
ナビゲーションドロワー付きの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);
とした場合はこのような状態になります。
DrawerArrowDrawable.setProgress()に0.0〜1.0の値を連続的に渡すことでナビゲーションドロワーアイコンのアニメーションさせることができます。
これにはValueAnimatorを使用しています。
ValueAnimator.ofFloat()
で開始値と終了値を設定します。
ValueAnimator.setDuration()
で設定したアニメーション時間の間で開始値〜終了値に値を変化させます。
値が変更される毎にonAnimationUpdate()
が呼び出されます。
FirstFragment → SecondFragmentの場合は1.0〜0.0に変化させ、
SecondFragment → FirstFragmentの場合はその逆の0.0〜1.0に変化させています。