Fragment入れ替え時のアニメーション

1時間ほどはまったので、メモっておきます。

Fragmentを入れ替える時のお決まりの処理がこちらですね。

FragmentTransaction ft = getFragmentManager().beginTransaction();
Fragment next = FragmentSample.newInstance();
ft.replace(R.id.fragment, next);
ft.addToBackStack(null);
ft.commit();

レイアウト上に配置されたfragmentという要素 (FrameLayout) にFragmentSampleというFragmentを上書きしています。Fragment遷移したいだけであればこれでおしまい。

でも動かしてみると分かるのですが、やっぱり遷移時にアニメーションさせたくなるのが人の常 (？) 。なので、はじめ安直にこんな感じでアニメーションを設定してみました。

FragmentTransaction ft = getFragmentManager().beginTransaction();
Fragment next = FragmentSample.newInstance();
ft.replace(R.id.fragment, next);

// ↓ここから追加
ft.setCustomAnimations(
    R.anim.fragment_slide_right_enter,
    R.anim.fragment_slide_left_exit,
    R.anim.fragment_slide_left_enter,
    R.anim.fragment_slide_right_exit);
// ↑ここまで追加

ft.addToBackStack(null);
ft.commit();

・・・？あれれ、アニメーションしない。。。ということで一時間ほど悩んだわけです。答えは簡単。replaceの前にsetCustomAnimationsしないといけませんでした。

FragmentTransaction ft = getFragmentManager().beginTransaction();
Fragment next = FragmentSample.newInstance();

// ↓ここに移動
ft.setCustomAnimations(
    R.anim.fragment_slide_right_enter,
    R.anim.fragment_slide_left_exit,
    R.anim.fragment_slide_left_enter,
    R.anim.fragment_slide_right_exit);
// ↑ここに移動

ft.replace(R.id.fragment, next);
ft.addToBackStack(null);
ft.commit();

めでたし、めでたし。
support-v4-demoのサンプルコードを見てみると確かにreplace前にsetCustomAnimationsしてました。ちゃんと見なきゃダメですねぇ (to 自分)。