Android自定义View使用canvas实现轮播图效果

1.功能分析
1.1 左右滑动切换图片，并且实现循环切换。
1.2 自动切换图片
1.3 导航圆点跟随轮播变更
1.4 点击图片，实现监听反馈
1.5 图片需要适配屏幕，按定义宽高显示

2.代码实现
2.1 实现原理
每次加载显示需要3张图片，并且偏移至左中右三个位置，不断地重绘view，修改偏移值，达到切换图片效果。
2.2 代码实现
创建自定义View类CarouselFigure，在onMeasure方法中，获取容器view的宽度，这里使用默认显示图片宽度与view容器宽度比值，作为适配比，然后确定容器view显示高度。

@Override

protected void onMeasure(intwidthMeasureSpec,intheightMeasureSpec) { 
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);//获取view宽高
        mWidth = MeasureSpec.getSize(widthMeasureSpec);
        mHeight = MeasureSpec.getSize(heightMeasureSpec);//默认showindex对应图片适配后宽高，做轮播图整体宽高
        if(imgList!=null&& imgList.size()>0){
               Bitmap bitmap = imgList.get(showIndex);floatscale = (float)mWidth /         bitmap.getWidth();
               mHeight = (int) (scale * bitmap.getHeight());
          }
        setMeasuredDimension(mWidth,mHeight);
}

手指左右滑动图片时候，获取横向手指偏移量，偏移量具有方向，向左为负，向右为正。向左偏移，左中右图片动态偏移量分别为，-mWidth+offset ，offset，mWidth+offset。showIndex表示显示图片imgList中索引号，pre_show_index为左图索引号，next_show_index为右图索引号。通过变更偏移和索引号，切换显示图片。

 @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        //判断偏移之后在临界值
        float min_x = mWidth-Math.abs(offset);
        //小于临界值时，改变显示图片索引值
        if(min_x0 ){
                showIndex--;
            }
            //回归
            reSetValue();
        }
        //初始化showIndex
        initShowIndex();
        //构画左中右三图
        handleImgWnH(pre_show_index);
        handleImgWnH(showIndex);
        handleImgWnH(next_show_index);
        canvas.drawBitmap(imgList.get(pre_show_index),-mWidth+offset,0,mPaint);
        canvas.drawBitmap(imgList.get(showIndex),offset,0,mPaint);
        canvas.drawBitmap(imgList.get(next_show_index),mWidth+offset,0,mPaint);
        //构画导航圆点
        drawCycle(canvas);
    }

一开始触摸图片，记录当前触摸坐标，标记为初始坐标startPoint，移动时获取实时坐标，计算手势滑动方向与水平方向夹角正切值，判断是否是水平滑动，如果是横向水平滑动，则记录滑动偏移量，调用invalidate进行重绘

@Override
    public boolean onTouchEvent(MotionEvent event) {
        //正在刷新禁止触摸
        if(isRefreshing){return true;}
        //正在自动轮播时，不能触发
        if(isAutoSliding||isGestureSliding){return true;}
        int action = event.getAction();
        switch (action){
            case MotionEvent.ACTION_DOWN:
                //关闭自动轮播
                isAllowAutoSlid = false;
                startPoint.set(event.getX(),event.getY());//记录初始值
                return true;
            case MotionEvent.ACTION_MOVE:
                float min_x = Math.abs(startPoint.x - event.getX());
                float min_y = Math.abs(startPoint.y - event.getY());
                //获取正切值
                float angle_tan_value = min_y / min_x;
                if(angle_tan_value

此时，已经实现让图片跟随手指偏移。但是图片并不会自动保持滑动惯性，使自己显示完全。 因此，需要在ACTION_UP处补充一个方法，让图片继续完成剩下偏移。此处使用线程slidImgRunnable

private Runnable slidImgRunnable = new Runnable() {
        @Override
        public void run() {
            float abs_offset = Math.abs(offset);
            //向左移动
            if(offset<0) {
                if(abs_offset0){
                        reSetValue();
                    }
                }else {
                    offset += -SLID_IMG_INTERVAL_OFFSET;
                }
            }else if(offset>0){ //向右移动
                if(abs_offset

无论向左还是向右移动，offset 绝对值都在增大，并且offset区间在0~mWidth之间，所以，只要设定一个递增偏移常量，不断循环执行修改偏移量和重绘，就可以让图片自动完成偏移。
自动轮播效果，需要另启一循环线程执行。autoSlidImg决定轮播周期，autoSlidImgRunnable 完成偏移量递增，和重绘view
开启自动轮播

  /**
     * 开启自动轮播
     */
    private void autoSlidImg()  {
        new Thread(new Runnable() {
            @Override
            public void run() {
                try {
                    while (true){
                        Thread.sleep(4000);//每4秒轮播一次
                        if(isAllowAutoSlid){
                            post(autoSlidImgRunnable);
                        }
                    }
                }catch (Exception e ){
                }
            }
        }).start();
    }

    /**
     * 实现自动轮播效果
     */
    private Runnable autoSlidImgRunnable = new Runnable() {
        @Override
        public void run() {
            offset += -SLID_IMG_INTERVAL_OFFSET;
            if (isNextCycle) {//判断是否可以继续产生偏移，完成一次轮播后退出
                offset=0;
                isNextCycle=false;
                isAutoSliding = false;
                return;
            }else{
                isAutoSliding = true;//正在轮播滑动
            }
            invalidate();
            postDelayed(autoSlidImgRunnable, SLID_IMG_INTERVALS);
        }
    };

定义接口返回点击显示图片监听

public interface OnTopImageClickListeners{
         void onClick(int showIndex);
}

carouselFigure.setOnTopImageClickListeners(new  CarouselFigure.OnTopImageClickListeners() {
        @Override
        public void onClick(int showIndex) {
            Log.i("tag","index: "+showIndex);
        }
});

github分享地址
CSDN下载地址