android：引导页(viewpager)切换效果

本文章主要讲关于viewpager的切换效果，适用于app引导页：

实现效果图：

---

以上是demo的显示效果图。
这里的效果是使用Viewpager提供的一个接口（PageTransformer）实现的，在我们的viwpager有一个对外的方法来设置切换动画（viewpager.setPageTransformer(true, new Transformer())）。
通过这个接口我们可以实现自己定义的动画。

实现步骤：

• 第一步在布局文件中引用Viewpager控件

    <android.support.v4.view.ViewPager
            android:id="@+id/guid_viewpager"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="#fff"
        />

• 第二步定义自己的PageTransformer
  

  立体效果页面切换的PageTransformer

 public class CubeTransformer implements PageTransformer {
    @Override
    public void transformPage(View view, float position) {
        Log.i("result",
         "position="+position+" view.id="+view.getId());
        if (position <= 0) {
            //从右向左滑动为当前View
            //设置旋转中心点；
            ViewHelper.
               setPivotX(view, view.getMeasuredWidth());
            ViewHelper.
              setPivotY(view, view.getMeasuredHeight() * 0.5f);
            //只在Y轴做旋转操作
            ViewHelper.setRotationY(view,
                                        90f * position);
        } else if (position <=1) {
            //从左向右滑动为当前View
            ViewHelper.setPivotX(view, 0);
            ViewHelper.setPivotY(view, view.getMeasuredHeight() * 0.5f);
            ViewHelper.setRotationY(view, 90f * position);
        }
    }
}
这里的CubeTransformer实现PageTransformer的接口，然后在transformPage方法中操作，方法有两个参数，一个是VIEW(页面的视图)，第二个是position（这个是位置，当<0的时候向左滑动，>0时向右滑动）。

这里还有一个类ViewHelper：该类是一个第三方的动画支持库，因为在3.0以下的系统无法使用view的setRotationY等一些方法，所以使用这个动画库来完成。

页面淡入淡出的效果

private static float MIN_SCALE = 0.5f;
    @Override
    public void transformPage(View view, float position) {
        int pageWidth = view.getWidth();
        //当视图往左
        if (position < -1) { 
            ViewHelper.setAlpha(view, 0);
            ViewHelper.setTranslationX(view, 0);
        } else if (position <= 0) {
            //使用默认的幻灯片切换时，移动到左边
            ViewHelper.setAlpha(view, 1);
            ViewHelper.setTranslationX(view, 0);
            ViewHelper.setScaleX(view, 1);
            ViewHelper.setScaleY(view, 1);
        } else if (position <= 1) { 
            //滑出的页面
            ViewHelper.setAlpha(view, 1-position);
            //抵消默认的幻灯片过渡
            ViewHelper.setTranslationX(view, pageWidth * -position);
            float scaleFactor = MIN_SCALE + (1 - MIN_SCALE)
                    * (1 - Math.abs(position));
            ViewHelper.setScaleX(view, scaleFactor);
            ViewHelper.setScaleY(view, scaleFactor);
        } else { 
            //本页是屏幕右
            ViewHelper.setAlpha(view, 0);
            ViewHelper.setScaleX(view, 1);
            ViewHelper.setScaleY(view, 1);
        }
    }
    以上的代码是页面淡入淡出的效果，这里主要注意position的处理，其他的参数设置都是通过ViewHelper来设置进去。

页面折叠效果

  @Override
    public void transformPage(View view, float position) {
        if (position < -1) {
            ViewHelper.setPivotX(view, view.getMeasuredWidth() * 0.5f);
            ViewHelper.setPivotY(view, view.getMeasuredHeight() * 0.5f);
            ViewHelper.setScaleX(view, 1);
        } else if (position <= 0) {
            ViewHelper.setPivotX(view, view.getMeasuredWidth());
            ViewHelper.setPivotY(view, 0);
            ViewHelper.setScaleX(view, 1 + position);
        } else if (position <= 1) {
            ViewHelper.setPivotX(view, 0);
            ViewHelper.setPivotY(view, 0);
            ViewHelper.setScaleX(view, 1 - position);
        } else {
            ViewHelper.setPivotX(view, view.getMeasuredWidth() * 0.5f);
            ViewHelper.setPivotY(view, view.getMeasuredHeight() * 0.5f);
            ViewHelper.setScaleX(view, 1);
        }
    }

页面旋转效果

  @Override
    public void transformPage(View view, float position) {
        if (position < -1) {
        } else if (position <= 0) {
            ViewHelper.setScaleX(view, 1 + position);
            ViewHelper.setScaleY(view, 1 + position);
            ViewHelper.setRotation(view, 360 * position);
        } else if (position <= 1) {
            ViewHelper.setScaleX(view, 1 - position);
            ViewHelper.setScaleY(view, 1 - position);
            ViewHelper.setRotation(view, 360 * position);
        } else {
        }
    }

ps： 在非第一页与最后一页时，滑动到下一页，position为当前页位置；滑动到上一页：position为当前页-1。 第一页时：滑动到上一页position=0 ，其他基本为0 ；最后一页滑动到下一页 position为当前页位置，其他两个参数为0。 以上是4中效果的PageTransformer。

• 第三步，在activity中使用

protected void onCreate(Bundle savedInstanceState) {
 super.onCreate(savedInstanceState);
    guid_viewpager=(ViewPager)findViewById(R.id.guid_viewpager);
 getData(mData);
        mAdapter = new MyAdapter(mData);
        mAdapter.setItemClickLinsener(this);
        guid_viewpager.setOffscreenPageLimit(mData.size());
        guid_viewpager.setAdapter(mAdapter);
        guid_viewpager.setCurrentItem(0);
        guid_viewpager.setPageTransformer(true, new CubeTransformer());   
        }
    private void getData(List<ImageView> data) {
        data.clear();
        for (int i = 0; i < ids.length; i++) {
            ImageView image = new ImageView(this);
            //为了能够充满屏幕设置图片空间xy充满
            image.setScaleType(ScaleType.FIT_XY);
            image.setImageResource(ids[i]);
            data.add(image);
        }
    }

页面适配器
public class MyAdapter extends PagerAdapter{
List mList = null;
private OnViewpagerItemClickLinsener ItemClickLinsener;
public MyAdapter(List list) {
mList = list;
}
@Override
public int getCount() {
return mList.size();
}
@Override
public boolean isViewFromObject(View arg0, Object arg1) {
return arg0 == arg1;
}
@Override
public void destroyItem(ViewGroup container, int position, Object object) {
container.removeView((View)object);
}
@Override
public Object instantiateItem(ViewGroup container, int position) {
View view = mList.get(position);
view.setId(position);
view.setOnClickListener(new OnItemClickListener(position));
container.addView(view);
return view;
}
class OnItemClickListener implements OnClickListener{
private int postion;
public OnItemClickListener(int postion){
this.postion=postion;
}
@Override
public void onClick(View v) {
// TODO Auto-generated method stub
if(ItemClickLinsener!=null){
ItemClickLinsener.onItemClick(v, postion);
}
}
}
//定义供外面访问的接口，但切换到最后一个页面点击
public interface OnViewpagerItemClickLinsener{
void onItemClick(View v,int postion);
}
public OnViewpagerItemClickLinsener getItemClickLinsener() {
return ItemClickLinsener;
}
public void setItemClickLinsener(OnViewpagerItemClickLinsener itemClickLinsener) {
ItemClickLinsener = itemClickLinsener;
}
}
适配器主要是把页面添加到viewpager里面去，然后在适配器中写一个接口，监听页面的点击事件。
在activity中给viewpager设置adapter即可。