Android 사용자 정의 View 세그먼트 선택 단추 구현 코드

먼저 효 과 를 보 여 줍 니 다.세그먼트 선택 단 추 를 누 르 고 미끄럼 전환 을 지원 합 니 다.

보기 그리 기 과정 에서 실행onMeasure,onLayout,onDraw등 방법 도 사용자 정의 컨트롤 이 가장 많이 사용 하 는 몇 가지 방법 입 니 다.onMeasure:보기 의 크기 를 측정 하고 MeasureSpec 의 Mode 에 따라 부모 보기 와 하위 보기 의 크기 를 확인 할 수 있 습 니 다.onLayout:보기 의 위 치 를 확인 합 니 다.onDraw:보기 그리 기
여 기 는 너무 많은 소 개 를 하지 않 고 본 컨트롤 과 관련 된 부분 을 소개 합 니 다.
1.1 아 이 템 크기,시작 위치 가 져 오기

 @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 그리 기
배경,모든 항목,선택 항목 그리 기

 @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   
  * @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   
  * @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 제스처 이벤트 추가
제스처 는 세 가지 로 나 뉘 는데,ACTIONDOWN、ACTION_MOVE、ACTION_UP,대응 동작 은 누 르 고 미 끄 러 지 며 누 르 는 것 입 니 다.
눌 렀 을 때 눌 렀 던 위 치 를 확인 합 니 다.현재 Item 이면 처리 하지 않 습 니 다.눌 렀 던 위치 가 다른 Item 위치 이면 다른 Item 위치 로 미 끄 러 집 니 다.
제스처 가 미 끄 러 질 때 상대 적 으로 미 끄 러 지 는 값 을 계산 하고 변경mStart을 통 해 선택 한 항목 의 위 치 를 변경 합 니 다.
제스처 를 눌 렀 을 때 위치,속도,방향 에 따라 다음 아 이 템 으로 이동 할 수 있 는 지 여 부 를 판단 합 니 다.

 @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
안 드 로 이 드 사용자 정의 View 구현 세그먼트 선택 버튼 에 관 한 이 글 은 여기까지 소개 되 었 습 니 다.더 많은 안 드 로 이 드 사용자 정의 View 세그먼트 선택 버튼 내용 은 이전 글 을 검색 하거나 아래 에 있 는 관련 글 을 계속 찾 아 보 세 요.앞으로 많은 응원 부 탁 드 리 겠 습 니 다!