Android自定义开关按钮源码解析

177 阅读 0 评论 117 点赞

我是靠谱客的博主安详樱桃，最近开发中收集的这篇文章主要介绍Android自定义开关按钮源码解析，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

本文实例为大家分享了Android自定义开关的具体代码，供大家参考，具体内容如下

以 ToggleColorY 为例分析, ToggleImageY逻辑代码差不多

初始化参数

获取背景颜色,按钮颜色,开关状态

@SuppressLint("ResourceAsColor")
private void initParame(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
    TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.ToggleColorY, defStyleAttr, 0);
    mOpenBGColor = typedArray.getColor(R.styleable.ToggleColorY_tby_open_bg, getResources().getColor(R.color.tby_orange));
    mCloseBGColor = typedArray.getColor(R.styleable.ToggleColorY_tby_close_bg, getResources().getColor(R.color.tby_gray));
    mTouchColor = typedArray.getColor(R.styleable.ToggleColorY_tby_touch, getResources().getColor(R.color.tby_read));
    mIsOpen = typedArray.getBoolean(R.styleable.ToggleColorY_tby_state, false);
    typedArray.recycle();
}

初始化画笔和 RectF

//    Paint.Style.FILL设置只绘制图形内容
//    Paint.Style.STROKE设置只绘制图形的边
//    Paint.Style.FILL_AND_STROKE设置都绘制
private void initPaint() {
    //开关 开背景
    mOpenBGPaint = new Paint();
    mOpenBGPaint.setAntiAlias(true);
    mOpenBGPaint.setStyle(Paint.Style.FILL_AND_STROKE);
    mOpenBGPaint.setColor(mOpenBGColor);
    //开关 关背景
    mCloseBGPaint = new Paint();
    mCloseBGPaint.setAntiAlias(true);
    mCloseBGPaint.setStyle(Paint.Style.FILL_AND_STROKE);
    mCloseBGPaint.setColor(mCloseBGColor);
    //Touch 圆形
    mTouchPaint = new Paint();
    mTouchPaint.setAntiAlias(true);
    mTouchPaint.setStyle(Paint.Style.FILL_AND_STROKE);
    mTouchPaint.setColor(mTouchColor);
    
    //开 RectF
    mRectFOpen = new RectF();
    //关 RectF
    mRectFClose = new RectF();
}

在 onLayout 时获取整个控件宽高,并且设置 RectF 尺寸

@Override
protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
    super.onLayout(changed, left, top, right, bottom);
    mWidth = getWidth();
    mHeight = getHeight();
    initView();
}
private void initView() {
    mRectFClose.set(0, 0, mWidth, mHeight);
    mRectFOpen.set(0, 0, mWidth, mHeight);
}

绘制开关初始状态以及滑动按钮得初始状态

@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    //开关初始状态
    if (mIsOpen) {
        canvas.drawRoundRect(mRectFOpen, mHeight / 2, mHeight / 2, mOpenBGPaint);//开
    } else {
        canvas.drawRoundRect(mRectFClose, mHeight / 2, mHeight / 2, mCloseBGPaint);//关
    }
    firstDraw();
    //绘制滑动按钮
    canvas.drawCircle(mSlidingDistance, mHeight / 2, mHeight / 2, mTouchPaint);
}
/**
 * 根据开关初始状态设置滑动按钮位置
 */
private void firstDraw() {
    if (!mIsFirst) {
        if (mIsOpen) {
            mSlidingDistance = mWidth - mHeight / 2;
        } else {
            mSlidingDistance = mHeight / 2;
        }
        mIsFirst = !mIsFirst;
    }
}

剩下就是处理开关的滑动和点击

Down->Up, 点击事件.
Down->Move->Up,滑动事件

此处分Move小于一定距离也认为是点击,只有Move距离大于定值才认为是一个滑动事件组

@Override
public boolean onTouchEvent(MotionEvent event) {
    switch (event.getAction()) {
        case MotionEvent.ACTION_DOWN:
            //mLastX 是记录手指按下的点X坐标值
            //mStartX 表示的是当前滑动的起始点X坐标值
            mLastX = mStartX = event.getX();
            //2种情况
            //1, Down->Up,若是这个顺序,手指抬起时候,按照点击逻辑切换开关
            //2, Down->Move->Up,若是这个顺序, 手指抬起时候, 就按照滑动逻辑切换开关
            mIsEnableClick = true;
            break;
        case MotionEvent.ACTION_MOVE:
            float mEndX = event.getX();
            //滑动起始坐标与滑动后坐标值相减,得到手指移动距离
            float distanceX = mEndX - mStartX;
            //对手指移动距离进行累加,这个距离是圆心X轴坐标
            mSlidingDistance += distanceX;
            //判断左右两个临界值,不能超出左右侧边值
            if (mSlidingDistance < mHeight / 2) {
                mSlidingDistance = mHeight / 2;
            }
            if (mSlidingDistance >= mWidth - mHeight / 2) {
                mSlidingDistance = mWidth - mHeight / 2;
            }
            //重绘,到这一步,圆就随手指开始移动了
            invalidate();
            //手指按下坐标与滑动最后坐标差值
            float mMinDistanceX = Math.abs(mEndX - mLastX);
            //判断差值
            //1,如果差值大于8, 则认为是滑动, 如果用户松开按钮则按照滑动条件判断
            //1,如果差值小于8, 则认为是点击, 如果用户此时松开按钮则按照点击条件判断
            if (mMinDistanceX > 8) {
                mIsEnableClick = false;
            } else {
                mIsEnableClick = true;
            }
            //更新滑动X轴起始坐标,为下一次Move事件滑动做准备
            mStartX = event.getX();
            break;
        case MotionEvent.ACTION_UP:
            if (!mIsEnableClick) {
                //当判定为滑动时, 首先判断这次滑动累加的距离, 如果大于一半则开关取反
                if (mSlidingDistance >= mWidth / 2) {
                    mIsOpen = true;
                } else {
                    mIsOpen = false;
                }
                //设置好开关Flag,执行替换背景
                drawToggle();
            } else {
                mIsOpen = !mIsOpen;
                drawToggle();
            }
            break;
    }
    return true;
}
/**
 * 按钮重绘
 */
public void drawToggle() {
    if (mIsOpen) {
        //开
        mSlidingDistance = mWidth - mHeight / 2;
    } else {
        //关
        mSlidingDistance = mHeight / 2;
    }
    if (onClick != null) {
        onClick.click(mIsOpen);
    }
    invalidate();
}

项目地址

效果图