相信看了我上一片文章或者对ViewPager有所了解的同学都知道,ViewPager显示页面切换除了要设置适配器之外,还要实现OnPageChangeListener接口
如果不做改变则是默认系统配置,在这里面,我们可以制作属于自己的页面切换动画效果
我这里给大家演示的是深入浅出的效果
首先,我们先来了解一下OnPageChangeListener接口的三个函数
@Override
public void onPageScrollStateChanged(int position) {
// TODO Auto-generated method stub
} //状态改变时调用,0表示什么都没有改变,1表示正在改变,2表示改变结束
@Override
public void onPageScrolled(int position, float offsetPercent, int offsetPixels) {
// TODO Auto-generated method stub
} //无论向右还是向左滑动position都是是指左边页面,如果没有该页面则指自身
//offsetPosition指页面偏移的百分比,向左滑动数值增加,从0增加到1,向右滑动数值减少,从1减少到0
//offsetPixels指页面偏移的像素值,和offsetPosition差不多,只不过是像素值表示
@Override
public void onPageSelected(int position) {
// TODO Auto-generated method stub
}
//该函数在页面切换完成时调用
我这里使用的是三个页面做切换,直接上代码:
@SuppressLint("NewApi")
public class PageChange implements OnPageChangeListener{
ArrayList<View> pageView = null; //传进来的ViewPager的列表
ViewPager view = null; //ViewPager
int downX = 0;
int offset = 0; //X轴偏移
//再构造函数里调用setOnTouchListener,取得X轴上的偏移,判断页面切换的方向
public PageChange(ArrayList<View> pageView, ViewPager view) {
super();
this.pageView = pageView;
this.view = view;
view.setOnTouchListener(new OnTouchListener() {
@Override
public boolean onTouch(View v, MotionEvent event) {
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
downX = (int) event.getX();
break;
case MotionEvent.ACTION_MOVE:
offset = (int) (event.getX() - downX);
break;
case MotionEvent.ACTION_UP:
downX = 0;
offset = 0;
break;
default:
break;
}
return false;
}
});
}
//页面切换状态的alpha值
@Override
public void onPageScrollStateChanged(int position) {
if (position == ViewPager.SCROLL_STATE_IDLE || position == ViewPager.SCROLL_STATE_SETTLING) {
pageView.get(position).setAlpha(1);
}
}
@Override
public void onPageScrolled(int position, float offsetPercent, int offsetPixels) {
//最左边的页面
if (position == 0) {
//左边数起第二个页面
if (offset > 0) {
if (offsetPercent > 0) {
pageView.get(position).setAlpha(offsetPercent);
pageView.get(position).setAlpha(1 - offsetPercent);
}else{
pageView.get(position).setAlpha(1);
}
}else {
pageView.get(position).setAlpha(1 - offsetPercent);
pageView.get(position + 1).setAlpha(offsetPercent);
}
//最右边的页面
}else if(position == pageView.size() - 1){
if (offset > 0) {
pageView.get(position).setAlpha(1 - offsetPercent);
pageView.get(position + 1).setAlpha(offsetPercent);
}else {
pageView.get(position).setAlpha(1);
}
//中间页面
}else{
if (offset > 0) {
pageView.get(position).setAlpha(1 - offsetPercent);
pageView.get(position + 1).setAlpha(offsetPercent);
Toast.makeText(DialogTestActivity.this, "offset:" + offset, Toast.LENGTH_SHORT).show();
}else {
if (offset == 0) {
pageView.get(position).setAlpha(1);
}else{
pageView.get(position).setAlpha(1 - offsetPercent);
pageView.get(position + 1).setAlpha(offsetPercent);
}
}
}
}
//切换完成后设置的alpha值
@Override
public void onPageSelected(int position) {
pageView.get(position).setAlpha(1);
for (int i = 0; i < pageView.size(); i++) {
pageView.get(position).setAlpha(1);
}
}
}
同学们是不是觉得上面实现切换的动画太复杂了,没关系,Google还提供了我们一个简便的方法PageTransformer来实现切换的动画
这里先介绍PageTransformer的相关参数
transformPage(View view, float position)
view指的是滑动的那个view,position表示的是当前滑动的一个状态
。
如果有5个切换页面
A B C D E
当前页面是B,没有滑动的状态B为0,C为1 A[-Infinity,-1) D[1, Infinity)
向左滑动时B的值变化0->-1,C的值变化1->0
向右滑动时B的值变化0->1,A的值变化-1->0
下面用PageTransformer来实现上面同一种效果
viewPager.setPageTransformer(true, new PageTransformer() {
@SuppressLint("NewApi")
@Override
public void transformPage(View viewPager, float position) {
if (position < -1) { // [-Infinity,-1)
viewPager.setAlpha(1); // This page is way off-screen to the left
//屏幕左边页面
}else if (position <= 0) { // [-1,0]
viewPager.setAlpha(1 - Math.abs(position)); // Use the default slide transition when
// moving to the left page
//正在滑动时的左边页面
}else if (position <= 1) { // (0,1]
viewPager.setAlpha(1 - position); // Fade the page out.
//正在滑动时的右边页面
}else { // (1,+Infinity]
// This page is way off-screen to the right.
viewPager.setAlpha(1); //屏幕右边页面
}
}
});
是不是感觉简单了多了呢...同学么可以自己去定义自己的动画效果了