Android Fragment switching animation (note the problem of switching between the return key and the virtual return key)

I’m the easiest when I’m alone, because I don’t feel bored. Even if it’s bored, I can bear it on my own, and I don’t need to disturb others. —— Zhou Guoping, "Confetti in the Wind"

Android Fragment switching animation (note the problem of switching between the return key and the virtual return key)

Actual renderings:

Insert picture description here

Fragment switching animation mainly uses the setCustomAnimations() method in the FragmentTransaction transaction class:

Parameter Description:

enter: Refers to the animation effect when entering the view when one Fragmentis added or bound to the view Fragment;

exit: Refers to the animation effect when the Fragmentview is removed when a view is removed or unbound Fragmentfrom the view;

popEnter: Refers to the animation effect of the Fragment entering the view when the top of the stack is re-added or re-bound to the view after the popBackStack()top of the stack is Fragmentpopped up by calling or similar methods ;FragmentFragment

popExit: Refers to the animation effect that when popBackStack()the top of the stack is Fragmentpopped by calling or similar methods , the popped Fragmentout is removed or unbound from the view.

Animation effect (in order to see clearly, the animation time of entering and exiting is different, set it to the required time for specific use):

① When MainFragmentyou click the search button in the switch to switch to SearchFragment, it MainFragmentwill be removed, so the exitcorresponding fragment_exit.xmlanimation is executed, and the corresponding animation SearchFragmentis added to enter; therefore enter, the corresponding fragment_enter.xmlanimation is executed ;
Insert picture description here

② When SearchFragmentthe Return button to switch to MainFragmentwhen performing popBackStack()the method, SearchFragmentis ejected, the eject MainFragmentinto the stack, the SearchFragmentexecution is popExit, corresponding to fragment_pop_exit.xmlthe animation, and MainFragmentperform the popEntercorresponding fragment_pop_enter.xmlanimated
Insert picture description here

Creation steps:

Ⅰ. resCreate a animfolder under the file

Insert picture description here

Ⅱ. Create four animation resource files

Fragmententerenter

fragment_enter.xml

<?xml version="1.0" encoding="utf-8"?>
<!- 从父布局最右边进入直到完全充满父布局,动画时间1秒 -->
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="1000"  
    android:fillAfter="true"
    >
    <translate
        android:fromXDelta="100%p"
        android:toXDelta="0" />
</set>

effect:

Fragmentremovedexit

fragment_exit.xml

<?xml version="1.0" encoding="utf-8"?>
<!-- 从父布局最左边向左平移直到完全移出父布局,动画时间4秒 -->
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="4000"
    android:fillAfter="true">
    <translate
        android:fromXDelta="0"
        android:toXDelta="-100%p"
        />
</set>

③ Enter from the right popEnter

fragment_pop_enter.xml

<?xml version="1.0" encoding="utf-8"?>
<!-- 从离父布局最左边一个父布局宽度开始向右平移一个父布局的宽度 , 动画时间4秒-->
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:fillAfter="true"
    android:duration="4000">
    <translate
        android:fromXDelta="-100%p"
        android:toXDelta="0"
        />
</set>

④ Go out on the right popExit

fragment_pop_exit.xml

<?xml version="1.0" encoding="utf-8"?>
<!-- 从左往右移动一个父布局的宽度,动画时间0.3秒 -->
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:fillAfter="true"
    android:duration="300">
    <translate
        android:fromXDelta="0"
        android:toXDelta="100%p"/>
</set>

Ⅲ. JavaCode,

import androidx.fragment.app.Fragment;

MainFragment.javaPart of the code:

bt_search.setOnClickListener(new View.OnClickListener() {
    
    
            @Override
            public void onClick(View v) {
    
    
                // 跳转到 SearchFragment
                replaceFragment(new SearchFragment());
            }
        });


/**
 * 替换Fragment
 * @param fragment 替换的Fragment
 */
    public void replaceFragment(Fragment fragment){
    
    
        FragmentManager manager = getActivity().getSupportFragmentManager();
        FragmentTransaction transaction = manager.beginTransaction();
        // 切换Fragment时执行的动画
        transaction.setCustomAnimations(
                R.anim.fragment_enter,
                R.anim.fragment_exit,
                R.anim.fragment_pop_enter,
                R.anim.fragment_pop_exit);
        // R.id.fragment_container 是 activity_main.xml中 盛装 Fragment的容器
        transaction.add(R.id.fragment_container, fragment);
        // 添加到返回栈中
        transaction.addToBackStack(null);
        transaction.hide(this);
        transaction.commit();
    }

SearchFragment.javasection

bt_back.setOnClickListener(new View.OnClickListener() {
    
    
            @Override
            public void onClick(View v) {
    
    
                // 返回到 MainFragment
                // 要用这个方法去弹出栈顶Fragment,返回键才能和虚拟返回键执行一样的动画
                getActivity().getSupportFragmentManager().popBackStack();
            }
        });


Guess you like

Origin blog.csdn.net/C_biubiubiu/article/details/109808521