Android自定義開關(guān)按鈕源碼解析

更新時(shí)間：2021年08月25日 11:41:43 作者：碧云天丶

這篇文章主要為大家詳細(xì)解析了Android自定義開關(guān)源碼，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了Android自定義開關(guān)的具體代碼，供大家參考，具體內(nèi)容如下

以 ToggleColorY 為例分析, ToggleImageY邏輯代碼差不多

初始化參數(shù)

獲取背景顏色,按鈕顏色,開關(guān)狀態(tài)

@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設(shè)置只繪制圖形內(nèi)容
//    Paint.Style.STROKE設(shè)置只繪制圖形的邊
//    Paint.Style.FILL_AND_STROKE設(shè)置都繪制
private void initPaint() {
    //開關(guān) 開背景
    mOpenBGPaint = new Paint();
    mOpenBGPaint.setAntiAlias(true);
    mOpenBGPaint.setStyle(Paint.Style.FILL_AND_STROKE);
    mOpenBGPaint.setColor(mOpenBGColor);
    //開關(guān) 關(guān)背景
    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();
    //關(guān) RectF
    mRectFClose = new RectF();
}

在 onLayout 時(shí)獲取整個(gè)控件寬高,并且設(shè)置 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);
}

繪制開關(guān)初始狀態(tài)以及滑動(dòng)按鈕得初始狀態(tài)

@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    //開關(guān)初始狀態(tài)
    if (mIsOpen) {
        canvas.drawRoundRect(mRectFOpen, mHeight / 2, mHeight / 2, mOpenBGPaint);//開
    } else {
        canvas.drawRoundRect(mRectFClose, mHeight / 2, mHeight / 2, mCloseBGPaint);//關(guān)
    }
    firstDraw();
    //繪制滑動(dòng)按鈕
    canvas.drawCircle(mSlidingDistance, mHeight / 2, mHeight / 2, mTouchPaint);
}
/**
 * 根據(jù)開關(guān)初始狀態(tài)設(shè)置滑動(dòng)按鈕位置
 */
private void firstDraw() {
    if (!mIsFirst) {
        if (mIsOpen) {
            mSlidingDistance = mWidth - mHeight / 2;
        } else {
            mSlidingDistance = mHeight / 2;
        }
        mIsFirst = !mIsFirst;
    }
}

剩下就是處理開關(guān)的滑動(dòng)和點(diǎn)擊

Down->Up, 點(diǎn)擊事件.
Down->Move->Up,滑動(dòng)事件

此處分Move小于一定距離也認(rèn)為是點(diǎn)擊,只有Move距離大于定值才認(rèn)為是一個(gè)滑動(dòng)事件組

@Override
public boolean onTouchEvent(MotionEvent event) {
    switch (event.getAction()) {
        case MotionEvent.ACTION_DOWN:
            //mLastX 是記錄手指按下的點(diǎn)X坐標(biāo)值
            //mStartX 表示的是當(dāng)前滑動(dòng)的起始點(diǎn)X坐標(biāo)值
            mLastX = mStartX = event.getX();
            //2種情況
            //1, Down->Up,若是這個(gè)順序,手指抬起時(shí)候,按照點(diǎn)擊邏輯切換開關(guān)
            //2, Down->Move->Up,若是這個(gè)順序, 手指抬起時(shí)候, 就按照滑動(dòng)邏輯切換開關(guān)
            mIsEnableClick = true;
            break;
        case MotionEvent.ACTION_MOVE:
            float mEndX = event.getX();
            //滑動(dòng)起始坐標(biāo)與滑動(dòng)后坐標(biāo)值相減,得到手指移動(dòng)距離
            float distanceX = mEndX - mStartX;
            //對(duì)手指移動(dòng)距離進(jìn)行累加,這個(gè)距離是圓心X軸坐標(biāo)
            mSlidingDistance += distanceX;
            //判斷左右兩個(gè)臨界值,不能超出左右側(cè)邊值
            if (mSlidingDistance < mHeight / 2) {
                mSlidingDistance = mHeight / 2;
            }
            if (mSlidingDistance >= mWidth - mHeight / 2) {
                mSlidingDistance = mWidth - mHeight / 2;
            }
            //重繪,到這一步,圓就隨手指開始移動(dòng)了
            invalidate();
            //手指按下坐標(biāo)與滑動(dòng)最后坐標(biāo)差值
            float mMinDistanceX = Math.abs(mEndX - mLastX);
            //判斷差值
            //1,如果差值大于8, 則認(rèn)為是滑動(dòng), 如果用戶松開按鈕則按照滑動(dòng)條件判斷
            //1,如果差值小于8, 則認(rèn)為是點(diǎn)擊, 如果用戶此時(shí)松開按鈕則按照點(diǎn)擊條件判斷
            if (mMinDistanceX > 8) {
                mIsEnableClick = false;
            } else {
                mIsEnableClick = true;
            }
            //更新滑動(dòng)X軸起始坐標(biāo),為下一次Move事件滑動(dòng)做準(zhǔn)備
            mStartX = event.getX();
            break;
        case MotionEvent.ACTION_UP:
            if (!mIsEnableClick) {
                //當(dāng)判定為滑動(dòng)時(shí), 首先判斷這次滑動(dòng)累加的距離, 如果大于一半則開關(guān)取反
                if (mSlidingDistance >= mWidth / 2) {
                    mIsOpen = true;
                } else {
                    mIsOpen = false;
                }
                //設(shè)置好開關(guān)Flag,執(zhí)行替換背景
                drawToggle();
            } else {
                mIsOpen = !mIsOpen;
                drawToggle();
            }
            break;
    }
    return true;
}
/**
 * 按鈕重繪
 */
public void drawToggle() {
    if (mIsOpen) {
        //開
        mSlidingDistance = mWidth - mHeight / 2;
    } else {
        //關(guān)
        mSlidingDistance = mHeight / 2;
    }
    if (onClick != null) {
        onClick.click(mIsOpen);
    }
    invalidate();
}

項(xiàng)目地址

效果圖