今天好好研究了一下ViewPager相关的知识点，涉及到了ViewPager中显示多视图、无限滚动循环、及滑动切换特效，下面来各个击破，首先展示下效果图，如下所示：
NiceViewPagerV1
显示多视图
首先来看下布局文件，如下所示：
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/fl"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="@dimen/activity_vertical_margin"
android:clipChildren="false"
tools:context="com.blankj.vpdemo.MainActivity">
<android.support.v4.view.ViewPager
android:id="@+id/vp"
android:layout_width="120dp"
android:layout_height="120dp"
android:layout_gravity="center">
</android.support.v4.view.ViewPager>
</FrameLayout>
需要注意的是FrameLayout中的android:clipChildren="false"这个属性，它的意思是子布局超出约束范围的部分也能显示出来，举个栗子吧，一张50 x 50的图片在30 x 30的父布局下，正常情况下该属性默认值为true，所以只能显示30 x 30的范围，但如果父布局设置该属性为false的话，那么这张图就能完整地显示50 x 50的大小，现在理解了吧，所以本来显示当前页的ViewPager现在也就露出了真是的面目，咻~
无限滚动循环
所谓无限滚动循环道理很简单，下面说下原理，以数组为例吧，假设要显示的数据为{0, 1, 2, 3, 4}，那么我们把最后一个元素4复制一个到首位，把首位的0复制一个到末尾，结果为{4, 0, 1, 2, 3, 4, 0}，那样在0的时候我们就能看到所谓最后一个的4了，在显示最后的4的时候就能看到所谓第一个0了，下面是重头戏，当我们滑到第一个4的时候，我们要进行跳转到最后一个4，这样就完成了循环，当然我们在跳转的时候是不需要smoothScroll，不然会有很明显的后滚迹象，影响体验，但由于不是smoothScrool，所以会有点突兀，这点用这样实现无限滚动循环的方式暂时是无法解决。上一下核心的代码吧。
mViews = new ArrayList<>();
ImageView iv;
// 插入最后一张
iv = new ImageView(this);
iv.setBackgroundResource(ids[ids.length - 1]);
mViews.add(iv);
for (int id : ids) {
iv = new ImageView(this);
iv.setBackgroundResource(id);
mViews.add(iv);
}
// 插入第一张
iv = new ImageView(this);
iv.setBackgroundResource(ids[0]);
mViews.add(iv);
VpAdapter adapter = new VpAdapter();
vp.setAdapter(adapter);
// 当前页前后缓存页为3即可，即缓存当前项的前三页和后三页效果比较好
vp.setOffscreenPageLimit(3);
vp.setCurrentItem(1);
vp.setPageTransformer(true, new CustomPageTransformer());
vp.addOnPageChangeListener(this);
vp.setPageMargin(40);
fl = (FrameLayout) findViewById(R.id.fl);
// 父控件把事件分发交给viewPager处理
findViewById(R.id.fl).setOnTouchListener(new View.OnTouchListener() {
@Override
public boolean onTouch(View v, MotionEvent event) {
return vp.dispatchTouchEvent(event);
}
});
@Override
public void onPageSelected(int position) {
Log.d("cmj", "onPageSelectedPos: " + position);
if (mViews.size() > 3) {
if (position <= 0) {
// 当滑动到第一张的时候，让它跳转到倒数第二张，false为关闭smoothScroll
vp.setCurrentItem(mViews.size() - 2, false);
} else if (position >= mViews.size() - 1) {
// 当滑动到最后一张的时候，让它跳转到第二张，，false为关闭smoothScroll
vp.setCurrentItem(1, false);
}
}
fl.invalidate();
}
滑动切换特效
ViewPager的滑动特效依赖的是PageTransformer，自定义一个CustomPageTransformer继承自PageTransformer，我们重写transformPage(View view, float position)函数，其中view就是ViewPager中的一个个视图，position参数就是view的位置，根据源码我们可以了解到position < -1时，view处于整个ViewPager左边的外界，[-1, 0)是处于ViewPager的可见区的左侧，0就是当前正中间的位置，同理(0, 1]和大于1我就不啰嗦了。根据position的值我们可以做很多动画相关的特效，下面是我用到的，当然你们可以修改为更炫酷的，万变不离position，献上code如下。
import android.graphics.ColorMatrixColorFilter;
import android.support.v4.view.ViewPager;
import android.view.View;
/**
* <pre>
* author: Blankj
* blog : http://blankj.com
* time : 2016/10/26
* desc : ViewPager切换特效
* </pre>
*/
public class CustomPageTransformer implements ViewPager.PageTransformer {
private static final float MIN_SCALE = 0.80f;
private static final float MIN_ALPHA = 0.5f;
private static final float MAX_DARKNESS = -180f;
private static final float MAX_ROTATE = 18f;
@Override
public void transformPage(View view, float position) {
view.setPivotX(view.getWidth() / 2);
view.setPivotY(view.getHeight() / 2);
if (position < -1 || position > 1) {// 超出屏幕的部分，-1屏幕左端超出部分，1为右端
// 设置亮度
float[] brightnessArray = new float[]{
1, 0, 0, 0, MAX_DARKNESS,
0, 1, 0, 0, MAX_DARKNESS,
0, 0, 1, 0, MAX_DARKNESS,
0, 0, 0, 1, 0
};
view.getBackground().setColorFilter(new ColorMatrixColorFilter(brightnessArray));
// 设置缩放
view.setScaleX(MIN_SCALE);
view.setScaleY(MIN_SCALE);
// 设置透明度
view.setAlpha(MIN_ALPHA);
// 设置旋转
// view.setRotationY((position < -1 ? 1 : -1) * MAX_ROTATE);
} else if (position <= 1) {// 屏幕内部
// 设置亮度
float brightnessFactor = MAX_DARKNESS * (Math.abs(position)) + 1;
float[] brightnessArray = new float[]{
1, 0, 0, 0, brightnessFactor,
0, 1, 0, 0, brightnessFactor,
0, 0, 1, 0, brightnessFactor,
0, 0, 0, 1, 0
};
view.getBackground().setColorFilter(new ColorMatrixColorFilter(brightnessArray));
// 设置缩放
view.setScaleX(1 - (1 - MIN_SCALE) * Math.abs(position));
view.setScaleY(1 - (1 - MIN_SCALE) * Math.abs(position));
// 设置透明度
view.setAlpha(1 - (1 - MIN_ALPHA) * Math.abs(position));
// 设置旋转
// view.setRotationY(-position * MAX_ROTATE);
}
}
}
源码已上传github，献出链接NiceViewPager，喜欢记得star哦。滴，下车卡~
网友评论