TransitionDrawableでFragmentをクロスフェードさせながら切り替えてみた。
色合いはさておき、なかなかカッコいい
使い所としては、アプリの紹介やチュートリアル画面あたりだろうか。
実装方法
まずdrawable内にtransition
タグのリソースxmlを作成する
trans.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を置き換えるレイアウトの背景に指定する。
activity_main.xml
<FrameLayout
android:id="@+id/main_container"
android:layout_width="match_parent"
android:layout_height="match_parent"
+ android:background="@drawable/trans"
/>
これで準備OK
あとはstartTransition
にクロスフェードする時間を引数に渡して呼び出すだけ
MainActivity.kt
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)
MainActivity.kt
override fun onBackPressed() {
+ val transition = main_container.background as TransitionDrawable
+ transition.reverseTransition(1000)
+ supportFragmentManager
+ .beginTransaction()
+ .replace(R.id.main_container, FirstFragment())
+ .commit()
}
たったこれだけ、とても簡単
公式ドキュメント
TransitionDrawable | Android Developers https://developer.android.com/reference/android/graphics/drawable/TransitionDrawable
実装コード
今回のコードは以下にありまっせ
Android-Kotlin-Lab at TransitionDrawable
https://github.com/ikemura23/Android-Kotlin-Lab/tree/TransitionDrawable