通过JazzyViewPager来实现Fragment页面间的动画切效果

JazzyViewPager 开源项目地址:

https://github.com/jfeinstein10/JazzyViewPager

其实实现它还是蛮简单的,有两个关键点,一是使用扩展FragmentPagerAdapter,二是重写instantiateItem,isViewFromObject这两个方法,如果仅仅扩展FragmentPagerAdapter的话,动画效果则会不起作用。

布局文件如下:

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/tabPage"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <com.jfeinstein.jazzyviewpager.JazzyViewPager
        android:id="@+id/jazzy_pager"
        android:layout_width="match_parent"
        android:layout_weight="1"
        android:layout_height="0dp">


    </com.jfeinstein.jazzyviewpager.JazzyViewPager>

    <TextView
        android:background="@color/bg_silver"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="this is the TabFragmentActivity\nTAB will be here." />
</LinearLayout>

Java代码如下:

package org.csware.ee.demo;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentActivity;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import android.view.View;
import android.view.ViewGroup;
import android.widget.LinearLayout;

import com.jfeinstein.jazzyviewpager.JazzyViewPager;

import org.csware.ee.demo.fragment.FourFragment;
import org.csware.ee.demo.fragment.OneFragment;
import org.csware.ee.demo.fragment.ThreeFragment;
import org.csware.ee.demo.fragment.TwoFragment;


public class TabFragmentActivity extends FragmentActivity {

    final static String TAG = "TabFragmentActivity";

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_tab_fragment);

        init();
    }

    private JazzyViewPager mJazzy;
    LinearLayout tabPage;
    FragmentActivity activity;

    void init() {
        activity = this;

        tabPage = (LinearLayout) findViewById(R.id.tabPage);


        setupJazziness(JazzyViewPager.TransitionEffect.Standard);
    }

    void setupJazziness(JazzyViewPager.TransitionEffect effect) {
        mJazzy = (JazzyViewPager) findViewById(R.id.jazzy_pager);
        mJazzy.setTransitionEffect(effect);
        //mJazzy.setAdapter(new MainAdapter());
        mJazzy.setAdapter(new TabFragmentAdapter(getSupportFragmentManager()));
        //mJazzy.setPageMargin(30);
//        mJazzy.setOutlineEnabled(true);

    }


    /**
     * 适配器
     */
    class TabFragmentAdapter extends FragmentPagerAdapter {

        public TabFragmentAdapter(FragmentManager fragmentManager) {
            super(fragmentManager);
        }

        Fragment[] pages = new Fragment[]{
                new OneFragment(),
                new TwoFragment(),
                new ThreeFragment(),
                new FourFragment()
        };

        @Override
        public Fragment getItem(int position) {
            return pages[position];
        }

        @Override
        public int getCount() {
            return pages.length;
        }


        //**************加上下面的两行即可实现换页时的动画效果*********************************//

        @Override
        public Object instantiateItem(ViewGroup container, int position) {
            Object obj = super.instantiateItem(container, position);
            mJazzy.setObjectForPosition(obj, position);
            return obj;
        }

        @Override
        public boolean isViewFromObject(View view, Object object) {
            if (object != null) {
                return ((Fragment) object).getView() == view;
            } else {
                return false;
            }
        }
    }

}

至于4个Fragment,就不贴了。

你可能感兴趣的:(viewpager)