你的位置:首页 > 操作系统

[操作系统]通过JazzyViewPager来实现Fragment页面间的动画切效果


JazzyViewPager 开源项目地址:

https://github.com/jfeinstein10/JazzyViewPager

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

布局文件如下:

<LinearLayout  ="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,就不贴了。