之前寫過一個簡單的ViewPager指示器,但是隻能夠展示指定數量的內容,沒有實現無限迴圈和自動播放功能,今天來完整的把這幾個功能寫一下吧.當然還是用到之前寫的簡單的ViewPager指示器,並做一些小修改,來配合無限迴圈和自動播放.

效果圖如下:

一、簡單分析

首先考慮一下無限迴圈怎麼實現,按照之前寫的,只是指定了資料來源的內容,ViewPager建立了資料來源長度的子項個數,可滑動範圍比較小.這樣就導致拉到最後一頁時,無法繼續滑動,或者處於第一頁的時候,無法向前滑動等情況,所以在設定ViewPager子項數量時,不能設定為資料來源的個數.要設定一個比較大的值,才能使ViewPager的可滑動範圍比較大,然後通過動態的修改ViewPager的位置,來實現無限迴圈的效果.

接著考慮一下自動播放如何實現,自動播放,需要一個播放頻率,每隔一段時間,去播放一次(也就是向後邊滑動一頁),這個用定時器Timer配合TimerTask就可以完成,每隔一定時間去執行一次.播放用Handler來做,在TimerTask中,傳送一個訊息,然後Handler接收到這個訊息後,去做播放操作.當然方法有很多.

二、具體實現

通過分析,先來寫一下介面卡,定義一個比較大的數來規定ViewPager的項數:

    /**
     * 預設輪播個數
     */
    public static final int FAKE_BANNER_SIZE = 10000;

    @Override
 

    public int getCount() {
        return FAKE_BANNER_SIZE;
    }

這樣,ViewPager的滑動範圍就不會受到限制,不過位置發生變化後,繫結資料時要對位置進行處理,不然會出現資料獲取不到或者獲取錯誤的問題,處理位置

    @Override
    public Object instantiateItem(ViewGroup container, int position) {
        View view = LayoutInflater.from(mContext).inflate(R.layout.banner_item, container, false
 
);
        ImageView imageView = (ImageView) view.findViewById(R.id.iv_banner_item);
        // 獲取當前顯示位置
        position %= pictureList.size();
        imageView.setImageResource(pictureList.get(position));
        container.addView(view);
        return view;
    }

對position進行取餘操作,這樣就可以獲取到符合資料來源取值範圍的位置,從而得到想要獲取展示的資料.

搞定了介面卡,再來看一下之前寫的簡單指示器,如何做一下修改呢.
首先新加入一個變數,來控制是否用於無限迴圈的ViewPager

    /**
     * 是否是迴圈
     */
    private boolean isCirculate;

    public IndicatorView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        // 獲取自定義屬性
        TypedArray ta = context.obtainStyledAttributes(attrs, R.styleable.IndicatorView);

        ...

        isCirculate = ta.getBoolean(R.styleable.IndicatorView_isCirculate, true);
        ta.recycle();
        // 初始化
        init();

    }

接著對外提供一個新的設定ViewPager的方法,因為之前獲取建立指示器個數的方法是獲取ViewPager介面卡中子項的個數,介面卡已經做了修改,顯然這個方法已經不再適用.想一下,指示器個數其實和資料來源的個數是一致的,所以提供一個新的方法

    /**
     * 設定vp
     *
     * @param childViewCount 需要顯示指示器的個數
     * @param viewpager      vp
     */
    public void setViewPager(int childViewCount, ViewPager viewpager) {
        if (null == viewpager) {
            return;
        }
        if (null == viewpager.getAdapter()) {
            throw new IllegalStateException("ViewPager does not have adapter.");
        }
        this.mViewPager = viewpager;
        this.mViewPager.addOnPageChangeListener(this);
        this.childViewCount = childViewCount;
        removeAllViews();
        invalidate();
    }

