ViewPager详解（二）广告轮播图

关注

转载最新推荐文章于 2026-10-26 19:48:31 发布 712 阅读 AI 写同款· GEO 优化 ›

Android中ViewPager支持一屏多个View、切换动画以及无限滚动 1. 首先看一下最终的效果图2. 需求拆解第一眼看见上面的效果，是不是有些朋友觉得这个效果很酷，有的高手会觉得这个效果很简单。笔者昨天刚拿到需求的时候，最开始也是觉得这个很简单，可是越分析越发现好像实现出来并不是那么容易。单个的效果可能很简单，但是这么多的效果叠在一起，可能就比较复杂了。我简单得将这个效果任务拆解一下：一屏要展示3个View，支持左右滑动屏幕中间两侧的View移向中间时，会有一个阅读详情

http://www.jianshu.com/p/48f63c537ae5

http://www.jianshu.com/p/d411d687f46d

显示的效果请往下看，先说一下需求，可以自动轮播，按下停止轮播，松手开始轮播，不可见时停止轮播，自动轮播时带动画，手动滑动时不带动画，点击时要有水波纹效果，下拉刷新回到第一页，页面不能卡顿等等。参考了一些网上的想法，结合自己的认知，总结如下。

先上效果图

自定义BannerView控件

为了以后开发的方便，这里将Banner封装成一个控件来使用，以后就可以直接在布局里引用。

做这种轮播效果一般采用的都是ViewPager，所以这个控件也是对ViewPager的封装，为了解耦，这里没有把适配器放在BannerView，只是提供了基类适配器和接口，使用很方便。

讲一下具体如何实现封装：
第一步：自定义控件，实现构造，初始化属性和视图。

基于需求，先定义了页面边距，主页面占比，缩放比例，轮播时长，是否动画轮播等等属性，通过引用attrs的方式，在布局里赋值，并且提供set方法在代码里设置。

   private void initAttrs(Context context, AttributeSet attrs) {
        TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.BannerView);
        pageMargin = (int) a.getDimension(R.styleable.BannerView_bannerPageMargin, pageMargin);
        pagePercent = a.getFloat(R.styleable.BannerView_bannerPagePercent, pagePercent);
        scaleMin = a.getFloat(R.styleable.BannerView_bannerPageScale, scaleMin);
        alphaMin = a.getFloat(R.styleable.BannerView_bannerPageAlpha, alphaMin);
        ...
        a.recycle();
    }

定义了基本属性后，将ViewPager视图填充到控件容器里，ViewPager布局里需要使用clipChildren属性来控制系统绘制View的范围，在ViewPager和它的父容器里都设置clipChildren=false。这样指定了主页面占比后，左右两边的Page就会进行绘制。

  private void initView() {
      mRootView = LayoutInflater.from(getContext()).inflate(R.layout.banner_view, this);
      mViewPager = (ViewPager) mRootView.findViewById(R.id.viewPager);
      LayoutParams params = (LayoutParams) mViewPager.getLayoutParams();
      params.width = (int) (getScreenWidth() * pagePercent);
      params.gravity = Gravity.CENTER;
      mViewPager.setLayoutParams(params);
      mViewPager.setPageMargin(pageMargin);
      mViewPager.setPageTransformer(false, new BannerPageTransformer());
      mViewPager.setOffscreenPageLimit(5);
      // 自动轮播任务
      mScrollTask = new AutoScrollTask();
      // 如果动画轮播
      if (isAnimScroll) {
          setAnimationScroll((int) mAnimDuration);
      }
  }

第二步：滑动动画实现

众所周知，谷歌已经提供了ViewPager的滑动动画设置接口setPageTransformer()，并且他自己也实现了三种基本的滑动滑动。需要自定义动画时只需实现ViewPager.PageTransformer接口，并实现transformPage()方法。

