綜述

????相信大家對輪播圖已經不陌生了，其實就是一個自動翻頁的ViewPager，網上也有好多寫的非常好博客，這篇只是我的學習記錄，證明我也學過（吼吼），并不是效仿抄襲。

功能

• 自動無限播放
• 手指拖動時停止自動播放
• 圓點標記顏色變化
• 添加點擊事件

開始

自動無限播放

先說說無限播放可以用的方案，方案有兩種：

• 一種是讓PagerAdapter的getCount方法返回一個足夠大的數值，這樣就能一直播放下去。比如返回Integer.MAX_VALUE。

• 另一種是在你的要現實的頁面集合前后各加一個頁面，在最前面加上最后要顯示的頁面，最后添加第一個頁面，然后再ViewPager.OnPageChangeListener接口里面監(jiān)聽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);
        }
    }

????這種用法是很高級，好多人也說是無縫循環(huán)，反正我試過之后果斷放棄，當用戶主動滑動時會有一個小卡頓，頁面會閃一下，我覺得費力不討好，好不如用第一種簡單粗暴。
????第一種雖然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跟標記點添加到里面，然后通過監(jiān)聽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;
}

使用

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <com.learnmvp.view.AutoViewPager
        android:id="@+id/autopager"
        android:layout_width="match_parent"
        android:layout_height="200dp">

    </com.learnmvp.view.AutoViewPager>
</LinearLayout>

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