然後在修改指示器顯示時,對位置也需要進行處理,方式同介面卡中的處理相同

    @Override
    public void onPageSelected(int position) {
        // 處理位置變化,防止指示器顯示錯誤
        if (isCirculate && 0 != childViewCount) {
            position %= childViewCount;
        }
        setIndicatorState(position);
        if (null != mListener) {
            mListener.onPageSelected(position);
        }
    }

這樣ViewPager無限迴圈的問題基本就搞定了.下面來做下自動播放的
部分.打算通過定時器配合Handle來完成.很簡單.直接貼下程式碼
在Activity中

    /**
     * 輪播圖自動輪播訊息
     */
    public static final int AUTOBANNER_CODE = 0X1001;
    /**
     * 當前輪播圖位置
     */
    private int mBannerPosition;
    /**
     * 自動輪播計時器
     */
    private Timer timer = new Timer();
    /**
     * 自動輪播任務
     */
    private BannerTimerTask mBannerTimerTask;
    /**
     * 使用者當前是否點選輪播圖
     */
    private boolean mIsUserTouched = false;
    /**
     * 輪播圖Handler
     */
    Handler bannerHandler = new Handler(new Handler.Callback() {
        @Override
        public boolean handleMessage(Message msg) {
            // 當用戶點選時,不進行輪播
            if (!mIsUserTouched) {
                // 獲取當前的位置
                mBannerPosition = mViewPager.getCurrentItem();
                // 更換輪播圖
                mBannerPosition = (mBannerPosition + 1) % mBannerPagerAdapter.FAKE_BANNER_SIZE;
                mViewPager.setCurrentItem(mBannerPosition);
            }
            return true;
        }
    });

    /**
     * 開始輪播
     */
    private void startBannerTimer() {
        if (timer == null) {
            timer = new Timer();
        }
        if (mBannerTimerTask != null) {
            mBannerTimerTask.cancel();
        }
        mBannerTimerTask = new BannerTimerTask(bannerHandler);
        if (timer != null && mBannerTimerTask != null) {
            // 迴圈5秒執行
            timer.schedule(mBannerTimerTask, 5000, 5000);
        }
    }

    public class BannerTimerTask extends TimerTask {
    /**
     * handler
     */
    Handler handler;

    public BannerTimerTask(Handler handler) {
        super();
        this.handler = handler;
    }

    @Override
    public void run() {
               handler.sendEmptyMessage(MainActivity.AUTOBANNER_CODE);
    }
}

建立一個定時器,每隔5秒鐘傳送一個訊息,Handle接收到訊息後,改變ViewPager的位置.不難理解.

這樣效果就達到了,一個簡單的廣告欄效果也就實現了.當然還可以再進一步去做一些封裝和優化,這裡就不做了,最重要的其實就是把位置搞清楚,其他的問題並不難.

三、完整程式碼

IndicatorView:

package com.example.junweiliu.simpleindicatorview;

import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Bitmap;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.drawable.BitmapDrawable;
import android.graphics.drawable.Drawable;
import android.support.v4.view.ViewPager;
import android.util.AttributeSet;
import android.view.View;
import android.widget.ImageView;
import android.widget.LinearLayout;

/**
 * 輪播圖圓形指示器
 * Created by junweiliu on 16/6/15.
 */
public class IndicatorView extends LinearLayout implements ViewPager.OnPageChangeListener {
    /**
     * 需要建立的指示器個數
     */
    private int childViewCount = 0;
    /**
     * 設定圓點間margin
     */
    private int mInterval;
    /**
     * 當前選中的位置
     */
    private int mCurrentPostion = 0;
    /**
     * 普通顯示的圖片
     */
    private Bitmap normalBp;
    /**
     * 選中時顯示的圖片
     */
    private Bitmap selectBp;
    /**
     * 設定的輪播圖Vp
     */
    private ViewPager mViewPager;
    /**
     * 指示器單項寬度
     */
    private int mWidth;
    /**
     * 指示器單項高度
     */
    private int mHeight;
    /**
     * 圓點半徑
     */
    private int mRadius;
    /**
     * 普通狀態圓點顏色
     */
    private int normalColor;
    /**
     * 選中狀態圓點顏色
     */
    private int selectColor;
    /**
     * 是否是迴圈
     */
    private boolean isCirculate;


