基于ViewPager封装轮播图控件

本文重点介绍了ViewPager实现轮播，左右无限滑动，以及定时任务，在以后的项目中进行快速开发，避免了写很多繁琐的代码，使得维护起来更便利。

依赖：compile 'com.alley:ADViewPager:1.6.5'

效果图：

screen.gif

一.设置自定义布局，ViewPager用来放轮播图，LinearLayout用来放指示器

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.v4.view.ViewPager
        android:id="@+id/viewPager_ad"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

    <LinearLayout android:id="@+id/ll_dot"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:orientation="horizontal">

    </LinearLayout>
</RelativeLayout>

二.当存在轮播图的时候初始化布局

if (imageUrls == null || imageUrls.length == 0) {
    return;
}
LayoutInflater.from(context).inflate(R.layout.view_ad_pager, this, true);
dotLayout = (LinearLayout) findViewById(R.id.ll_dot);
viewPager = (ViewPager) findViewById(R.id.viewPager_ad);
dotLayout.removeAllViews();//防止重复添加指示器

三.根据轮播图的多少初始化ImageView，同时从网络加载图片资源，这里采用的是Glide框架，当然你也可以换成其他图片请求框架。

for (int i = 0; i < imageUrls.size(); i++) {
    ImageView pageView = new ImageView(context);
    allPage[i] = pageView;
    pageView.setTag(R.id.AD_ImageView, i);
    pageView.setScaleType(ImageView.ScaleType.FIT_XY);
    adImageLoader.displayImage(context, imageUrls.get(i), pageView, ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT);
    pageView.setOnClickListener(this);
}

四.当轮播图大于1张，且设置了显示指示器时绘制指示器

private void drawPageIndicator() {
    if (imageUrls.size() <= 1) {
        return;
    }
    for (int i = 0; i < imageUrls.size(); i++) {
        ImageView dotView = new ImageView(context);
        LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
        params.leftMargin = dotMargin;
        params.rightMargin = dotMargin;
        dotView.setBackgroundResource(indicatorDrawableUnchecked);
        dotLayout.addView(dotView, params);
    }
    dotLayout.setGravity(pageIndicatorGravity);
    dotLayout.setPadding(distance[0], distance[1], distance[2], distance[3]);
    dotLayout.setBackgroundColor(indicatorBackground);
    dotLayout.getChildAt(0).setBackgroundResource(indicatorDrawableChecked);
}

接下来设置ViewPager的事件监听，当手动滑到第一张时还在滑动，就滑到最后一张。当滑到最后一张时还在滑动，就滑到第一张。

private class ADViewPagerChangeListener implements ViewPager.OnPageChangeListener {
 private boolean isScrolled;

 @Override
 public void onPageScrollStateChanged(int arg0) {
     switch (arg0) {
         case 1:// 手势滑动
             isScrolled = false;
             break;
         case 2:// 界面切换
             isScrolled = true;
             break;
         case 0:// 滑动结束
             if (viewPager.getCurrentItem() == viewPager.getAdapter().getCount() - 1 && !isScrolled) {// 当前为最后一张，此时从右向左滑，则切换到第一张
                 viewPager.setCurrentItem(0);
             } else if (viewPager.getCurrentItem() == 0 && !isScrolled) {// 当前为第一张，此时从左向右滑，则切换到最后一张
                 viewPager.setCurrentItem(viewPager.getAdapter().getCount() - 1);
             }
             break;
     }
 }

 @Override
 public void onPageScrolled(int arg0, float arg1, int arg2) {}

 @Override
 public void onPageSelected(int arg0) {
     setCurrentDot(arg0);
 }
}

五.具体应用
1.在布局文件中加入ADViewPager

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.github.phoenix.activitiy.MainActivity">

    <com.alley.ad.widget.ADViewPager
        android:id="@+id/viewPager_main_ad"
        android:layout_width="match_parent"
        android:layout_alignParentTop="true"
        android:layout_height="180dp"/>

</RelativeLayout>

2.待轮播图路径请求成功时，根据需求在代码中设置参数

adViewPager.setIndicatorDrawableChecked(R.mipmap.img_banner_dot_focused) //当前指示点
        .setIndicatorDrawableUnchecked(R.mipmap.img_banner_dot_normal) //非当前指示点
        .setAutoPlay(true) //是否开启自动轮播
        .setDotMargin(0)  //指示器小点之间的距离
        .setPageTransformer(new ZoomOutPageTransformer()) //页面滑动动画
        .setIndicatorEnable(true) //是否显示指示器
        .setIndicatorGravity(Gravity.CENTER) //指示器位置
        .setIndicatorBackground(Color.TRANSPARENT) //指示器背景色
        .setIndicatorPadding(0, 0, 0, 24)
        .setBannerUrl(imageUrl) //图片路径
        .setBannerHref(imageHref) //点击图片跳转的路径
        .setADLoader(new ImageLoader()) // 图片加载配置
        .startPlay(3 * 1000);

adViewPager.addADViewPagerListener(new ADViewPager.OnCurrentPageListener() {
    @Override
    public void onPageSelected(int position) {
        //每次轮播时被调用的方法
    }

    @Override
    public void onClickPage(@NonNull List<String> imageUrl, @Nullable List<String> imageHref, int position) {
        //点击图片师被调用的方法
        Toast.makeText(MainActivity.this, imageUrl.get(position), Toast.LENGTH_LONG).show();
    }
});

当没有轮播图时，只需设置ADViewPager的背景图即可，此时界面上看到的就只有这张背景图。

<com.alley.ad.widget.ADViewPager
        android:id="@+id/viewPager_main_ad"
        android:layout_width="match_parent"
        android:layout_alignParentTop="true"
        android:background="@mipmap/ic_launcher"
        android:layout_height="180dp"/>

只有设置了开启自动轮播，且轮播图数量大于1的时候才会初始化定时器和绘制轮播指示器；在 onDetachedFromWindow时关闭了定时器，移除了Handler；页面可见是重启轮播，页面不可见时关闭轮播。

@Override
protected void onResume() {
    super.onResume();
    if (adViewPager.getViewPager() != null) {
         adViewPager.restartPlay();
    }
}

@Override
protected void onPause() {
    super.onPause();
    adViewPager.stopPlay();
}

源码：https://github.com/GitPhoenix/ADViewPager