[안드로이드/Fragment] Fragment Animation

Fragment Animation

• 전환 애니메이션, 프래그먼트가 다른 프래그먼트로 바뀔때 완전 딱! 바뀌는게 아니라 애니메이션 설정이 가능
• 미리 정의 되어 있는 것 + 커스텀 사용 가능
• 애니메이션 설정은 프래그먼트 교체 전에 해야 함 *커스텀 애니메이션의 경우 교체 후 설정하면 적용 X

[MainActivity.kt]

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    binding = ActivityMainBinding.inflate(layoutInflater) // 뷰바인딩 객체
    val view = binding.root //뷰바인딩을 통해 레이아웃과 뷰가 결합 -> .root 를 통해 View 객체만를 뽑아내는(?)
    setContentView(view)

    setFragment("first")

}

[FirsrtFragment.kt]

class Firstfragment : Fragment() {

    private lateinit var first_frag_binding : FragmentFirstBinding

    override fun onCreateView(
        inflater: LayoutInflater,
        container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? {
        first_frag_binding = FragmentFirstBinding.inflate(layoutInflater) // 뷰바인딩 객체
        val view = first_frag_binding.root

        first_frag_binding.firstButton1.setOnClickListener {
            val mainActivity = activity as MainActivity
            mainActivity.setFragment("second")
        }

        return view
    }
}

[SecondFragment.kt]

class SecondFragment : Fragment() {

    private lateinit var second_frag_binding : FragmentSecondBinding

    override fun onCreateView(
        inflater: LayoutInflater,
        container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? {
        second_frag_binding = FragmentSecondBinding.inflate(layoutInflater)
        val view = second_frag_binding.root

        return view
    }
}

 

기본 애니메이션

• setTransition : 새로운 Fragment로 교체할 때 설정, 돌아올때도 애니메이션 나타남
• TRANSIT_FRAGMENT_FADE / TRANSIT_FRAGMENT_OPEN / TRANSIT_FRAGMENT_CLOSE   3가지를 제공하며 안드로이드 버전에 따라 모두 같은 애니메이션으로 나타날 수도 있음

fun setFragment(name : String) {
    val tran = supportFragmentManager.beginTransaction()

    // 분기 (유지보수에 용이)
    when (name) {
        "first" -> {
            tran.replace(R.id.container1, firstFragment)
        }

        "second" -> {
            // 새롭게 나타날 때 적용해주면 돌아올때도 같이 적용됨

            // 기본
            tran.setTransition(FragmentTransaction.TRANSIT_FRAGMENT_CLOSE) // OPEN은 액티비티 전환시 애니메이션
            tran.replace(R.id.container1, secondFragment)
            tran.addToBackStack(null) // 결과 보고, 뒤로가기 누르면 다시 입력할 수 있는 프래그먼트로
        }
    }
    tran.commit()

커스텀 애니메이션

• 개바라자가 XMl 파일을 통해 애니메이션을 커스텀
• 총 4가지의 애니메이션을 정의 -> 나타나는 프래그먼트 / 사라지는 프래그먼트 / 이전 프래그먼트로 돌아올때 나타나는 / 이전 프래그먼트로 돌아올때 사라지는 애니메이션 

fun setFragment(name : String) {
    val tran = supportFragmentManager.beginTransaction()

    // 분기 (유지보수에 용이)
    when (name) {
        "first" -> {
            tran.replace(R.id.container1, firstFragment)
        }
        "second" -> {
            // 새롭게 나타날 때 적용해주면 돌아올때도 같이 적용됨
            /* 커스텀 */
            
            //페이드
            //tran.setCustomAnimations(R.anim.fade_xml1, R.anim.fade_xml2, R.anim.fade_xml1, R.anim.fade_xml2) // second 나타날때, first 사라질때, first 나타날때, second 사라질때
            
            //슬라이드 애니메이션
            tran.setCustomAnimations(R.anim.slide_xml1,R.anim.slide_xml2,R.anim.slide_xml3,R.anim.slide_xml4)
            
            tran.replace(R.id.container1, secondFragment)
            tran.addToBackStack(null) // 결과 보고, 뒤로가기 누르면 다시 입력할 수 있는 프래그먼트로
        }
    }
    tran.commit()
}

[slide_xml1.xml]

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <objectAnimator
        android:propertyName = "x"
        android:valueType = "floatType"
        android:valueFrom = "-1280"
        android:valueTo = "0"
        android:duration = "500"/>

</set>
<!-- 왼쪽 바깥 아이가 오른쪽 안으로 들어오고, 원래 아이는 오른쪽으로 빠짐 -->

[slide_xml2.xml]

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <objectAnimator
        android:propertyName = "x"
        android:valueType = "floatType"
        android:valueFrom = "0"
        android:valueTo = "1280"
        android:duration = "500"/>

</set>
    <!-- 왼쪽 바깥 아이가 오른쪽 안으로 들어오고, 원래 아이는 오른쪽으로 빠짐 -->

[slide_xml3.xml]

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <objectAnimator
        android:propertyName = "x"
        android:valueType = "floatType"
        android:valueFrom = "1280"
        android:valueTo = "0"
        android:duration = "500"/>

</set>
    <!-- 오른쪽 바깥 아이가 왼쪾 안으로 들어오고, 원래 아이는 왼쪾으로 빠짐 -->

[slide_xml4.xml]

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <objectAnimator
        android:propertyName = "x"
        android:valueType = "floatType"
        android:valueFrom = "0"
        android:valueTo = "-1280"
        android:duration = "500"/>

</set>
    <!-- 오른쪽 바깥 아이가 왼쪾 안으로 들어오고, 원래 아이는 왼쪾으로 빠짐 -->

[fade_xml1.xml]

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <objectAnimator
        android:propertyName = "alpha"
        android:valueType = "floatType"
        android:valueFrom = "0"
        android:valueTo = "1"
        android:duration = "500"/>

</set>

<!-- 나타나는 -->

[fade_xml2.xml]

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <objectAnimator
        android:propertyName = "alpha"
        android:valueType = "floatType"
        android:valueFrom = "1"
        android:valueTo = "0"
        android:duration = "500"/>

</set>
    <!-- 사라지는 -->

버튼을 누르면 왼쪽 프래그먼트에서 오른쪽 프래그먼트로 애니메이션 효과와 함께 전환