安卓轮播图实现

综述

    相信大家对轮播图已经不陌生了，其实就是一个自动翻页的ViewPager，网上也有好多写的非常好博客，这篇只是我的学习记录，证明我也学过（吼吼），并不是效仿抄袭。

功能

• 自动无限播放
• 手指拖动时停止自动播放
• 圆点标记颜色变化
• 添加点击事件

开始

自动无限播放

先说说无限播放可以用的方案，方案有两种：

• 一种是让PagerAdapter的getCount方法返回一个足够大的数值，这样就能一直播放下去。比如返回Integer.MAX_VALUE。

• 另一种是在你的要现实的页面集合前后各加一个页面，在最前面加上最后要显示的页面，最后添加第一个页面，然后再ViewPager.OnPageChangeListener接口里面监听onPageScrollStateChanged方法，当滑动在边界时用viewPager.setCurrentItem(index，false);方法把页面重新设置回去：

  
  
  无限滑动.png

    @Override
    public void onPageScrollStateChanged(int state) {
        //若当前为第一张，设置页面为倒数第二张
        if (currentPosition == 0) {
            mViewPager.setCurrentItem(views.size()-2,false);
        } else if (currentPosition == views.size()-1) {
            //若当前为倒数第一张，设置页面为第二张
            mViewPager.setCurrentItem(1,false);
        }
    }

    这种用法是很高级，好多人也说是无缝循环，反正我试过之后果断放弃，当用户主动滑动时会有一个小卡顿，页面会闪一下，我觉得费力不讨好，好不如用第一种简单粗暴。
    第一种虽然getCount返回了最大整数，也不必考虑内存溢出，可以看ViewPager源码深入理解一下，它只会保存当前页面以及它前后两个共三个页面的视图，其他的要么还没加载，要么已经移除。
    自动播放可以用一个定时器，好几种实现方式，我用的是Timer。

private boolean isStart = false;//是否播放

private void initTimer() {
        timer = new Timer();
        timer.schedule(new AutoTask(), spacTime, spacTime);
        isStart = true;
    }

private class AutoTask extends TimerTask {

        @Override
        public void run() {
            if (isStart) {
                Message message = new Message();
                message.what = 0x11;
                message.arg1 = ++index;
                handler.sendMessage(message);
            }
        }
    }

手指拖动时停止自动播放

class MyViewPager extends ViewPager {

        ... ...

        @Override
        public boolean onTouchEvent(MotionEvent event) {
            switch (event.getAction()) {
                case MotionEvent.ACTION_UP:
                    resume();
                    Log.d("TAG", "resume");
                    break;
                case MotionEvent.ACTION_MOVE:
                    stop();
                    Log.d("TAG", "stop");
                    break;
            }
            return super.onTouchEvent(event);
        }
    }

圆点标记颜色变化

    圆点是我自定义的View，其实就是重写了onDraw绘制了一个带圆边的小矩形。我继承了FrameLayout，并把ViewPager跟标记点添加到里面，然后通过监听ViewPager.OnPageChangeListener的onPageSelected来刷新重绘改变颜色。

 @Override
public void onPageSelected(int position) {
        setSelectIndex(position % childCount);
        index = position;
        Log.d("TAG", "onPageSelected: "+position % childCount);
   }
private void setSelectIndex(int index) {
        for (int i = 0; i < childCount; i++) {
            spotViews.get(i).setSelect(i == index ? true : false);//spotViews集合储存SpotView对象
        }
    }
//SpotView（指示点）里面的方法
public void setSelect(boolean b) {
        if (b) {
            mPaint.setColor(Color.GREEN);
        } else {
            mPaint.setColor(Color.GRAY);
        }
        postInvalidate();
    }

圆点源码：

private Path mPath;//绘制路径
private Paint mPaint;//画笔
private int mCircular;//圆角大小
private int mWidch;//宽度
private int mHeight;//高

private void init() {
        mPaint = new Paint();
        mPaint.setStyle(Paint.Style.FILL);
        mPaint.setAntiAlias(true);
        mPaint.setColor(Color.GRAY);
        mPath = new Path();
        mCircular = Dp2Px(1);
        mWidch = Dp2Px(12);
        mHeight = Dp2Px(3);
    }

@Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        mPath.moveTo(mCircular, 0);
        mPath.lineTo(mWidch - mCircular, 0);
        mPath.quadTo(mWidch, 0, mWidch, mCircular);
        mPath.lineTo(mWidch, mHeight - mCircular);
        mPath.quadTo(mWidch, mHeight, mWidch - mCircular, mHeight);
        mPath.lineTo(mCircular, 0 + mHeight);
        mPath.quadTo(0, mHeight, 0, mHeight - mCircular);
        mPath.lineTo(0, mCircular);
        mPath.quadTo(0, 0, mCircular, 0);
        canvas.drawPath(mPath, mPaint);
    }

添加点击事件

public interface OnItemClickListener {
        void onItemClick(int position);
    }

@Override
public Object instantiateItem(ViewGroup container, final int position) {
    ImageView imageView = imageViews.get(position % childCount);
    if (position < childCount) {
        ImageLoader.load(imageView, urls.get(position % childCount), context);//加载图片
    }
    imageView.setOnClickListener(new OnClickListener() {
        @Override
        public void onClick(View v) {
            listener.onItemClick(position % childCount);
        }
    });
    ViewParent parent = imageView.getParent();
    if (parent != null) {
        ViewGroup viewParent = (ViewGroup) parent;
        viewParent.removeView(imageView);
    }
    container.addView(imageView);
    return imageView;
}

使用

AutoViewPager autopager = findViewById(R.id.autopager);
        autopager.addUrl("http://pic.58pic.com/58pic/13/76/61/33N58PICRdp_1024.jpg");
        autopager.addUrl("http://img05.tooopen.com/images/20140328/sy_57865838889.jpg");
        autopager.addUrl("http://img.zcool.cn/community/01b26f599106e10000002129eb2896.JPG");

        autopager.setOnItemClickListener(new AutoViewPager.OnItemClickListener() {
            @Override
            public void onItemClick(int position) {
                Log.d(TAG, "onItemClick: "+position);
            }
        });

项目源码：https://github.com/liujiakuoyx/learn/tree/master/AutoPager