帶有進退動畫的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。