Android自定View实现滑动验证效果的代码

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="mycheckview">
        <attr name="m_blockbg" format="reference" /><!--滑块背景图片-->
        <attr name="m_blockcolor" format="color" /><!--滑块颜色-->
        <attr name="m_blockshadowlayer" format="color" /><!--滑块阴影颜色-->
        <attr name="m_procolor" format="color" /><!--进度条颜色-->
        <attr name="m_reccolor" format="color" /><!--矩形背景色-->
        <attr name="m_circlesize" format="integer" /><!--圆角角度值-->
    </declare-styleable>
</resources>

public class mycheckview extends view {

    private boolean isblockarea = false;
    private boolean ismove = false;
    private boolean isfinish = false;
    private boolean isdown = false;
    private int mright;
    private int startx = 0;

    /**
     * 滑块边距
     */
    private final int blocksize = sizeutils.dp2px(5);

    /**
     * 相关属性
     */
    private int m_blockcolor = color.white;//默认滑块颜色
    private int m_blockshadowlayer = color.parsecolor("#d8d8d8");//默认滑块阴影色
    private int m_procolor = color.parsecolor("#ff3159");//默认进度条颜色
    private int m_reccolor = color.parsecolor("#d8d8d8");//默认矩形颜色
    private int blockdrawableid;//默认滑块背景图

    /**
     * 矩形画笔
     */
    private final paint recpaint = new paint();

    /**
     * 进度条画笔
     */
    private final paint propaint = new paint();

    /**
     * 滑块画笔
     */
    private final paint blockpaint = new paint();

    /**
     * 圆角角度
     */
    private int circlesize = sizeutils.dp2px(20);

    /**
     * 记录父控件宽度
     */
    private float parentwidth = 0f;

    /**
     * 矩形高度
     */
    private int proheight;

    /**
     * 默认高度
     */
    private final int default_height = sizeutils.dp2px(45);

    /**
     * 滑块宽度
     */
    private final int blockwidth = sizeutils.dp2px(60);

    /**
     * 手指落下位置
     */
    private int dx;

    /**
     * 偏移距离
     */
    private int mx;

    /**
     * 接口回调
     */
    private finishlistener finishlistener;

    public void setfinishlistener(finishlistener finishlistener) {
        this.finishlistener = finishlistener;
    }

    public mycheckview(@nonnull context context) {
        super(context);
        init();
    }

    public mycheckview(@nonnull context context, @nullable attributeset attrs) {
        super(context, attrs);
        initparams(context, attrs);
        init();
    }

    public mycheckview(@nonnull context context, @nullable attributeset attrs, int defstyleattr) {
        super(context, attrs, defstyleattr);
        initparams(context, attrs);
        init();
    }

    /**
     * 初始化自定义属性
     *
     * @param context 上下文
     * @param attrs   属性参数
     */
    private void initparams(context context, attributeset attrs) {
        typedarray typedarray = context.obtainstyledattributes(attrs, r.styleable.mycheckview);
        if (typedarray != null) {
            //获取滑块背景图片
            blockdrawableid = typedarray.getresourceid(r.styleable.mycheckview_m_blockbg, -1);
            //获取滑块颜色
            m_blockcolor = typedarray.getcolor(r.styleable.mycheckview_m_blockcolor, m_blockcolor);
            //滑块阴影色
            m_blockshadowlayer = typedarray.getcolor(r.styleable.mycheckview_m_blockcolor, m_blockshadowlayer);
            //进度条颜色
            m_procolor = typedarray.getcolor(r.styleable.mycheckview_m_blockcolor, m_procolor);
            //矩形颜色
            m_reccolor = typedarray.getcolor(r.styleable.mycheckview_m_blockcolor, m_reccolor);
            //圆角角度值
            circlesize = typedarray.getint(r.styleable.mycheckview_m_blockcolor, circlesize);
            typedarray.recycle();
        }
    }

    /**
     * 初始化画笔
     */
    private void init() {
        //设置矩形背景色
        recpaint.setcolor(m_reccolor);
        recpaint.setstyle(paint.style.fill);
        recpaint.setantialias(true);

        //设置进度条背景色
        propaint.setcolor(m_procolor);
        propaint.setstyle(paint.style.fill);
        recpaint.setantialias(true);

        //判断是否使用了背景图
        if (blockdrawableid != -1) {
            //设置滑块背景色
            blockpaint.setcolor(m_blockcolor);
            blockpaint.setstyle(paint.style.fill_and_stroke);
            blockpaint.setantialias(true);
            //给滑块添加阴影
            blockpaint.setshadowlayer(35, 1, 1, m_blockshadowlayer);
        } else {
            blockpaint.setstyle(paint.style.fill_and_stroke);
            blockpaint.setantialias(true);
        }
    }

    public void blockreset() {
        mx = 0;
        reset(startx);
    }

    @override
    protected void onmeasure(int widthmeasurespec, int heightmeasurespec) {
        super.onmeasure(widthmeasurespec, heightmeasurespec);
        parentwidth = getmywsize(widthmeasurespec);
        proheight = getmyhsize(heightmeasurespec);
        setmeasureddimension((int) parentwidth, proheight);

    }

