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(); }
項目地址
效果圖
以上就是本文的全部內容,希望對大傢的學習有所幫助,也希望大傢多多支持WalkonNet。
推薦閱讀:
- Android自定義view之太極圖的實現教程
- Android實現梯形TextView效果
- Android實現絢麗的自定義進度條
- android實現倒計時動態圈
- Android自定義View繪制貝塞爾曲線的方法