使用ViewPager实现屏幕滑动效果

时间:2023-03-09 17:59:26
使用ViewPager实现屏幕滑动效果
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);
}
}
}