    /**
     * 對外提供ViewPager的回撥介面
     */
    interface OnPageChangeListener {

        public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels);

        public void onPageSelected(int position);

        public void onPageScrollStateChanged(int state);

    }

    /**
     * 回撥介面
     */
    private OnPageChangeListener mListener;

    /**
     * 設定回撥
     *
     * @param listener
     */
    public void setOnPageChangeListener(OnPageChangeListener listener) {
        this.mListener = listener;
    }

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

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

    public IndicatorView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        // 獲取自定義屬性
        TypedArray ta = context.obtainStyledAttributes(attrs, R.styleable.IndicatorView);
        normalBp = drawableToBitamp(ta.getDrawable(R.styleable.IndicatorView_normalDrawable));
        selectBp = drawableToBitamp(ta.getDrawable(R.styleable.IndicatorView_selectDrawable));
        mInterval = ta.getDimensionPixelOffset(R.styleable.IndicatorView_indicatorInterval, 6);
        normalColor = ta.getColor(R.styleable.IndicatorView_normalColor, Color.GRAY);
        selectColor = ta.getColor(R.styleable.IndicatorView_selectColor, Color.RED);
        mRadius = ta.getInteger(R.styleable.IndicatorView_indicatorRadius, 6);
        isCirculate = ta.getBoolean(R.styleable.IndicatorView_isCirculate, true);
        ta.recycle();
        // 初始化
        init();

    }

    /**
     * 初始化資料
     */
    private void init() {
        // 處理自定義屬性
        if (null == normalBp) {
            normalBp = makeIndicatorBp(normalColor);
        }
        if (null == selectBp) {
            selectBp = makeIndicatorBp(selectColor);
        }
        mWidth = normalBp.getWidth();
        mHeight = normalBp.getWidth();
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        int widthMode = MeasureSpec.getMode(widthMeasureSpec);
        int heightMode = MeasureSpec.getMode(heightMeasureSpec);
        int sizeWidth = MeasureSpec.getSize(widthMeasureSpec);
        int sizeHeight = MeasureSpec.getSize(heightMeasureSpec);
        // 如果是wrap_content設定為圖片寬高,否則設定為父容器寬高
        setMeasuredDimension((widthMode == MeasureSpec.EXACTLY) ? sizeWidth : (mWidth + mInterval) * childViewCount
                , (heightMode == MeasureSpec.EXACTLY) ? sizeHeight
                        : mHeight);
    }

    /**
     * 重繪
     *
     * @param canvas
     */
    @Override
    protected void dispatchDraw(Canvas canvas) {
        // 建立指示器圓點
        if (getChildCount() < childViewCount && getChildCount() == 0) {
            for (int i = 0; i < childViewCount; i++) {
                addView(makeIndicatorItem());
            }
            // 設定預設選中指示器
            setIndicatorState(mCurrentPostion);
        }
        super.dispatchDraw(canvas);
    }


    /**
     * 設定Vp
     *
     * @param viewpager
     */
    public void setViewPager(ViewPager viewpager) {
        if (null == viewpager) {
            return;
        }
        if (null == viewpager.getAdapter()) {
            throw new IllegalStateException("ViewPager does not have adapter.");
        }

        this.mViewPager = viewpager;
        this.mViewPager.addOnPageChangeListener(this);
        this.childViewCount = viewpager.getAdapter().getCount();
        invalidate();
    }

    /**
     * 設定Vp
     *
     * @param viewpager
     * @param currposition 當前選中的位置
     */
    public void setViewPager(ViewPager viewpager, int currposition) {
        if (null == viewpager) {
            return;
        }
        if (null == viewpager.getAdapter()) {
            throw new IllegalStateException("ViewPager does not have adapter.");
        }
        this.mViewPager = viewpager;
        this.mViewPager.addOnPageChangeListener(this);
        this.childViewCount = viewpager.getAdapter().getCount();
        this.mCurrentPostion = currposition;
        invalidate();
    }

    /**
     * 設定vp
     *
     * @param childViewCount 需要顯示指示器的個數
     * @param viewpager      vp
     */
    public void setViewPager(int childViewCount, ViewPager viewpager) {
        if (null == viewpager) {
            return;
        }
        if (null == viewpager.getAdapter()) {
            throw new IllegalStateException("ViewPager does not have adapter.");
        }
        this.mViewPager = viewpager;
        this.mViewPager.addOnPageChangeListener(this);
        this.childViewCount = childViewCount;
        removeAllViews();
        invalidate();
    }

    /**
     * 建立指示器
     *
     * @return
     */
    private View makeIndicatorItem() {
        ImageView iv = new ImageView(getContext());
        LayoutParams lp = new LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT);
        lp.width = normalBp.getWidth();
        lp.height = normalBp.getHeight();
        lp.rightMargin = mInterval;
        iv.setImageBitmap(normalBp);
        iv.setLayoutParams(lp);
        return iv;
    }


    /**
     * 建立圓點指示器圖片
     *
     * @param color 建立不同顏色的指示器項
     * @return
     */
    private Bitmap makeIndicatorBp(int color) {
        Bitmap normalBp = Bitmap.createBitmap(mRadius * 2, mRadius * 2,
                Bitmap.Config.ARGB_8888);
        Paint paint = new Paint();
        paint.setAntiAlias(true);
        paint.setColor(color);
        Canvas canvas = new Canvas(normalBp);
        canvas.drawCircle(mRadius, mRadius, mRadius, paint);
        return normalBp;
    }


    /**
     * drawable轉bitmap
     *
     * @param drawable
     * @return
     */
    private Bitmap drawableToBitamp(Drawable drawable) {
        if (null == drawable) {
            return null;
        }
        if (drawable instanceof BitmapDrawable) {
            BitmapDrawable bd = (BitmapDrawable) drawable;
            return bd.getBitmap();
        }
        int w = drawable.getIntrinsicWidth();
        int h = drawable.getIntrinsicHeight();
        Bitmap bitmap = Bitmap.createBitmap(w, h, Bitmap.Config.ARGB_8888);
        Canvas canvas = new Canvas(bitmap);
        drawable.setBounds(0, 0, w, h);
        drawable.draw(canvas);
        return bitmap;
    }

    @Override
    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
        if (null != mListener) {
            mListener.onPageScrolled(position, positionOffset, positionOffsetPixels);
        }
    }

    @Override
    public void onPageSelected(int position) {
        if (isCirculate && 0 != childViewCount) {
            position %= childViewCount;
        }
        setIndicatorState(position);
        if (null != mListener) {
            mListener.onPageSelected(position);
        }
    }

    @Override
    public void onPageScrollStateChanged(int state) {
        if (null != mListener) {
            mListener.onPageScrollStateChanged(state);
        }
    }

    /**
     * 設定指示器的狀態
     *
     * @param position
     */
    public void setIndicatorState(int position) {
        for (int i = 0; i < getChildCount(); i++) {
            if (i == position)
                ((ImageView) getChildAt(i)).setImageBitmap(selectBp);
            else
                ((ImageView) getChildAt(i)).setImageBitmap(normalBp);
        }
    }

}

