自定義View實現分段選擇按鈕
阿新 • • 發佈：2020-12-30
首先演示下效果，專案原始碼地址：https://github.com/danledian/SegmentedControl
檢視繪製過程中，要執行onMeasure、onLayout、onDraw等方法，這也是自定義控制元件最常用到的幾個方法。
onMeasure：測量檢視的大小，可以根據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，以及選中項
@Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); if(isItemZero()) return; drawBackgroundRect(canvas); drawUnselectedItemsText(canvas); drawSelectedItem(canvas); drawSelectedItemsText(canvas); }
* 繪製背景區域
背景區域就是個帶圓角的長方形
/** * 畫背景區域 * @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);
}
}
* 繪製選中項
/**
* 畫選中項
* @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的文字
當選中項移動時，剛移動到下一個Item時，顏色應該是選中的顏色。這裡在原來文字之上再畫選中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 新增手勢事件
手勢分為三種，ACTION_DOWN、ACTION_MOVE、ACTION_UP，對應動作就是按下，滑動，按起。
當按下時確定按下位置，是在當前Item，則不做處理，當按下位置為其它Item位置，就滑動到其它Item位置。
當手勢滑動時，計算相對滑動值，通過改變mStart，改變選中項的位置。
當手勢按起時，根據按下位置、速度和方向，判斷是否可用移動到下一個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 儲存狀態
當手機螢幕方向轉換或者記憶體不足等情況下， 檢視會重新載入，這樣就會導致狀態丟失。使用onSaveInstanceState和onRestoreInstanceState方法儲存並恢復狀態。
@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();
}
想要學習的同學，建議還是直接看專案原始碼。