[Android] FragmentContainerView Navigation graph action 옵션 enterAnim, exitAnim, popEnterAnim, popExitAnim 알아보기 (2)

2022.12.06 - [Android] - [Android] FragmentContainerView Navigation graph action 옵션 popUpTo, popUpToInclusive 알아보기 (1)

[Android] FragmentContainerView Navigation graph action 옵션 popUpTo, popUpToInclusive 알아보기 (1)

이번 포스팅에서는 enterAnim, exitAnim, popEnterAnim, popExitAnim 어떤 의미를 가지는지에 대해 알아보려 한다. 정확한 의미를 모른다면 사용하기가 어려운 부분이라 실제로 코드를 작성하면서 확인해봤다. 저번 포스팅에서 사용한 코드에서 추가적으로 진행해봤다.

 

저번 포스팅에서는 popUpTo, popUpToInclusive 옵션에 대해 알아봤다. 혹시 학습이 안됐다면 아래 링크를 보고 학습하면 도움이 될 것 같다.

 

현재 A 프래그먼트(다음)에서 B 프래그먼트(기존) 이동하는 순간을 가정해보자.

하나하나 속성에 대해 설명해보면

enterAnim: 다음 프래그먼트로 이동하면서 부여할 애니메이션 (A 프래그먼트에 부여할 애니메이션)

exitAnim: 기존 프래그먼트가 사라지면서 부여할 애니메이션 (B 프래그먼트에 부여할 애니메이션)

 

pop이 붙은 속성은 기본적으로 뒤로 가기 버튼 누르거나 또는 백 스택에서 이전 페이지로 돌아가는 순간에 적용되는 애니메이션이다.

이건 뒤로 가는 상황이라 현재 B 프래그먼트(기존)에서 B 프래그먼트(이전) 이동하는 순간을 가정해보자.

popEnterAnim: 이전 프래그먼트로 이동하면서 부여할 애니메이션 (A 프래그먼트에 부여할 애니메이션)

popExitAnim: 기존 프래그먼트가 사라지면서 부여할 애니메이션 (B 프래그먼트에 부여할 애니메이션)

 

쉽게 설명해서 pop, enter, exit 키워드를 분리해서 생각하는 게 쉬운 거 같다.

pop: 이전 페이지로 돌아가는 거

enter: 페이지 이동하면서 현재 화면에 들어오는 프래그먼트

exit: 페이지이동하면서 사라질 프래그먼트

 

필자가 작성 nav_graph_main.xml 이다

이전 포스팅과 마찬가지로 main <-> second <-> third <-> fourth 프래그먼트로 이동하는 설정이다.

nav_graph_main.xml

<?xml version="1.0" encoding="utf-8"?>
<navigation xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/nav_graph_main"
    app:startDestination="@id/main_fragment">

    <fragment
        android:id="@+id/main_fragment"
        android:name="com.minikode.fragment_viewmodel_demo.ui.main.fragment.MainFragment"
        android:label="main">
        <action
            android:id="@+id/main_to_second"
            app:destination="@id/second_fragment"
            app:enterAnim="@anim/from_right"
            app:exitAnim="@anim/to_left"
            app:popEnterAnim="@anim/from_left"
            app:popExitAnim="@anim/to_right" />

    </fragment>

    <fragment
        android:id="@+id/second_fragment"
        android:name="com.minikode.fragment_viewmodel_demo.ui.main.fragment.SecondFragment"
        android:label="second">
        <action
            android:id="@+id/second_to_main"
            app:destination="@id/main_fragment"
            app:enterAnim="@anim/from_left"
            app:exitAnim="@anim/to_right"
            app:popEnterAnim="@anim/from_right"
            app:popExitAnim="@anim/to_left" />
        <action
            android:id="@+id/second_to_third"
            app:destination="@id/third_fragment"
            app:enterAnim="@anim/from_right"
            app:exitAnim="@anim/to_left"
            app:popEnterAnim="@anim/from_left"
            app:popExitAnim="@anim/to_right" />
    </fragment>
    <fragment
        android:id="@+id/third_fragment"
        android:name="com.minikode.fragment_viewmodel_demo.ui.main.fragment.ThirdFragment"
        android:label="third">
        <action
            android:id="@+id/third_to_second"
            app:destination="@id/second_fragment"
            app:enterAnim="@anim/from_left"
            app:exitAnim="@anim/to_right"
            app:popEnterAnim="@anim/from_right"
            app:popExitAnim="@anim/to_left" />
        <action
            android:id="@+id/third_to_fourth"
            app:destination="@id/fourth_fragment"
            app:enterAnim="@anim/from_right"
            app:exitAnim="@anim/to_left"
            app:popEnterAnim="@anim/from_left"
            app:popExitAnim="@anim/to_right" />
    </fragment>
    <fragment
        android:id="@+id/fourth_fragment"
        android:name="com.minikode.fragment_viewmodel_demo.ui.main.fragment.FourthFragment"
        android:label="fourth">
        <action
            android:id="@+id/fourth_to_third"
            app:destination="@id/third_fragment"
            app:enterAnim="@anim/from_left"
            app:exitAnim="@anim/to_right"
            app:popEnterAnim="@anim/from_right"
            app:popExitAnim="@anim/to_left" />
    </fragment>


</navigation>

각 애니메이션 부분 xml도 보자

from_left.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate
        android:duration="300"
        android:fromXDelta="-100%"
        android:toXDelta="0%" />
</set>

from_right.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate
        android:duration="300"
        android:fromXDelta="100%"
        android:toXDelta="0%" />
</set>

to_left.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate
        android:duration="300"
        android:fromXDelta="0%"
        android:toXDelta="-100%" />
</set>

to_right.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate
        android:duration="300"
        android:fromXDelta="0%"
        android:toXDelta="100%" />
</set>

 

위처럼 설정했고, 확인해보면 아래처럼 프래그먼트 이동이 되는 걸 확인할 수 있었다.

결과물