介面卡BannerPagerAdapter

package com.example.junweiliu.simpleindicatorview;

import android.content.Context;
import android.support.v4.view.PagerAdapter;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;

import java.util.ArrayList;
import java.util.List;

/**
 * Created by junweiliu on 16/6/14.
 * VP介面卡
 */
public class BannerPagerAdapter extends PagerAdapter {
    /**
     * 上下文
     */
    private Context mContext;
    /**
     * 影象列表
     */
    private List<Integer> pictureList = new ArrayList<>();
    /**
     * 預設輪播個數
     */
    public static final int FAKE_BANNER_SIZE = 10000;

    public BannerPagerAdapter(Context context, List<Integer> pictureList) {
        this.mContext = context;
        this.pictureList = pictureList;
    }

    @Override
    public int getCount() {
        return FAKE_BANNER_SIZE;
    }

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

    @Override
    public Object instantiateItem(ViewGroup container, int position) {
        View view = LayoutInflater.from(mContext).inflate(R.layout.banner_item, container, false);
        ImageView imageView = (ImageView) view.findViewById(R.id.iv_banner_item);
        // 獲取當前顯示位置
        position %= pictureList.size();
        imageView.setImageResource(pictureList.get(position));
        container.addView(view);
        return view;
    }


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

MainActivity

package com.example.junweiliu.simpleindicatorview;

import android.os.Bundle;
import android.os.Handler;
import android.os.Message;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.view.MotionEvent;
import android.view.View;

import java.util.ArrayList;
import java.util.List;
import java.util.Timer;

public class MainActivity extends AppCompatActivity {
    /**
     * 輪播圖
     */
    private ViewPager mViewPager;
    /**
     * 指示器
     */
    private IndicatorView mIndicatorView;
    /**
     * 介面卡
     */
    private BannerPagerAdapter mBannerPagerAdapter;
    /**
     * 圖片資源
     */
    private List<Integer> pictureList = new ArrayList<>();
    /**
     * 輪播圖自動輪播訊息
     */
    public static final int AUTOBANNER_CODE = 0X1001;
    /**
     * 當前輪播圖位置
     */
    private int mBannerPosition;
    /**
     * 自動輪播計時器
     */
    private Timer timer = new Timer();
    /**
     * 自動輪播任務
     */
    private BannerTimerTask mBannerTimerTask;
    /**
     * 使用者當前是否點選輪播圖
     */
    private boolean mIsUserTouched = false;
    /**
     * 輪播圖Handler
     */
    Handler bannerHandler = new Handler(new Handler.Callback() {
        @Override
        public boolean handleMessage(Message msg) {
            // 當用戶點選時,不進行輪播
            if (!mIsUserTouched) {
                // 獲取當前的位置
                mBannerPosition = mViewPager.getCurrentItem();
                // 更換輪播圖
                mBannerPosition = (mBannerPosition + 1) % mBannerPagerAdapter.FAKE_BANNER_SIZE;
                mViewPager.setCurrentItem(mBannerPosition);
            }
            return true;
        }
    });


    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initDatas();
        initView();
    }

    /**
     * 初始化資料
     */
    private void initDatas() {
        pictureList.add(R.drawable.pic_one);
        pictureList.add(R.drawable.pic_two);
        pictureList.add(R.drawable.pic_three);
        pictureList.add(R.drawable.pic_one);
        pictureList.add(R.drawable.pic_two);
        pictureList.add(R.drawable.pic_three);
    }

    /**
     * 初始化控制元件
     */
    private void initView() {
        mViewPager = (ViewPager) findViewById(R.id.vp_banner);
        mIndicatorView = (IndicatorView) findViewById(R.id.idv_banner);
        mBannerPagerAdapter = new BannerPagerAdapter(this, pictureList);
        mViewPager.setAdapter(mBannerPagerAdapter);
        mIndicatorView.setViewPager(pictureList.size(), mViewPager);
        // 設定預設起始位置,使開始可以向左邊滑動
        mViewPager.setCurrentItem(pictureList.size() * 100);
        mIndicatorView.setOnPageChangeListener(new IndicatorView.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

            }

            @Override
            public void onPageSelected(int position) {

            }

            @Override
            public void onPageScrollStateChanged(int state) {

            }
        });
        mViewPager.setOnTouchListener(new View.OnTouchListener() {

            @Override
            public boolean onTouch(View v, MotionEvent event) {
                int action = event.getAction();
                if (action == MotionEvent.ACTION_DOWN
                        || action == MotionEvent.ACTION_MOVE) {
                    mIsUserTouched = true;
                } else if (action == MotionEvent.ACTION_UP) {
                    mIsUserTouched = false;
                }
                return false;
            }
        });
        startBannerTimer();
    }

    /**
     * 開始輪播
     */
    private void startBannerTimer() {
        if (timer == null) {
            timer = new Timer();
        }
        if (mBannerTimerTask != null) {
            mBannerTimerTask.cancel();
        }
        mBannerTimerTask = new BannerTimerTask(bannerHandler);
        if (timer != null && mBannerTimerTask != null) {
            // 迴圈5秒執行
            timer.schedule(mBannerTimerTask, 5000, 5000);
        }
    }


    /**
     * 銷燬時,關閉任務,防止異常
     */
    @Override
    public void onDestroy() {
        super.onDestroy();
        if (null != mBannerTimerTask) {
            mBannerTimerTask.cancel();
            mBannerTimerTask = null;
        }
    }
}

BannerTimerTask

package com.example.junweiliu.simpleindicatorview;

import android.os.Handler;

import java.util.TimerTask;

/**
 * Created by junweiliu on 16/6/15.
 */
public class BannerTimerTask extends TimerTask {
    /**
     * handler
     */
    Handler handler;

    public BannerTimerTask(Handler handler) {
        super();
        this.handler = handler;
    }

    @Override
    public void run() {
        handler.sendEmptyMessage(MainActivity.AUTOBANNER_CODE);
    }
}

attr

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <!--IndicatorView相關-->
    <!--普通指示器圖片-->
    <attr name="normalDrawable" format="reference"/>
    <!--選中指示器圖片-->
    <attr name="selectDrawable" format="reference"/>
    <!--指示器間隔-->
    <attr name="indicatorInterval" format="dimension"/>
    <!--普通指示器顏色-->
    <attr name="normalColor" format="color"/>
    <!--選中指示器顏色-->
    <attr name="selectColor" format="color"/>
    <!--圓點弧度-->
    <attr name="indicatorRadius" format="integer"/>
    <!--是否是迴圈-->
    <attr name="isCirculate" format="boolean"/>
    <declare-styleable name="IndicatorView">
        <attr name="normalDrawable"/>
        <attr name="selectDrawable"/>
        <attr name="indicatorInterval"/>
        <attr name="normalColor"/>
        <attr name="selectColor"/>
        <attr name="indicatorRadius"/>
        <attr name="isCirculate"/>
    </declare-styleable>
</resources>

activity_main

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:idv="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="225dp"
    tools:context="com.example.junweiliu.simpleindicatorview.MainActivity">
    <!--輪播圖-->
    <android.support.v4.view.ViewPager
        android:id="@+id/vp_banner"
        android:layout_width="match_parent"
        android:layout_height="225dp"
        >
    </android.support.v4.view.ViewPager>
    <!--指示器-->
    <com.example.junweiliu.simpleindicatorview.IndicatorView
        android:id="@+id/idv_banner"
        android:layout_width="match_parent"
        android:layout_height="10dp"
        android:layout_alignParentBottom="true"
        android:gravity="center_horizontal"
        android:layout_marginTop="20dp"
        idv:indicatorInterval="10dp"
        idv:isCirculate="true"
        idv:normalDrawable="@mipmap/oval_indicator_grey"
        idv:selectDrawable="@mipmap/oval_indicator_green">
    </com.example.junweiliu.simpleindicatorview.IndicatorView>

</RelativeLayout>

banner_item

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

    <ImageView
        android:id="@+id/iv_banner_item"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scaleType="fitXY"
        />

</LinearLayout>

原始碼地址