<p>轮播图在Android开发中是非常常见的控件，一般App的首页广告和电商类App的商品详情图片都会用轮播图来实现。可是Android源生的控件中却没有能直接拿来使用的轮播图控件，所以一般的轮播图效果都需要我们自己去实现。今天我就给大家介绍一个我自己写的轮播图控件： CustomBanner 。下面我将为大家详细介绍CustomBanner控件的实现思路和细节。</p>    <p>（说明：下面我贴出来的代码只是CustomBanner的代码摘要，想要看完整源码的同学请到GitHub下载或引用依赖）</p>    <p>1、布局轮播图一般由一个可以左右滚动、承载图片的主体控件和一个显示当前位置的指示器组成。CustomBanner的布局非常简单，直接继承FrameLayout，内部添加两个子View：一个ViewPager(可以左右滚动、承载图片的主体控件)和一个LinearLayout(指示器容器)。</p>    <pre>  <code class="language-java">public class CustomBanner<T> extends FrameLayout {        private ViewPager mBannerViewPager;      private LinearLayout mIndicatorLayout;        //添加轮播图ViewPager      private void addBannerViewPager(Context context) {          mBannerViewPager = new ViewPager(context);          this.addView(mBannerViewPager);      }        //添加轮播图指示器容器      private void addIndicatorLayout(Context context) {          mIndicatorLayout = new LinearLayout(context);          LayoutParams lp = new LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);          lp.gravity = analysisGravity(mIndicatorGravity);          lp.setMargins(0, 0, 0, DensityUtils.dp2px(context, 8));          mIndicatorLayout.setGravity(Gravity.CENTER);          this.addView(mIndicatorLayout, lp);      }  }</code></pre>    <p><strong>2、实现轮播图的无限循环</strong></p>    <p>轮播图是需要左右无限循环滚动的，而ViewPager是有滚动边界的。为了实现ViewPager循环滚动，我采用了网上一个很巧妙的实现方式。就是ViewPager的实际长度是它的应有长度+2，在ViewPager的应有长度的头尾各加一个节点。头节点的数据跟ViewPager的最后一个数据一样，尾节点的数据跟ViewPager的第一个数据一样。当ViewPager滚动到尾节点时，就无缝跳转到第一个数据，当ViewPager滚动到头节点时，就无缝跳转到最后一个数据，由于跳转的两节点的数据是一样的，而且是无缝跳转，没有过度动画，所以用户感觉不到ViewPager的显示节点已经改变，就给用户一种ViewPager在无限循环的错觉。具体请看这里。</p>    <p>由于多加了两个节点，所以在处理ViewPager的position时，实际的position和用户所看到的position是不一样的。比如：轮播图有5张图片，用户看到的也应该是5张图片，而实际上我们的ViewPager会有7张图片，因为第1张图片和第6张图片是同一张图片，第7张图片和第2张图片是同一张图片。这里可能很不好理解，但是一定要理解，因为这是实现轮播图循环轮播的关键。</p>    <pre>  <code class="language-java">//ViewPager的实际长度是他的数据的长度+2       @Override      public int getCount() {          return mDatas == null || mDatas.isEmpty() ? 0 : mDatas.size() + 2;      }</code></pre>    <pre>  <code class="language-java">//通过实际的position计算用户所理解的position  private int getActualPosition(int position) {          if (position == 0) {              //如果是头节点，返回最后一个数据的position              //因为头节点的数据和最后一个数据是一样的。              return mDatas.size() - 1;          } else if (position == getCount() - 1) {              //如果是尾节点，返回第一个数据的position              //因为尾节点的数据和第一个数据是一样的。              return 0;          } else {              //除了头尾以外，position节点的数据是mDatas中的第position - 1的下标的数据              return position - 1;          }      }</code></pre>    <p>3、设置ViewPager的滚动速度ViewPager有自己的mScroller属性，负责控制ViewPager的滚动速度。但是ViewPager的默认滚动速度太快了，而且ViewPager并没有提供方法设置mScroller的滚动速度也没有提供方法设置mScroller，所以我们需要通过反射用自己的mScroller替换掉ViewPager的mScroller，使我们可以完全控制和操作ViewPager的mScroller属性。这不仅仅是实现我们自定义ViewPager的滚动速度，也是实现第2步中ViewPager无缝跳转的关键。</p>    <pre>  <code class="language-java">//通过反射替换掉mBannerViewPager的mScroller属性      private void replaceViewPagerScroll() {          try {              Field field = ViewPager.class.getDeclaredField("mScroller");              field.setAccessible(true);              mScroller = new ViewPagerScroller(mContext,                      new AccelerateInterpolator());              field.set(mBannerViewPager, mScroller);          } catch (Exception e) {          }      }        /**       * 设置轮播图的滚动速度       *       * @param scrollDuration       */      public CustomBanner<T> setScrollDuration(int scrollDuration) {          mScroller.setScrollDuration(scrollDuration);          return this;      }</code></pre>    <pre>  <code class="language-java">public class ViewPagerScroller extends Scroller {        private int mScrollDuration = 550;      //是否无缝跳转      private boolean sudden;        public ViewPagerScroller(Context context) {          super(context);      }        public ViewPagerScroller(Context context, Interpolator interpolator) {          super(context, interpolator);      }        public ViewPagerScroller(Context context, Interpolator interpolator,                               boolean flywheel) {          super(context, interpolator, flywheel);      }        @Override      public void startScroll(int startX, int startY, int dx, int dy, int duration) {          super.startScroll(startX, startY, dx, dy, sudden ? 0 : mScrollDuration);      }        @Override      public void startScroll(int startX, int startY, int dx, int dy) {          super.startScroll(startX, startY, dx, dy, sudden ? 0 : mScrollDuration);      }        public int getScrollDuration() {          return mScrollDuration;      }        public void setScrollDuration(int scrollDuration) {          this.mScrollDuration = scrollDuration;      }        public boolean isSudden() {          return sudden;      }        public void setSudden(boolean zero) {          this.sudden = zero;      }  }</code></pre>    <p>4、实现ViewPager的自动轮播这个实现起来非常的简单。直接利用Handler延迟发送消息的功能来进行轮播滚动的计时，在消息的处理中改变ViewPager显示的Item，达到ViewPager的自动滚动效果，然后再Handler发送一个延迟消息，形成循环。</p>    <pre>  <code class="language-java">private Handler mTimeHandler = new Handler();      private Runnable mTurningTask = new Runnable() {          @Override          public void run() {              if (isTurning && mBannerViewPager != null) {                  int page = mBannerViewPager.getCurrentItem() + 1;                  mBannerViewPager.setCurrentItem(page);                  mTimeHandler.postDelayed(mTurningTask, mIntervalTime);              }          }      };        /**       * 启动轮播       * @param intervalTime 轮播间隔时间       * @return       */      public CustomBanner<T> startTurning(long intervalTime) {          isTurning = true;          mIntervalTime = intervalTime;          mTimeHandler.postDelayed(mTurningTask, mIntervalTime);          return this;      }</code></pre>    <p>5、添加和更新指示器指示器的指示点用指示器容器mIndicatorLayout来承载，当ViewPager滚动的时候，指示器也要相应的做更新</p>    <pre>  <code class="language-java">//根据轮播图的数量来添加指示器的点      //指示器的点用ImageView来表示，样式由使用者自定义      private void initIndicator(int count) {          mIndicatorLayout.removeAllViews();          if (count > 0) {              for (int i = 0; i < count; i++) {                  ImageView imageView = new ImageView(mContext);                  LinearLayout.LayoutParams lp = new LinearLayout.LayoutParams(                  ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);  0, DensityUtils.dp2px(mContext, 2), 0);                  mIndicatorLayout.addView(imageView, lp);              }          }      }        /**       * 更新指示器       */      private void updateIndicator() {          int count = mIndicatorLayout.getChildCount();          //获取ViewPager当前显示的Item。          int currentPage = getCurrentItem();          if (count > 0) {              for (int i = 0; i < count; i++) {                  ImageView view = (ImageView) mIndicatorLayout.getChildAt(i);                  if (i == currentPage) {                      //设置选中样式                      view.setImageResource(mIndicatorSelectRes);                  } else {                      //设置未选中样式                      view.setImageResource(mIndicatorUnSelectRes);                  }              }          }      }</code></pre>    <p>5、设置轮播图数据把轮播图的基本功能都实现了之后，接下来就是填充数据了。下面先看设置数据的方法：</p>    <pre>  <code class="language-java">/**       * 设置轮播图数据       * @param creator 创建和更新轮播图View的接口       * @param data   轮播图数据       * @return       */      public CustomBanner<T> setPages(ViewCreator<T> creator, List<T> data) {          mAdapter = new BannerPagerAdapter<T>(mContext, creator, data);          mBannerViewPager.setAdapter(mAdapter);          return this;      }</code></pre>    <p>代码非常的简单，其实就是给mBannerViewPager设置了一个Adapter。上面的setPages方法接收两个参数：</p>    <p>1、creator：这是一个ViewCreator对象，ViewCreator是负责创建和更新轮播图的接口。</p>    <p>2、data：这是轮播图的数据。</p>    <p>他们的泛型T是轮播图的数据类型，轮播图的数据类型可以是任何的类型。</p>    <p>下面是ViewCreator接口代码</p>    <pre>  <code class="language-java">/**       * 创建和更新轮播图View的接口       * @param <T>       */      public interface ViewCreator<T> {          //创建轮播图的每个项的View          View createView(Context context, int position);          //更新轮播图          void updateUI(Context context, View view, int position, T data);      }</code></pre>    <p>createView方法的返回值是View而不是ImageView，所以CustomBanner可以支持轮播所有的布局，而不仅仅是ImageView，虽然我们大部分情况使用的都是ImageView。</p>    <p>如果你现在还不清楚ViewCreator是干什么的，那么请看下面的代码。下面是轮播图适配器BannerPagerAdapter的核心代码，通过这段代码，你应该就能很清晰的理解ViewCreator的作用了。</p>    <pre>  <code class="language-java">@Override      public Object instantiateItem(ViewGroup container, final int position) {            View view = views.get(position);            if (view == null) {              //mCreator就是调用者传入的ViewCreator对象              //通过mCreator创建轮播图的布局，所以轮播图的布局是由调用者创建的              view = mCreator.createView(mContext, position);              views.put(position, view);          }            final int item = getActualPosition(position);          final T t = mData.get(item);            //通过mCreator把更新轮播图数据的操作交给调用者去实现          mCreator.updateUI(mContext, view, item, t);          container.addView(view);          return view;      }</code></pre>    <p>CustomBanner的实现思路和代码分析到这里就结束了。相信现在大家对于轮播图的实现已经有了一定的了解了。至于CustomBanner的使用，我将在下一章具体讲解，欢迎阅读。下面先给大家看一下CustomBanner的效果：</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/ed2064f24dcdca43fe5bebc5b2b8ceda.gif"></p>    <p> </p>    <p>来自：http://blog.csdn.net/u010177022/article/details/61931488</p>    <p> </p>