安卓轮播图实现

作者: 贼厉害 | 来源:发表于2018-05-22 11:05 被阅读0次

安卓轮播图实现
安卓轮播图
Android中viewpage实现轮播图
ViewPager图片轮播小练习
工作笔记七
React-native 首个工程使用的三方记录
安卓动画样例-放大缩小
轮播图心得
轮播图轮播问题
轮播图实现

综述

相信大家对轮播图已经不陌生了，其实就是一个自动翻页的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;
}

使用

<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