Android 사용자 정의 컨트롤 진행 표시 버튼 만 들 기

최근 에 일부 응용 프로그램 이 파일 을 다운로드 할 때 진도 바 를 추가 로 팝 업 하지 않 고 다운로드 작업 을 시작 하 는 Button 을 사용 하여 파일 의 다운로드 진 도 를 직접 표시 하 는 것 을 보 았 습 니 다.배경 색 을 바 꾸 어 왼쪽 에서 오른쪽으로 추진 하여 전체 Button 을 채 울 때 까지 다운로드 작업 의 완성 을 의미 합 니 다.
이런 효 과 를 제외 하고 어떤 멋 진 영상 클 라 이언 트 도 볼 수 있다.본 영상 에 대응 하 는 버튼 에 이 버튼 에 테 두 리 를 그 리 는 효 과 를 추가 할 것 이다.4 개의 테 두 리 는 각각 25%의 진 도 를 나타 내 고 위 에서 시작 하 며 시계 방향 으로 최종 적 으로 왼쪽 까지 가면 100%의 진 도 를 나타 낸다.이런 효과 도 좋다.
자신 도 연 구 를 해 봤 습 니 다.사용자 정의 button 을 썼 습 니 다.다음은 효과 입 니 다. 
일반 충전 효과: 

테두리 그리 기 효과: 

사용자 정의 Button 의 주요 실현 은 Button 을 계승 하고 onDraw()방법 을 다시 쓰 는 것 입 니 다.채 우 는 효 과 는 상대 적 으로 간단 합 니 다.

 if(currentType == TYPE_FILL) {
      mPaint.setColor(getContext().getResources().getColor(R.color.green_yellow));
      mPaint.setAntiAlias(true);
      mPaint.setAlpha(128);
      mPaint.setStrokeWidth(1.0f);
      Rect rect = new Rect();
      //   Button   
      canvas.getClipBounds(rect);
      rect.left += getPaddingLeft();
      //                
      rect.top += getPaddingTop();
      rect.right = (rect.left - getPaddingLeft()) + (mProgress * getWidth() / 100) - getPaddingRight();
      rect.bottom -= getPaddingBottom();
      //         ，        
      canvas.drawRoundRect(new RectF(rect), 8.0f, 8.0f, mPaint);
    } 

       
묘사 효 과 는 실현 하기에 상대 적 으로 복잡 하 다.정확히 말 하면 번거롭다.

     else if(currentType == TYPE_STROKE) {
      //     
      mPaint.setAntiAlias(true);
      mPaint.setColor(getContext().getResources().getColor(R.color.green_yellow));
      mPaint.setAlpha(255);
      //  Button   
      Rect rect = new Rect();
      canvas.getClipBounds(rect);
      Paint paint1, paint2, paint3, paint4;
      //      ，        ，          ，                 ，     
      if(mProgress >= 0 && mProgress < 25) {
        paint1 = new Paint(mPaint);
        Rect temp = new Rect(rect.left + getPaddingLeft(),
            rect.top + getPaddingTop(),
            rect.left + mProgress * (getWidth() - getPaddingLeft() - getPaddingRight())
                / 25 - getPaddingRight(),
            rect.top + getPaddingTop() + 2);
        canvas.drawRect(temp, paint1);
      } else if(mProgress < 50) {
        paint1 = new Paint(mPaint);
        Rect rect1 = new Rect(rect.left + getPaddingLeft(),
            rect.top + getPaddingTop(), rect.right - getPaddingRight(),
            rect.top + getPaddingTop() + 2);
        canvas.drawRect(rect1, paint1);

        paint2 = new Paint(mPaint);
        Rect rect2 = new Rect(rect.right - getPaddingRight() - 2,
            rect.top + getPaddingTop(), rect.right - getPaddingRight(),
            rect.top + getPaddingTop() + (mProgress - 25) *
                (getHeight() - getPaddingTop() - getPaddingBottom()) / 25);
        canvas.drawRect(rect2, paint2);
      } else if(mProgress < 75) {
        paint1 = new Paint(mPaint);
        Rect rect1 = new Rect(rect.left + getPaddingLeft(),
            rect.top + getPaddingTop(), rect.right - getPaddingRight(),
            rect.top + getPaddingTop() + 2);
        canvas.drawRect(rect1, paint1);

        paint2 = new Paint(mPaint);
        Rect rect2 = new Rect(rect.right - getPaddingRight() - 2,
            rect.top + getPaddingTop(), rect.right - getPaddingRight(),
            rect.bottom - getPaddingBottom());
        canvas.drawRect(rect2, paint2);

        paint3 = new Paint(mPaint);
        Rect rect3 = new Rect(
            rect.right - getPaddingRight() - (mProgress - 50) *
                (getWidth() - getPaddingLeft() - getPaddingRight()) / 25,
            rect.bottom - getPaddingBottom() - 2,
            rect.right - getPaddingRight(),
            rect.bottom - getPaddingBottom());
        canvas.drawRect(rect3, paint3);
      } else if(mProgress <= 100) {
        paint1 = new Paint(mPaint);
        Rect rect1 = new Rect(
            rect.left + getPaddingLeft(),
            rect.top + getPaddingTop(), rect.right - getPaddingRight(),
            rect.top + getPaddingTop() + 2);
        canvas.drawRect(rect1, paint1);

        paint2 = new Paint(mPaint);
        Rect rect2 = new Rect(
            rect.right - getPaddingRight() - 2,
            rect.top + getPaddingTop(), rect.right - getPaddingRight(),
            rect.bottom - getPaddingBottom());
        canvas.drawRect(rect2, paint2);

        paint3 = new Paint(mPaint);
        Rect rect3 = new Rect(
            rect.left + getCompoundPaddingLeft(),
            rect.bottom - getPaddingBottom() - 2, rect.right - getPaddingRight(),
            rect.bottom - getPaddingRight());
        canvas.drawRect(rect3, paint3);

        paint4 = new Paint(mPaint);
        Rect rect4 = new Rect(
            rect.left + getCompoundPaddingLeft(),
            rect.bottom - getPaddingBottom() - (mProgress - 75) *
                (getHeight() - getPaddingTop() - getPaddingBottom()) / 25,
            rect.left + getPaddingLeft() + 2,
            rect.bottom - getPaddingBottom());
        canvas.drawRect(rect4, paint4);
      }
    } 

마지막 으로 슈퍼.onDraw(canvas)를 실행 하 십시오.
이렇게 하면 버튼 의 원래 내용 을 가리 지 않 고 채 우거 나 밑그림 을 맨 밑 에 그 릴 수 있 습 니 다.
그리고 진행 상황 을 업데이트 하 는 데 사용 할 API 를 추가 합 니 다. 

  public void updateProgress(int progress) {
    if(progress >= 0 && progress <= 100) {
      mProgress = progress;
      invalidate();
    } else if(progress < 0) {
      mProgress = 0;
      invalidate();
    } else if(progress > 100) {
      mProgress = 100;
      invalidate();
    }
  } 

데모 코드 가 github 에 올 라 왔 습 니 다https://github.com/YoungLeeForeverBoy/ProgressButton
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.