    @suppresslint("drawallocation")
    @override
    protected void ondraw(canvas canvas) {
        super.ondraw(canvas);
        //绘制矩形
        rectf rectf = new rectf();
        rectf.left = 1;
        rectf.right = parentwidth - 1;
        rectf.top = 1;
        rectf.bottom = proheight - 1;
        //绘制圆角矩形
        canvas.drawroundrect(rectf, circlesize, circlesize, recpaint);

        if (ismove || isdown) {
            //绘制进度条
            rectf rectp = new rectf();
            rectp.left = 1;
            rectp.right = blockwidth + blocksize + mx;
            rectp.top = 1;
            rectp.bottom = proheight - 1;
            canvas.drawroundrect(rectp, circlesize, circlesize, propaint);
        }

        //绘制滑块
        rectf rectb = new rectf();
        rectb.left = blocksize + mx;
        rectb.right = blockwidth + mx;
        rectb.top = blocksize;
        rectb.bottom = proheight - blocksize;

        mright = (int) rectb.right;

        //判断是否使用了背景图
        if (blockdrawableid != -1) {
            //绘制背景图
            bitmap bitmap = bitmapfactory.decoderesource(getresources(), blockdrawableid);
            rect rect = new rect(0, 0, bitmap.getwidth(), bitmap.getheight());
            canvas.drawbitmap(bitmap, rect, rectb, blockpaint);
        } else {
            //绘制滑块
            canvas.drawroundrect(rectb, circlesize, circlesize, blockpaint);
        }

    }

    @suppresslint("clickableviewaccessibility")
    @override
    public boolean ontouchevent(motionevent event) {
        switch (event.getaction()) {
            case motionevent.action_down:
                dx = (int) event.getx();
                int dy = (int) event.gety();
                int top = gettop();
                int bottom = getbottom();
                //判断区域是否为滑块
                if (dx > blocksize && dx < blockwidth && dy > blocksize && dy < (bottom - top)) {
                    isblockarea = true;
                }
                return true;
            case motionevent.action_move:

                if (isblockarea) {
                    mx = (int) event.getx() - dx;
                    //设置范围
                    if ((blockwidth + blocksize + mx) < parentwidth && (blocksize + mx) >= blocksize) {
                        //计算偏移量
                        invalidate();
                        startx = (int) event.getx() - blockwidth / 2;
                    } else if ((blocksize + mx) >= blocksize) {
                        //超出复位
                        mx = (int) parentwidth - blockwidth - blocksize;
                        invalidate();
                    }
                    ismove = true;
                }
                return true;
            case motionevent.action_up:
            case motionevent.action_cancel:
                isblockarea = false;
                isfinish = mright == parentwidth - blocksize;
                if (isfinish) {
                    //监听回调
                    if (finishlistener != null) {
                        finishlistener.finish();
                    }
                }
                if (!isfinish && ismove) {
                    reset(startx);
                }
                break;
        }
        return super.ontouchevent(event);
    }

    /**
     * 松手回弹动画效果
     */
    private void reset(int start) {

        valueanimator valueanimator = valueanimator.ofint(start, 0);
        valueanimator.setduration(500);
        valueanimator.start();
        valueanimator.addupdatelistener(animation -> {
            mx = (int) animation.getanimatedvalue();
            //刷新
            invalidate();
        });
        valueanimator.addlistener(new animatorlisteneradapter() {
            @override
            public void onanimationend(animator animation) {
                ismove = false;
                isfinish = false;
                startx = 0;
            }
        });
    }

    /**
     * 获取测量大小
     */
    private int getmywsize(int measurespec) {
        int result;
        int specmode = measurespec.getmode(measurespec);
        int specsize = measurespec.getsize(measurespec);
        if (specmode == measurespec.exactly) {
            result = specsize;//确切大小,所以将得到的尺寸给view
        } else if (specmode == measurespec.at_most) {
            result = math.min(getscreenwidth() - 20, specsize);
        } else {
            result = getscreenwidth() - 20;
        }
        return result;
    }

    /**
     * 获取测量大小
     */
    private int getmyhsize(int measurespec) {
        int result;
        int specmode = measurespec.getmode(measurespec);
        int specsize = measurespec.getsize(measurespec);
        if (specmode == measurespec.exactly) {
            result = specsize;//确切大小,所以将得到的尺寸给view
        } else if (specmode == measurespec.at_most) {
            result = math.min(default_height, specsize);
        } else {
            result = default_height - 20;
        }
        return result;
    }

    /**
     * 获取屏幕宽度
     */
    private int getscreenwidth() {
        windowmanager windowmanager = (windowmanager) getcontext().getsystemservice(context.window_service);
        displaymetrics displaymetrics = new displaymetrics();
        windowmanager.getdefaultdisplay().getmetrics(displaymetrics);
        return displaymetrics.widthpixels;
    }

    /**
     * 接口回调方法
     */
    public interface finishlistener {
        void finish();
    }

}

<com.guanwei.globe.view.mycheckview
        android:id="@+id/checkview"
        android:layout_width="200dp"
        android:layout_height="wrap_content"
        android:layout_marginleft="20dp"
        android:layout_marginright="20dp"
        app:layout_constraintleft_toleftof="parent"
        app:layout_constraintright_torightof="parent"
        app:layout_constraintbottom_tobottomof="parent"
        app:layout_constrainttop_totopof="parent"
        app:m_blockbg="@mipmap/block" />