問題
StackOverflowは初めて使うので至らないところがありますがご容赦ください。
AndroidのSharedElementで遷移前の画面と遷移後の画面をクロスフェードさせたいと考えています。
以下のサンプルGIFを見ていただけたらわかると思いますが、遷移前の画面(青ボタン)から遷移後の画面(ピンク背景)に遷移する際、ボタンを押した直後からピンク背景となってしまいます。反対に、戻る場合においてもonBackPressedがコールされた瞬間から青背景となってしまっています。つまり、遷移の間に紫?背景となるような動作をしたいと考えています。
試したこと
MaterialContainerTransformが考えていることに近いのでこちらを試してみましたが、共有要素は1つだけに限定されており、以下のような動作をしたい場合は、共有要素を外枠だけに限定しなければなりません。(以下はSampleというTextViewも共有要素に指定しています)
加えてFragment.sharedElementEnterTransitionにFadeのTransitionを指定してみましたが、ルートレイアウトのConstraintLayoutのalphaが0からフェードするだけで透過背景とはなりませんでした。
皆様のお知恵をお貸しください。よろしくお願いします。
コード
FirstFragment
class FirstFragment: Fragment(R.layout.fragment_first) {
private var binding by autoCleared<FragmentFirstBinding>()
override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
binding = FragmentFirstBinding.bind(view)
binding.button.setOnClickListener {
findNavController().navigate(
FirstFragmentDirections.actionFirstFragmentToSecondFragment(),
FragmentNavigatorExtras(binding.button to binding.button.transitionName, binding.text to binding.text.transitionName)
)
}
}
}
SecondFragment
class SecondFragment: Fragment(R.layout.fragment_second) {
private var binding by autoCleared<FragmentSecondBinding>()
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
val transition = TransitionSet().apply {
addTransition(ChangeBounds())
addTransition(ChangeTransform())
addTransition(ChangeImageTransform())
}
sharedElementEnterTransition = transition
sharedElementReturnTransition = transition
}
override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
binding = FragmentSecondBinding.bind(view)
}
}
環境
・Kotlin 1.6.21
・AndroidX Core 1.7.0
・Navigation Components 2.4.1
注意
数日経ちましたが閲覧数が少ないようですので Teratail とのマルチポストを行いました。
解決後、どちらのサイトにも解決方法を記載します。