首先演示下效果，分段選擇按鈕，支持點擊和滑動切換。
視圖繪製過程中，要執行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();
}
想要學習的同學，建議還是直接看項目源碼。項目源碼地址：https://github.com/danledian/SegmentedControl