android图片轮播效果，开源框架RollViewPager的简单使用

学习Android自定义控件 之 轮播图（ViewPager）重点及学习 - - CSDN博客 http://blog.csdn.net/ITermeng/article/details/52170637，十分有用！！！

主要支持的一些功能：
支持无限循环。 触摸时会暂停播放，直到结束触摸一个延迟周期以后继续播放。参考他们的之后发现一个问题：刚开始轮播时，第一个的标题不显示，于是自己进行了代码修改，添加了点击图片的响应事件，整理了一些代码，图片缓存使用的是Glide。

1.添加权限：

 //权限:网络请求、外部存储
    <uses-permission android:name="android.permission.INTERNET" />
    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />

2.添加Glide依赖

/*图片缓存,添加依赖Glide*/
    compile 'com.github.bumptech.glide:glide:3.7.0'

3.自定义LoopPictureView的xml布局：

<?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="wrap_content">

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

    <TextView
        android:id="@+id/tv_title"
        android:textSize="20sp"
        android:textColor="@android:color/white"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentBottom="true"
        android:padding="20dp"/>

    <LinearLayout
        android:id="@+id/ll_dot"
        android:orientation="horizontal"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_alignParentBottom="true"
        android:padding="8dp"/>

</RelativeLayout>

3.自定义LoopPictureView extends FrameLayout ：

public class LoopPictureView extends FrameLayout {
    private Context context;
    private String[] imageTitle; //展示图片的标题
    private List<ImageView> images = new ArrayList<ImageView>();//展示的图片控件的数组
    private List<ImageView> imagesDots = new ArrayList<ImageView>();//展示图片位置的小圆点控件的数组
    private static int DELAYTIME = 3000; //轮播图延迟换图的时间

    private boolean isAutoPlay = true ;//轮播图自动播放
    private int currentItem = 4;//当前显示的图片位序（从1开始算,所以从数组取对应数据时要减一）
    public Handler handler = new Handler();
    private ViewPager viewPager;
    private int imageLength ;//有多少张图片
    private LinearLayout dotLayout;
    private TextView titleTV;
    private boolean hasTitle;//是否有标题

    public LoopPictureView(Context context) {
        this(context, null);
    }

    public LoopPictureView(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public LoopPictureView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        this.context = context;
    }

    /**
     * 提供接口：
     * 使用轮播器时设置图片(图片id)、是否有标题、是否自动播放、最开始选中的图片位序（从1 开始算,所以从数组取对应数据时要减一）
     */
    public void setImageRes(int[] imagesRes, boolean hasTitle, Boolean isAutoPlay, int index){
        this.hasTitle = hasTitle;
        this.isAutoPlay = isAutoPlay;
        this.currentItem = index;
        initView();//初始化控件
        initImgFromRes(imagesRes);//根据图片个数生成imageview控件
        startLoopPicture();
    }

    /**
     * 提供接口：
     * 使用轮播器时设置图片(图片URl)、是否有标题、是否自动播放、最开始选中的图片位序（从1 开始算,所以从数组取对应数据时要减一）
     */
    public void setImageUrl(String[] imageUrl, boolean hasTitle, Boolean isAutoPlay, int index){
        this.hasTitle = hasTitle;
        this.isAutoPlay = isAutoPlay;
        this.currentItem = index;
        initView();
        initImgFromUrl(imageUrl);
        startLoopPicture();
    }

    /**
     * 提供接口：
     * 使用轮播器时设置图片的标题
     */
    public void setImageTitle(String[] imageTitle){
        this.imageTitle = imageTitle;
        titleTV.setText( imageTitle[ currentItem - 1 ]);
    }

    /**
     * 初始化轮播器布局
     */
    private void initView() {
        images.clear();//在最开始时，清除存储图片的数组里的数据
        View view = LayoutInflater.from(context).inflate(R.layout.loop_pictures, this, true);
        viewPager = (ViewPager)view.findViewById(R.id.vp);
        dotLayout = (LinearLayout) view.findViewById(R.id.ll_dot);
        titleTV = (TextView) view.findViewById(R.id.tv_title);
        dotLayout.removeAllViews();//在最开始时，清除dotLayout里的所有控件
    }



    /**
     * 初始化轮播器的图片(图片URL)
     */
    private void initImgFromUrl(String[] imageUrl) {
        imageLength = imageUrl.length;
        for(int i = 0;i<imageLength;i++){
            ImageView dotView = new ImageView(context);
            LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(
                    LinearLayout.LayoutParams.WRAP_CONTENT,
                    LinearLayout.LayoutParams.WRAP_CONTENT);
            params.leftMargin = 5;
            params.rightMargin = 5;
            dotView.setImageResource(R.drawable.dot_blur);
            dotLayout.addView(dotView, params);
            imagesDots.add(dotView);
        }

        //设置第 currentItem 张轮播图的小圆点为选中状态
        imagesDots.get( currentItem - 1 ).setImageResource(R.drawable.dot_focus);

        //Glide加载图片缓存
        for(int i = 0; i <= imageLength + 1; i++){
            ImageView imageView = new ImageView(context);
            imageView.setScaleType(ImageView.ScaleType.FIT_XY);
            imageView.setBackgroundResource(R.drawable.loading);
            if(i == 0){
                Glide.with(this.context).load( imageUrl[imageLength - 1] ).into( imageView );
            } else if(i == imageLength + 1){
                Glide.with(this.context).load( imageUrl[0] ).into( imageView );
            } else {
                Glide.with(this.context).load( imageUrl[i - 1] ).into( imageView );
            }
            images.add(imageView);

            //图片的点击事件
            imageView.setOnClickListener(new OnClickListener() {
                @Override
                public void onClick(View view) {
                    System.out.println("00000000000" + imageTitle[ currentItem - 1 ]);
                }
            });
        }
    }

