Android 사용자 정의 View 펼 칠 수 있 고 숨 쉴 수 있 는 버튼 구현

전문 적 으로 연습 하지 않 으 면 사용자 정의 View 지식 을 많이 잊 어 버 립 니 다.마침 새로운 프로젝트 에 이런 수요 가 있 으 니 다시 연습 해 보 세 요.코드 가 올 라 왔 습 니 다주소.

텍스트,텍스트 크기,색상 을 변경 할 수 있 습 니 다:

1.국제 관례 에 따라 attrs 를 새로 만 들 고 각종 필요 한 속성 을 쓴 다음 에 얻 을 수 있 습 니 다.각종 필요 한 Paint,Rect 를 새로 만 들 고 onMeasure 의 계산 너비 가 높 으 며 onDraw 그림 을 다시 쓰 는 것 입 니 다.
2.펼 칠 수 있 는 효과 에 대해 서 는 발 표를 클릭 할 때 ValueAnimator 를 시작 하여 원 각 사각형 의 왼쪽 거 리 를 계속 바 꾸 는 것 입 니 다.

int mBackgroundRectFLeft;
RectF mBackgroundRectF = new RectF();

@Override
protected void onDraw(Canvas canvas) {
 mBackgroundRectF.set(mBackgroundRectFLeft, 0, getWidth(), getHeight());
 canvas.drawRoundRect(mBackgroundRectF, mOuterRadius, mOuterRadius, mmBackgroundRectPaint);//      
}

private void openButton() {
 ValueAnimator rectLeftAnim = ValueAnimator.ofInt(mBackgroundRectFLeft, mArcWidth / 2);
 rectLeftAnim.setDuration(250);
 ValueAnimator textAlphaAnim = ValueAnimator.ofInt(0, mItemTextAlpha);
 textAlphaAnim.setDuration(120);
 rectLeftAnim.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
 @Override
 public void onAnimationUpdate(ValueAnimator animation) {
  mBackgroundRectFLeft = (int) animation.getAnimatedValue();
  invalidate();
 }
 });
}

3.호흡 효과 에 관 해 서 는 대외 동그라미 의 반지름 이 바 뀐 ValueAnimator 입 니 다.

mBreatheRadius = getHeight() / 2 - mArcWidth / 4;
mBreatheAnim = ValueAnimator.ofFloat(mBreatheRadius, mBreatheRadius - mArcWidth / 2);
mBreatheAnim.setDuration(1000);
mBreatheAnim.setRepeatMode(ValueAnimator.REVERSE);
mBreatheAnim.setRepeatCount(Integer.MAX_VALUE);
mBreatheAnim.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
 @Override
 public void onAnimationUpdate(ValueAnimator animation) {
 mBreatheRadius = (float) animation.getAnimatedValue();
 invalidate();
 }
});
mBreatheAnim.start();

@Override
protected void onDraw(Canvas canvas) {
 canvas.drawCircle(mInnerCircleCenterX, mInnerCircleCenterY, mBreatheRadius, mBreathePaint);//   

4.문자 의 위 치 를 가운데 로 계산 합 니 다.예전 에 저 는 Rect 를 사 용 했 습 니 다.

paint.getTextBounds(text, 0, text.length(), mTextRect);
int textWidth = mTextRect.width();
int textHeight = mTextRect.height();

이렇게 계산 하 는 것 이 정확 하지 않 습 니 다.되 돌아 오 는 너비 가 int 값 이기 때 문 일 수도 있 습 니 다.FontMetrics 류 로 계산 해 야 합 니 다.찾 아 보 세 요.

float buttonTextWidth = mButtonTextPaint.measureText(mButtonStr, 0, mButtonStr.length());

Paint.FontMetrics publishFontMetrics = mButtonTextPaint.getFontMetrics();
canvas.drawText(mButtonStr, 0, mButtonStr.length(), getWidth() - mOuterRadius - mArcWidth / 2 - buttonTextWidth / 2, mOuterRadius + mArcWidth / 2 + -(publishFontMetrics.ascent + publishFontMetrics.descent) / 2, mButtonTextPaint);

5.그리고 OnTouchEvent 의 처리 입 니 다.이 컨트롤 은 항상 전개 상태 가 아니 기 때문에 컨트롤 이 닫 힐 때 이 컨트롤 의 하층 컨트롤 이 클릭 에 영향 을 주지 않도록 요구 합 니 다.예 를 들 어 저 는 Expandable Breathng Button 입 니 다.하층 은 RecyclerView 이 고 Onitem ClickListener 를 설 치 했 습 니 다.그러면 이 단 추 는 닫 을 때 단 추 를 누 르 면 왼쪽 에 있 지만 이 View 범위 안에 있 습 니 다.아래 그림 의 빨간색 상자 와 같 습 니 다.

이 범위 내 에서 사건 을 처리 하지 않 아야 합 니 다.return false

@Override
public boolean onTouchEvent(MotionEvent event) {
 switch (event.getAction()) {
 case MotionEvent.ACTION_DOWN:
  x = (int) event.getX();
  y = (int) event.getY();
  if (!isOpen && x < getWidth() - 2 * mOuterRadius && y > 0 && y < getHeight()) {
  //      ，          ，     
  return false;
  }
  break;
 }
}

그리고 up 이벤트 에서 발표 단 추 를 눌 렀 는 지 펼 쳤 는 지 아 이 템 을 계산 합 니 다.클릭 한 좌 표 는 원 반지름 내 에 있 는 지 아 이 템 사각형 범위 내 에 있 는 지 계산 합 니 다.
마지막 소스 코드 드 립 니 다상세 주소
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.