Android Fragment shared element transitions動畫效果

1. 範例程式

Fragment參考以下程式碼

//Fragment1
override fun onViewCreated(
    view: View, 
    savedInstanceState: Bundle?
) {
    super.onViewCreated(view, savedInstanceState)
    ViewCompat.setTransitionName(
        binding.itemImage, 
        "itemImage"
    )
    binding.itemImage.setOnClickListener {
        activity?.supportFragmentManager?.commit {
            addSharedElement(
                binding.itemImage, 
                binding.itemImage.transitionName
            )
            replace<TestFragment2>(R.id.fragment_container_view)
            addToBackStack(null)
        }
    }
}



//Fragment2
override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    sharedElementEnterTransition = TransitionInflater
        .from(requireContext())
        .inflateTransition(android.R.transition.move)
}

override fun onViewCreated(
    view: View, 
    savedInstanceState: Bundle?
) {
    super.onViewCreated(view, savedInstanceState)
    ViewCompat.setTransitionName(
        binding.itemImage2,
        "itemImage"
    )
}

Activity參考以下程式碼

//在onCreate內加入下列程式碼
val fragment1 = TestFragment1()
supportFragmentManager.commit {
    setReorderingAllowed(true)
    add(
        R.id.fragment_container_view,
        fragment1
    )
}
binding.backBtn.setOnClickListener {
    supportFragmentManager.popBackStack()
}

2. 功能介紹

在兩個Fragment中設定相同的TransitionName

設定方式可以像上面範例一樣

在onViewCreated設定ViewCompat.setTransitionName

也可以在xml內設定android:transitionName="itemImage"

兩個Fragment，相同transitionName，就可以達到上面影片的效果

以上內容參考Android 官網

---

相關文章

Android Fragment建立、更換、尋找、Back Stack	Android Fragment add與replace分析
1. 使用XML在Activity與Fragment連接 2. 使用程式方式在Activity與Fragment連接 3. 將已新增的Fragment更換 4. 尋找已建立的Fragment 5. Fragment對應的FragmentManager 6. Back Stack使用
Android Fragment 自定義constructor	Android Fragment show、hide、attach、detach用法
1. 重寫FragmentFactory 2. 建立Fragment 3. 在Activity中使用	1. 範例程式 2. Fragment show與hide是什麼呢？ 3. Fragment attach與detach是什麼呢？
Android Fragment Transitions動畫效果	Android Fragment lifecycle
1. 範例程式 2. 功能介紹	1. 簡略 2. 測試搭配setMaxLifecycle的生命週期
Android Fragment通訊
1. 簡要 2. 使用View Model共享數據 3. 使用 Fragment Result API獲取結果

訂閱Codeilin的旅程，若有最新消息會通知。

廣告