TransitionDrawableでFragmentをクロスフェード遷移させる

TransitionDrawableでFragmentをクロスフェードさせながら切り替えてみた。

色合いはさておき、なかなかカッコいい

使い所としては、アプリの紹介やチュートリアル画面あたりだろうか。

実装方法

まずdrawable内にtransitionタグのリソースxmlを作成する

<?xml version="1.0" encoding="utf-8"?>
<transition xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@color/first" />
    <item android:drawable="@color/second" />
</transition>

このtrans.xmlを置き換えるレイアウトの背景に指定する。

   <FrameLayout
        android:id="@+id/main_container"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
+       android:background="@drawable/trans"
        />

これで準備OK
あとはstartTransitionにクロスフェードする時間を引数に渡して呼び出すだけ

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        ...

        fab.setOnClickListener {
+           val transition = main_container.background as TransitionDrawable
+           transition.startTransition(1000) //1秒かけてクロスフェード開始

+           supportFragmentManager
+                   .beginTransaction()
+                   .replace(R.id.main_container, SecondFragment())
+                   .commit()
        }
    }

これで@color/firstから@color/secondのクロスフェードが始まるので、その間にFirstFragmentからSecondFragmentへ切り替える。

切り替え後、戻す時はreverseTransitionを使えば逆のクロスフェードになる。

transition.reverseTransition(1000)

    override fun onBackPressed() {
+       val transition = main_container.background as TransitionDrawable
+       transition.reverseTransition(1000)

+       supportFragmentManager
+               .beginTransaction()
+               .replace(R.id.main_container, FirstFragment())
+               .commit()
    }

たったこれだけ、とても簡単