oncreate中设置viewPager
viewPager.setPageTransformer(true,new DepthPageTransformer());//设置页面过滤动画效果 pagerAdapter = new ScreenSlidePagerAdapter(getSupportFragmentManager());//获得页面适配的适配器 viewPager.setAdapter(pagerAdapter);//设置适配器
创建一个适配器
private class ScreenSlidePagerAdapter extends FragmentStatePagerAdapter { public ScreenSlidePagerAdapter(FragmentManager fm) { super(fm); } @Override public Fragment getItem(int position) { return new ScreenSlidePageFragment(); } @Override public int getCount() { return NUM_PAGES; } }
新建一个Frament装载内容
public class ScreenSlidePageFragment extends Fragment { @Override public View onCreateView(LayoutInflater inflater,ViewGroup container,Bundle savedInstanceState) { ViewGroup rootView = (ViewGroup) inflater.inflate( R.layout.activity_main, container, false); return rootView; } }
Frament的 xml文件:(只显示一些文本)
<?xml version="1.0" encoding="utf-8"?> <ScrollView xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/content" android:layout_width="match_parent" android:layout_height="match_parent" > <TextView style="?android:textAppearanceMedium" android:padding="16dp" android:lineSpacingMultiplier="1.2" android:layout_width="match_parent" android:layout_height="wrap_content" android:text="@string/lorem_ipsum" /> </ScrollView>
Activity中的xml文件:(就是一个viewPager)
<android.support.v4.view.ViewPager xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/pager" android:layout_width="match_parent" android:layout_height="match_parent" />
下面给出两种过滤动画效果:
1.新页面覆盖旧页面:
public class DepthPageTransformer implements ViewPager.PageTransformer { private static final float MIN_SCALE = 0.75f; @Override public void transformPage(View view, float position) { int pageWidth = view.getWidth(); if (position < -1) { //这一页是屏幕左边。 view.setAlpha(0); } else if (position <= 0) { // [-1,0] // 使用默认的幻灯片过渡当向左移动页面 view.setAlpha(1); view.setTranslationX(0); view.setScaleX(1); view.setScaleY(1); } else if (position <= 1) { // (0,1] // 褪色的页面 view.setAlpha(1 - position); // 抵消默认幻灯片过渡 view.setTranslationX(pageWidth * -position); float scaleFactor = MIN_SCALE + (1 - MIN_SCALE) * (1 - Math.abs(position)); view.setScaleX(scaleFactor); view.setScaleY(scaleFactor); } else { // (1,+Infinity] view.setAlpha(0); } } }
2.缩小页面过滤效果翻页
public class ZoomOutPageTransformer implements ViewPager.PageTransformer { private static final float MIN_SCALE = 0.85f; private static final float MIN_ALPHA = 0.5f; @Override public void transformPage(View view, float position) { int viewPagerWidth = view.getWidth(); int viewPagerHight = view.getHeight(); if (position < -1){ view.setAlpha(0f); } else if (position <= 1){ float scaleFactor = Math.max(MIN_SCALE,1 - Math.abs(position)); float vertMargin = viewPagerHight * (1 - scaleFactor) / 2; float horzMargin = viewPagerWidth * (1 - scaleFactor) / 2; if (position < 0){ view.setTranslationX(horzMargin - vertMargin / 2); }else { view.setTranslationX(-horzMargin + vertMargin / 2); } view.setScaleX(scaleFactor); view.setScaleY(scaleFactor); view.setAlpha(MIN_ALPHA + (scaleFactor - MIN_SCALE) / (1 - MIN_SCALE) * (1 - MIN_ALPHA)); } else { view.setAlpha(0); } } }