设计稿中的动画要求是，滑动时左侧缩小，主页随着滑动百分比缩小，右侧随着滑动百分比放大。transformPage方法中提供了主页所在的position=0.0，左侧位置百分比position<0，右侧位置百分比position>0，通过这个position可以动态计算出各个页面的缩放比。

  public void transformPage(View page, float position) {
     // 不同位置的缩放和透明度
     float scale = (position < 0)
              ? ((1 - scaleMin) * position + 1)
              : ((scaleMin - 1) * position + 1);
     float alpha = (position < 0)
              ? ((1 - alphaMin) * position + 1)
              : ((alphaMin - 1) * position + 1);
     // 保持左右两边的图片位置中心
     if (position < 0) {
          ViewCompat.setPivotX(page, page.getWidth());
          ViewCompat.setPivotY(page, page.getHeight() / 2);
      } else {
          ViewCompat.setPivotX(page, 0);
          ViewCompat.setPivotY(page, page.getHeight() / 2);
      }
      Log.d(TAG, "transformPage: scale=" + scale);
      ViewCompat.setScaleX(page, scale);
      ViewCompat.setScaleY(page, scale);
      ViewCompat.setAlpha(page, Math.abs(alpha));
  }

第三步：无限自动轮播和轮播动画处理

无限轮播可用线程池，定时器，Handler等等实现，这里采用最简单的Handler实现。首先自定义一个轮播任务，实现Runnable接口，在run方法里使用Handler发送延时消息来不停轮播，并且提供start方法和stop方法开启和停止轮播。在初始化视图完毕时，开启轮播。
```
 @Override
  protected void onAttachedToWindow() {
      super.onAttachedToWindow();
      // 视图初始化完毕，开始轮播任务
      if (mScrollTask == null) mScrollTask = new AutoScrollTask();
      if (isAutoScroll) startAutoScroll();
  }
```

ViewPager滑动是没有延时的，谷歌也没有提供具体的接口去实现延时滑动。所以这里使用反射去重新设置ViewPager的滑动世间。自动轮播时，需求动画延时滑动，但是手动滑动时需要原生的滑动，所以根据使用时间差和滑动时间来控制自动和手动滑动。

public void startScroll(int startX, int startY, int dx,
                                      int dy, int duration) {
    // 如果手动滚动,则加速滚动
       // TODO 使用这种设置极不稳定，需要抽离
       if (System.currentTimeMillis() - mRecentTouchTime > mScrollDuration && isAnimScroll) {
           // 动画滑动
           duration = during;
       } else {
           // 手势滚动
           duration /= 2;

       }
       super.startScroll(startX, startY, dx, dy, duration);
   }

BannerView的基类适配器封装

BannerView封装的是ViewPager，所以基类适配器BannerBaseAdapter封装的也是PagerAdapter，由于适配器涉及到数据和视图，所以基类里将所有都封装好，只留数据和视图留给子类去实现。除此之外，页面的点击，按下和抬起也在适配器实现并通过接口暴露出来。

实现父类适配后，只需要指定数据类型和实现展示视图转换数据的方法，加载完数据之后，通过setData方法来重新更新数据即可。

private class BannerAdapter extends BannerBaseAdapter<BannerBean> {
      public BannerAdapter(Context context) {
          super(context);
      }
      @Override
      protected int getLayoutResID() {
          return R.layout.item_banner;
      }
      @Override
      protected void convert(View convertView, BannerBean data) {
          setImage(R.id.pageImage, data.imageRes);
          setText(R.id.pageText, data.title);
      }
}

使用教程

拷贝BannerView全路径到布局里，使用attrs指定属性

<com.pinger.widget.banner.BannerView
    android:id="@+id/bannerView"
    android:layout_width="match_parent"
    android:layout_height="200dp"
    app:bannerPageAlpha="1.0"
    app:bannerPageMargin="8dp"
    app:bannerPagePercent="0.8"
    app:bannerPageScale="0.8"
    app:bannerAnimScroll="true"
    app:bannerAutoScroll="true"
    app:bannerScrollDuration="4000"
    app:bannerAnimDuration="1500"/>

在代码中设置适配器和设置页面的触摸监听，初始化数据之后，更新数据

  final BannerView bannerView = (BannerView) findViewById(R.id.bannerView);
  bannerView.setAdapter(mAdapter = new BannerAdapter(this));
  initData();  // 初始化数据
  mAdapter.setData(mDatas);
  mAdapter.setOnPageTouchListener(...);

Demo下载地址