带有进退动画的fragment

编辑于2018年11月22日

常常有这样的需求，有几个连续的表格页面需要填写，同时需要在最后一个页面一次性提交，于是我们想到使用fragment，但又要作出类似activity进退动画的效果。

先看效果图：

这里我使用了一个activity加载多个fragment的方法来实现。

MainActivity:

import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentTransaction;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;

public class MainActivity extends AppCompatActivity {

    private FragmentManager fm;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        fm = getSupportFragmentManager();
        OneFragment oneFragment = new OneFragment();
        FragmentTransaction transaction = fm.beginTransaction();
        transaction.add(R.id.fragment_container,oneFragment,"OneFragment");
        transaction.commit();
    }

    public void turnToTwo(){
        OneFragment oneFragment = (OneFragment) fm.findFragmentByTag("OneFragment");
        TwoFragment twoFragment = (TwoFragment) fm.findFragmentByTag("TwoFragment");
        if (twoFragment==null){
            TwoFragment mTwoFragment = new TwoFragment();
            FragmentTransaction transaction = fm.beginTransaction();
            transaction.setCustomAnimations(R.anim.slide_in_right,R.anim.slide_out_left);
            transaction.add(R.id.fragment_container, mTwoFragment,"TwoFragment")
                    .hide(oneFragment).commit();
        }else {
            FragmentTransaction transaction = fm.beginTransaction();
            transaction.setCustomAnimations(R.anim.slide_in_right,R.anim.slide_out_left);
            transaction.show(twoFragment).hide(oneFragment).commit();
        }
    }

    public void turnToThree(){
        TwoFragment twoFragment = (TwoFragment) fm.findFragmentByTag("TwoFragment");
        ThreeFragment threeFragment = (ThreeFragment) fm.findFragmentByTag("ThreeFragment");
        if (threeFragment==null){
            ThreeFragment mThreeFragment = new ThreeFragment();
            FragmentTransaction transaction = fm.beginTransaction();
            transaction.setCustomAnimations(R.anim.slide_in_right,R.anim.slide_out_left);
            transaction.add(R.id.fragment_container, mThreeFragment,"ThreeFragment")
                    .hide(twoFragment).commit();
        }else {
            FragmentTransaction transaction = fm.beginTransaction();
            transaction.setCustomAnimations(R.anim.slide_in_right,R.anim.slide_out_left);
            transaction.hide(twoFragment).show(threeFragment).commit();
        }
    }

    @Override
    public void onBackPressed() {
        OneFragment oneFragment = (OneFragment) fm.findFragmentByTag("OneFragment");
        TwoFragment twoFragment = (TwoFragment) fm.findFragmentByTag("TwoFragment");
        ThreeFragment threeFragment = (ThreeFragment) fm.findFragmentByTag("ThreeFragment");
        if (threeFragment!=null&&threeFragment.isVisible()){
            FragmentTransaction transaction = fm.beginTransaction();
            transaction.setCustomAnimations(R.anim.slide_in_left,R.anim.slide_out_right);
            transaction.hide(threeFragment).show(twoFragment).commit();
        }else if (twoFragment!=null&&twoFragment.isVisible()){
            FragmentTransaction transaction = fm.beginTransaction();
            transaction.setCustomAnimations(R.anim.slide_in_left,R.anim.slide_out_right);
            transaction.hide(twoFragment).show(oneFragment).commit();
        }else {
            super.onBackPressed();
        }
    }
}

主要在onBackPressed中对fragment进行了显示隐藏不销毁的做法，其次当某一个页面加载过一次后再次加载时加载已经存在的页面对象而不是新建新的对象。

 

几个fragment及布局文件类似，如下：

 

public class OneFragment extends Fragment {
    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fragment_one,container,false);
        view.findViewById(R.id.btn_next).setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                ((MainActivity)getActivity()).turnToTwo();
            }
        });
        return view;
    }
}

 

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@android:color/holo_red_light">
    <EditText
        android:layout_width="match_parent"
        android:layout_height="40dp"
        android:layout_margin="40dp"
        android:layout_centerInParent="true"
        android:background="@android:color/white"/>
    <Button
        android:id="@+id/btn_next"
        android:layout_width="match_parent"
        android:layout_height="40dp"
        android:text="下一页"/>
</RelativeLayout>

其中还用到了几个xml动画，几个文件如下：

 

 

slide_in_left.xml

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

slide_in_right.xml

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

 

 

slide_out_left.xml

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

slide_out_right.xml

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

当你在最后一个页面需要获取前面页面的值时可以先获取前面的fragment对象，再通过该对象（该类提供获取对应值的公共方法）获取对应页面的值。如：((MainActivity)getActivity()).getSupportFragmentManager().findFragmentByTag("OneFragment");获取到fragment栈中的OneFragment。