Android Fragment Transitions動畫效果

1. 範例程式

Fragment參考以下程式碼

class TestFragment1: Fragment() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        val inflater = TransitionInflater.from(requireContext())
        enterTransition = inflater.inflateTransition(R.transition.slide_right)
        exitTransition = inflater.inflateTransition(R.transition.slide_left)
    }
}

class TestFragment2: Fragment() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        val inflater = TransitionInflater.from(requireContext())
        enterTransition = inflater.inflateTransition(R.transition.slide_top)
        exitTransition = inflater.inflateTransition(R.transition.slide_bottom)
    }
}

Activity參考以下程式碼

val fragment1 = TestFragment1()
val fragment2 = TestFragment2()
supportFragmentManager.commit {
    setReorderingAllowed(true)
    add(
        R.id.fragment_container_view,
        fragment1
    )
}
binding.show1Btn.setOnClickListener {
    supportFragmentManager.commit {
        replace(R.id.fragment_container_view,
            fragment2)
        addToBackStack(null)
    }
}
binding.show2Btn.setOnClickListener {
    supportFragmentManager.popBackStack()
}

2. 功能介紹

在Fragment的onCreate位置,設定enterTransition、exitTransition動畫模式

這樣進入與離開時,就會有動畫呈現,效果如上面的影片

以上內容參考Android 官網


相關文章

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

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

廣告

發表迴響

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com 標誌

您的留言將使用 WordPress.com 帳號。 登出 /  變更 )

Twitter picture

您的留言將使用 Twitter 帳號。 登出 /  變更 )

Facebook照片

您的留言將使用 Facebook 帳號。 登出 /  變更 )

連結到 %s

WordPress.com.

向上 ↑

%d 位部落客按了讚: