Android-自动轮播的ViewPager+滑动指示器

先给大家上效果图

项目运行

项目结构

项目思路

问题1： 左右无限滑

    在PagerAdapt的getCount方法里给上一个很大的数

        public int getCount() {            return Integer.MAX_VALUE;        }

    然后把设置item项设置到一个中间的位置

        int diff = Integer.MAX_VALUE /2 % mData.size();        mPager.setCurrentItem(Integer.MAX_VALUE /2 - diff);

问题二： 防止position过大 引起下标越界

    在所有需要处理position值得地方加上

        position = position % mData.size();

问题三：自动轮播

    使用Thread或者使用Handler都可以，原理就是隔一段时间把pager的item项+1    我这用的一个自定的Runnable，写了一个停止方法和开始方法

        class AutoScrollTask implements Runnable{            @Override            public void run() {                int item = mPager.getCurrentItem();                mPager.setCurrentItem(item + 1);                startTask();                    }            public void startTask(){                mPager.postDelayed(this, 2000);             }            public void stopTask(){                mPager.removeCallbacks(this);            }        }

问题四：停止轮播和重新开始轮播

    去监听pager，当发生DOWN事件的时候去停止轮播，UP事件的时候就去重新轮播

        final AutoScrollTask task = new AutoScrollTask();        task.startTask();        mPager.setOnTouchListener(new OnTouchListener() {            @Override            public boolean onTouch(View v, MotionEvent event) {                switch (event.getAction()) {                case MotionEvent.ACTION_DOWN:                    task.stopTask();                    break;                case MotionEvent.ACTION_UP:                    task.startTask();                    break;                }                return false;            }        });

项目代码

代码 AutoCarousel 类

    public class AutoCarousel extends RelativeLayout {    private List<Bitmap> mData; // 数据源     private int mIndicatorHeight; // 滑动指示器高度    private ViewPager mPager;   // 轮播的ViewPager    private LinearLayout mIndicator;  // 指示器容器控件    public AutoCarousel(Context context, AttributeSet attrs, int defStyle) {        super(context, attrs, defStyle);    }    public AutoCarousel(Context context, AttributeSet attrs) {        super(context, attrs);    }    public AutoCarousel(Context context) {        super(context);    }    @Override    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {        super.onMeasure(widthMeasureSpec, heightMeasureSpec);           mIndicatorHeight = mIndicator.getHeight();    }    @Override    protected void onLayout(boolean changed, int l, int t, int r, int b) {        super.onLayout(changed, l, t, r, b);    }    /** 初始化数据 只用当外界调用这个方法一切才会开始 */    public void initView(List<Bitmap> T) {          mData = T;          if (mData != null && mData.size() != 0) {               View.inflate(getContext(), R.layout.auto_carousel, this);          mPager = (ViewPager) findViewById(R.id.lv_auto_carousel);        mIndicator = (LinearLayout) findViewById(R.id.ll_auto_carousel_indicator);        mIndicator.setGravity(Gravity.CENTER);        // 轮播        mPager.setAdapter(new AutoAdapter());        // 添加指示器        for (int i = 0; i < mData.size(); i++) {                IndicatorView indicatorView = new IndicatorView(getContext());            mIndicator.addView(indicatorView );        }        // 监听滑动，目的是为了同步指示器的改变        mPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {            @Override            public void onPageSelected(int position) {                position = position % mData.size();                for (int i = 0; i < mData.size(); i++) {                    IndicatorView view= (IndicatorView) mIndicator.getChildAt(i);                    view.changeColor(Color.GRAY);                    if (position == i) {                        view.changeColor(Color.RED);                    }                }               }            @Override            public void onPageScrolled(int arg0, float arg1, int arg2) {            }            @Override            public void onPageScrollStateChanged(int arg0) {            }        });        // 设置偏移，目的是为了使item 刚好处于第0项的位置        int diff = Integer.MAX_VALUE /2 % mData.size();         mPager.setCurrentItem(Integer.MAX_VALUE /2 - diff);        // 开始轮播        final AutoScrollTask task = new AutoScrollTask();        task.startTask();        // 停止轮播和重新开始轮播的处理         mPager.setOnTouchListener(new OnTouchListener() {            @Override            public boolean onTouch(View v, MotionEvent event) {                switch (event.getAction()) {                case MotionEvent.ACTION_DOWN:                    task.stopTask();                    break;                case MotionEvent.ACTION_UP:                    task.startTask();                    break;                }                return false;            }        });        }    }    /** 适配器 */    class AutoAdapter extends PagerAdapter{        @Override        public int getCount() {            return Integer.MAX_VALUE;        }        @Override        public boolean isViewFromObject(View arg0, Object arg1) {            return arg0 == arg1;        }        @Override        public Object instantiateItem(ViewGroup container, int position) {            position = position % mData.size();            ImageView image = new ImageView(getContext());  //fitXY            image.setImageBitmap(mData.get(position));            image.setScaleType(ScaleType.FIT_XY);            container.addView(image);            return image;        }        @Override        public void destroyItem(ViewGroup container, int position, Object object) {            container.removeView((View) object);        }    }    /** 自动轮播 */    class AutoScrollTask implements Runnable{        @Override        public void run() {            int item = mPager.getCurrentItem();            mPager.setCurrentItem(item + 1);            startTask();                }        public void startTask(){            mPager.postDelayed(this, 2000);        }        public void stopTask(){            mPager.removeCallbacks(this);        }    }    /** 指示器 */    class IndicatorView extends View{        Paint paint;        public IndicatorView(Context context) {            super(context);            paint = new Paint();            paint.setColor(Color.GRAY);        }        public void changeColor(int color){            paint.setColor(color);            invalidate();        }        @Override        protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {            super.onMeasure(widthMeasureSpec, heightMeasureSpec);            setMeasuredDimension(16, mIndicatorHeight);        }        @Override        protected void onDraw(Canvas canvas) {            canvas.drawCircle(8, mIndicatorHeight/2, 4, paint);        }    }}

代码 MainActivity 类

    public class MainActivity extends Activity {    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        AutoCarousel auto = (AutoCarousel) findViewById(R.id.re);        List<Bitmap> T = new ArrayList<Bitmap>();        Bitmap bitmap1 = BitmapFactory.decodeResource(getResources(), R.drawable.img1);        Bitmap bitmap2 = BitmapFactory.decodeResource(getResources(), R.drawable.img2);        Bitmap bitmap3 = BitmapFactory.decodeResource(getResources(), R.drawable.img3);        Bitmap bitmap4 = BitmapFactory.decodeResource(getResources(), R.drawable.img4);        T.add(bitmap1);        T.add(bitmap2);        T.add(bitmap3);        T.add(bitmap4);        auto.initView(T);    }}

代码 activity_main.xml 文件

    <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">        <com.xuan.autocarousel.AutoCarousel            android:id="@+id/re"            android:layout_width="match_parent"            android:layout_height="200dp"/>      </RelativeLayout>

代码 auto_carousel.xml 文件

    <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="150dp">        <android.support.v4.view.ViewPager            android:id="@+id/lv_auto_carousel"            android:layout_width="match_parent"            android:layout_height="match_parent"/>        <LinearLayout            android:id="@+id/ll_auto_carousel_indicator"            android:layout_alignParentBottom="true"            android:layout_width="match_parent"            android:orientation="horizontal"            android:background="#6000"            android:layout_height="40dp"/>    </RelativeLayout>

运行项目