本文章主要讲关于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即可。