Android自定義View實(shí)現(xiàn)分段選擇按鈕的實(shí)現(xiàn)代碼
首先演示下效果,分段選擇按鈕,支持點(diǎn)擊和滑動(dòng)切換。
視圖繪制過程中,要執(zhí)行onMeasure
、onLayout
、onDraw
等方法,這也是自定義控件最常用到的幾個(gè)方法。
onMeasure
:測(cè)量視圖的大小,可以根據(jù)MeasureSpec的Mode確定父視圖和子視圖的大小。
onLayout
:確定視圖的位置
onDraw
:繪制視圖
這里就不做過多的介紹,主要介紹本控件涉及的到的部分。
1.1 獲取item大小、起始位置
@Override protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { super.onMeasure(widthMeasureSpec, heightMeasureSpec); if(isItemZero() || getMeasuredWidth() == 0) return; mHeight = getMeasuredHeight(); int width = getMeasuredWidth(); mItemWidth = (width - 2 * itemHorizontalMargin)/getCount(); mStart = itemHorizontalMargin + mItemWidth * selectedItem; mEnd = width - itemHorizontalMargin - mItemWidth; }
1.2 繪制
繪制背景,所有的Item,以及選中項(xiàng)
@Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); if(isItemZero()) return; drawBackgroundRect(canvas); drawUnselectedItemsText(canvas); drawSelectedItem(canvas); drawSelectedItemsText(canvas); }
* 繪制背景區(qū)域
背景區(qū)域就是個(gè)帶圓角的長(zhǎng)方形
/** * 畫背景區(qū)域 * @param canvas */ private void drawBackgroundRect(Canvas canvas) { float r = cornersMode == Round?cornersRadius: mHeight >> 1; mPaint.setXfermode(null); mPaint.setColor(backgroundColor); mRectF.set(0, 0, getWidth(), getHeight()); canvas.drawRoundRect(mRectF, r, r, mPaint); }
* 繪制所有未選中Item的文字
輪流繪制所有Item的文字
/** * 畫所有未選中Item的文字 * @param canvas */ private void drawUnselectedItemsText(Canvas canvas) { mTextPaint.setColor(textColor); mTextPaint.setXfermode(null); for (int i = 0; i< getCount(); i++){ int start = itemHorizontalMargin + i * mItemWidth; float x = start + (mItemWidth >> 1) - mTextPaint.measureText(getName(i))/2; float y = (getHeight() >> 1) - (mTextPaint.ascent() + mTextPaint.descent())/2; canvas.drawText(getName(i), x, y, mTextPaint); } }
* 繪制選中項(xiàng)
/** * 畫選中項(xiàng) * @param canvas */ private void drawSelectedItem(Canvas canvas) { float r = cornersMode == Round?cornersRadius: (mHeight >> 1) - itemVerticalMargin; mPaint.setColor(selectedItemBackgroundColor); mRectF.set(mStart, itemVerticalMargin, mStart + mItemWidth, getHeight() - itemVerticalMargin); canvas.drawRoundRect(mRectF, r, r, mPaint); }
* 繪制選中Item的文字
當(dāng)選中項(xiàng)移動(dòng)時(shí),剛移動(dòng)到下一個(gè)Item時(shí),顏色應(yīng)該是選中的顏色。這里在原來文字之上再畫選中Item的文字顏色,就有了被選中的效果。
/** * 畫選中Item的文字 * @param canvas */ private void drawSelectedItemsText(Canvas canvas) { canvas.saveLayer(mStart, 0, mStart + mItemWidth, getHeight(), null, Canvas.ALL_SAVE_FLAG); mTextPaint.setColor(selectedItemTextColor); mTextPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_OUT)); int begin = mStart/mItemWidth; int end = (begin + 2) < getCount()?begin+2:getCount(); for (int i = begin; i< end; i++){ int start = itemHorizontalMargin + i * mItemWidth; float x = start + (mItemWidth >> 1) - mTextPaint.measureText(getName(i))/2; float y = (getHeight() >> 1) - (mTextPaint.ascent() + mTextPaint.descent())/2; canvas.drawText(getName(i), x, y, mTextPaint); } canvas.restore(); }
1.3 添加手勢(shì)事件
手勢(shì)分為三種,ACTION_DOWN、ACTION_MOVE、ACTION_UP,對(duì)應(yīng)動(dòng)作就是按下,滑動(dòng),按起。
當(dāng)按下時(shí)確定按下位置,是在當(dāng)前Item,則不做處理,當(dāng)按下位置為其它Item位置,就滑動(dòng)到其它Item位置。
當(dāng)手勢(shì)滑動(dòng)時(shí),計(jì)算相對(duì)滑動(dòng)值,通過改變mStart
,改變選中項(xiàng)的位置。
當(dāng)手勢(shì)按起時(shí),根據(jù)按下位置、速度和方向,判斷是否可用移動(dòng)到下一個(gè)Item。
@Override public boolean onTouchEvent(MotionEvent event) { if(!isEnabled() || !isInTouchMode() || getCount() == 0) return false; if (mVelocityTracker == null) { mVelocityTracker = VelocityTracker.obtain(); } mVelocityTracker.addMovement(event); int action = event.getActionMasked(); if(action == MotionEvent.ACTION_DOWN){ x = event.getX(); onClickDownPosition = -1; final float y = event.getY(); if(isItemInside(x, y)){ return scrollSelectEnabled; }else if(isItemOutside(x, y)){ if(!mScroller.isFinished()){ mScroller.abortAnimation(); } onClickDownPosition = (int) ((x - itemHorizontalMargin)/ mItemWidth); startScroll(positionStart(x)); return true; } return false; }else if(action == MotionEvent.ACTION_MOVE){ if(!mScroller.isFinished() || !scrollSelectEnabled){ return true; } float dx = event.getX() - x; if(Math.abs(dx) > MIN_MOVE_X){ mStart = (int) (mStart + dx); mStart = Math.min(Math.max(mStart, itemHorizontalMargin), mEnd); postInvalidate(); x = event.getX(); } return true; }else if(action == MotionEvent.ACTION_UP){ int newSelectedItem; float offset = (mStart - itemHorizontalMargin)%mItemWidth; float itemStartPosition = (mStart - itemHorizontalMargin) * 1.0f/ mItemWidth; if(!mScroller.isFinished() && onClickDownPosition != -1){ newSelectedItem = onClickDownPosition; }else{ if(offset == 0f){ newSelectedItem = (int)itemStartPosition; }else { VelocityTracker velocityTracker = mVelocityTracker; velocityTracker.computeCurrentVelocity(VELOCITY_UNITS, mMaximumFlingVelocity); int initialVelocity = (int) velocityTracker.getXVelocity(); float itemRate = offset/mItemWidth; if (isXVelocityCanMoveNextItem(initialVelocity, itemRate)){ newSelectedItem = initialVelocity > 0?(int)itemStartPosition+1:(int)itemStartPosition; }else { newSelectedItem = Math.round(itemStartPosition); } newSelectedItem = Math.max(Math.min(newSelectedItem, getCount() - 1), 0); startScroll(getXByPosition(newSelectedItem)); } } onStateChange(newSelectedItem); mVelocityTracker = null; onClickDownPosition = -1; return true; } return super.onTouchEvent(event); }
1.4 保存狀態(tài)
當(dāng)手機(jī)屏幕方向轉(zhuǎn)換或者內(nèi)存不足等情況下, 視圖會(huì)重新加載,這樣就會(huì)導(dǎo)致狀態(tài)丟失。使用onSaveInstanceState
和onRestoreInstanceState
方法保存并恢復(fù)狀態(tài)。
@Override public Parcelable onSaveInstanceState() { Parcelable parcelable = super.onSaveInstanceState(); SelectedItemState pullToLoadState = new SelectedItemState(parcelable); pullToLoadState.setSelectedItem(selectedItem); return pullToLoadState; } @Override public void onRestoreInstanceState(Parcelable state) { if(!(state instanceof SelectedItemState)) return; SelectedItemState pullToLoadState = ((SelectedItemState)state); super.onRestoreInstanceState(pullToLoadState.getSuperState()); selectedItem = pullToLoadState.getSelectedItem(); invalidate(); }
想要學(xué)習(xí)的同學(xué),建議還是直接看項(xiàng)目源碼。項(xiàng)目源碼地址:https://github.com/danledian/SegmentedControl
到此這篇關(guān)于Android自定義View實(shí)現(xiàn)分段選擇按鈕的文章就介紹到這了,更多相關(guān)Android自定義View分段選擇按鈕內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
- canvas雪花效果核心代碼分享
- Canvas實(shí)現(xiàn)動(dòng)態(tài)的雪花效果
- jquery實(shí)現(xiàn)漫天雪花飛舞的圣誕祝福雪花效果代碼分享
- android自定義view實(shí)現(xiàn)圓周運(yùn)動(dòng)
- Android自定義view實(shí)現(xiàn)輸入框效果
- Android自定義View實(shí)現(xiàn)雪花特效
- Android自定義view之太極圖的實(shí)現(xiàn)教程
- Android自定義View圓形圖片控件代碼詳解
- Android自定義View實(shí)現(xiàn)跟隨手指移動(dòng)的小兔子
- Android自定義view實(shí)現(xiàn)倒計(jì)時(shí)控件
- Android如何用自定義View實(shí)現(xiàn)雪花效果
相關(guān)文章
Android圖表庫(kù)HelloChart繪制多折線圖
這篇文章主要為大家詳細(xì)介紹了Android圖表庫(kù)HelloChart繪制多折線圖,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-02-02Android獲取所在時(shí)區(qū)時(shí)間的兩種方式
Android獲取所在時(shí)區(qū)正確時(shí)間的方式有兩種,通過wifi獲取時(shí)間和通過通過GPS獲取時(shí)間這兩種方式,文中通過代碼示例給大家的介紹的非常詳細(xì),需要的朋友可以參考下2024-04-04仿ios狀態(tài)欄顏色和標(biāo)題欄顏色一致的實(shí)例代碼
下面小編就為大家分享一篇仿ios狀態(tài)欄顏色和標(biāo)題欄顏色一致的實(shí)例代碼,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-01-01Android SharedPreferences四種操作模式使用詳解
這篇文章主要介紹了Android SharedPreferences四種操作模式使用詳解的相關(guān)資料,這里介紹了獲取Android SharedPreferences的兩種方法及比較,和操作模式的介紹,需要的朋友可以參考下2017-07-07Android動(dòng)畫效果之自定義ViewGroup添加布局動(dòng)畫(五)
這篇文章主要介紹了Android動(dòng)畫效果之自定義ViewGroup添加布局動(dòng)畫,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-08-08詳解如何實(shí)現(xiàn)一個(gè)Kotlin函數(shù)類型
這篇文章主要為大家詳細(xì)介紹了如何實(shí)現(xiàn)一個(gè)Kotlin函數(shù)類型,文中的實(shí)現(xiàn)方法講解詳細(xì),具有一定的借鑒價(jià)值,需要的小伙伴可以跟隨小編一起學(xué)習(xí)一下2022-10-10