    /**
     * 初始化轮播器的图片(图片id)
     */
    private void initImgFromRes(int[] imagesRes) {
        imageLength = imagesRes.length;

        for(int i = 0; i < imageLength; i++){
            ImageView dotView = new ImageView(context);
            LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(
                    LinearLayout.LayoutParams.WRAP_CONTENT,
                    LinearLayout.LayoutParams.WRAP_CONTENT);
            params.leftMargin = 5;
            params.rightMargin = 5;
            dotView.setImageResource(R.drawable.dot_blur);
            dotLayout.addView(dotView, params);
            imagesDots.add(dotView);
        }

        //设置第 currentItem 张轮播图的小圆点为选中状态
        imagesDots.get( currentItem - 1 ).setImageResource(R.drawable.dot_focus);

        for(int i = 0;i<= imageLength+1 ; i++){
            ImageView imageView = new ImageView(context);
            imageView.setScaleType(ImageView.ScaleType.FIT_XY);
            imageView.setBackgroundResource(R.drawable.loading);
            if(i == 0){
                imageView.setImageResource(imagesRes[imageLength - 1]);
            } else if (i == imageLength + 1){
                imageView.setImageResource(imagesRes[0]);
            } else {
                imageView.setImageResource(imagesRes[i - 1]);
            }
            images.add(imageView);

            //图片的点击事件
            imageView.setOnClickListener(new OnClickListener() {
                @Override
                public void onClick(View view) {
                    System.out.println("00000000000" + imageTitle[ currentItem - 1 ]);
                }
            });
        }
    }

    /**
     * 设置ViewPager,开启轮播器
     */
    private void startLoopPicture(){
        viewPager.setAdapter(new LoopPicturesAdapter());
        viewPager.setFocusable(true);
        viewPager.setCurrentItem( currentItem );
        viewPager.addOnPageChangeListener(new LoopPicturesListener());

        //开启轮播器
        handler.postDelayed(task, DELAYTIME);
    }


    private final Runnable task = new Runnable() {
        @Override
        public void run() {
            if (isAutoPlay) {
                currentItem = currentItem % (imageLength + 1) + 1;
                if (currentItem == 1) {
                    viewPager.setCurrentItem(currentItem, false);
                    handler.post(task);
                } else {
                    viewPager.setCurrentItem(currentItem);
                    handler.postDelayed(task, DELAYTIME);
                }
            } else {
                handler.postDelayed(task, DELAYTIME);
            }
        }
    };


    class LoopPicturesAdapter extends PagerAdapter {

        @Override
        public int getCount() {
            return images.size();
        }

        @Override
        public boolean isViewFromObject(View view, Object object) {
            return view == object;
        }

        @Override
        public Object instantiateItem(ViewGroup container, int position) {
            View view = images.get(position);
            container.addView(view);
            return view;
        }

        @Override
        public void destroyItem(ViewGroup container, int position, Object object) {
            container.removeView((View)object);
        }
    }

    class LoopPicturesListener implements ViewPager.OnPageChangeListener {

        @Override
        public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

        }

        @Override
        public void onPageSelected(int position) {
            for(int i = 0; i<imagesDots.size();i++){
                if(i == position - 1){
                    imagesDots.get(i).setImageResource(R.drawable.dot_focus);
                    if(hasTitle) {
                        titleTV.setText(imageTitle[i]);
                    }
                } else {
                    imagesDots.get(i).setImageResource(R.drawable.dot_blur);
                }
            }

        }

        @Override
        public void onPageScrollStateChanged(int state) {
            switch (state){
                case 1:
                    isAutoPlay = false;
                    break;
                case 2:
                    isAutoPlay = true;
                    break;
                case 0:
                    if (viewPager.getCurrentItem() == 0) {
                        viewPager.setCurrentItem(imageLength, false);
                    } else if (viewPager.getCurrentItem() == imageLength + 1) {
                        viewPager.setCurrentItem(1, false);
                    }
                    currentItem = viewPager.getCurrentItem();
                    isAutoPlay = true;
                    break;
            }

        }
    }
}

4.main的xml布局中使用此控件：

<com.lotus.looppicturesdemo.LoopPictureView
                android:id="@+id/loopPicture"
                android:layout_width="match_parent"
                android:layout_height="250dp"/>

5.mainactivity中直接使用：

 LoopPictureView loopPicture;

 loopPicture = (LoopPictureView) this.findViewById(R.id.loopPicture);

        String[] imagesRes = new String[]{
                "http://pic.sc.chinaz.com/files/pic/pic9/201604/apic20400.jpg",
                "http://pics.sc.chinaz.com/files/pic/pic9/201602/apic19022.jpg",
                "http://pics.sc.chinaz.com/files/pic/pic9/201603/fpic430.jpg",
                "http://pics.sc.chinaz.com/files/pic/pic9/201605/apic20631.jpg"};
        //设置图片(图片url)、是否有标题、是否自动播放、最开始选中的图片位序（从1 开始算,所以从数组取对应数据时要减一）
        loopPicture.setImageUrl(imagesRes, true, true, 3);

//        int[] imagesRes = {R.drawable.img1, R.drawable.img2, R.drawable.img3,
//                R.drawable.img4};
//
//        //设置图片(图片id)、是否有标题、是否自动播放、最开始选中的图片位序（从1 开始算,所以从数组取对应数据时要减一）
//        loopPicture.setImageRes(imagesRes, true, true, 3);

        String[] titles = {"111111111111111111", "2222222222222222",
                "3333333333333", "4444444444444"};
        loopPicture.setImageTitle(titles);//设置图片标题(图片与标题必须一一对应)