Android 사용자 정의 컨트롤 은 텍스트 와 숫자 가 있 는 원형 진도 바 를 실현 합 니 다.

본 논문 의 사례 는 안 드 로 이 드 가 원형 진 도 를 실현 하 는 구체 적 인 코드 를 공유 하여 여러분 께 참고 하 시기 바 랍 니 다.구체 적 인 내용 은 다음 과 같 습 니 다.
실 현 된 효과 도 는 다음 과 같다.


첫 번 째 단계:아래 에 구멍 이 있 는 중 공 원 을 그 려 외곽 의 큰 호 라 고 합 니 다.

anvas.clipRect(0, 0, mWidth, mHeight / 2 + radius - textHeight * 3 / 4);

두 번 째 단계:원호 진도 조 를 그 릴 때의 시작 각 도 를 계산 하고 외곽 큰 호의 왼쪽 끝 점 을 진도 로 설정 하 는 것 은 출발점 이 될 만 한 가치 가 있 습 니 다.스 캔 한 각도 가 외곽 큰 호 를 차지 하 는 백분율 은 바로 진도 값 입 니 다.
세 번 째 단계:숫자,문자,백분율 그리 기
STEP 4:Handler Runnable 과 DecelerateInterpolator 를 사용 하면 진도 표 와 숫자 가 움 직 입 니 다.
테스트 코드:

final CustomCircleBar circle=(CustomCircleBar)findViewById(R.id.win_home);
circle.setPercent(10);
circle.setCustomText("  ");
circle.setProgessColor(getResources().getColor(R.color.blue));
final Random random=new Random();
circle.setOnClickListener(new View.OnClickListener(){
 @Override
 public void onClick(View v){
 circle.setPercent(random.nextInt(100));
 }
});

완성 코드 는 다음 과 같 습 니 다:

public class CustomCircleBar extends View {
 private Context context;
 /**
 *    
 */
 private int percent;
 /**
 *    
 */
 private int mProgessColor;
 /**
 *        
 */
 private String mCustomText;
 /**
 *        
 */
 private Paint paintBar = new Paint();
 /**
 *        
 */
 private Paint paintText = new Paint();
 /**
 *        
 */
 private TypedValue typedValue;
 /**
 *       
 */
 DecelerateInterpolator mDecelerateInterpolator = new DecelerateInterpolator();
 /**
 *       
 */
 private int duration = 10;
 private int curTime = 0;
 public CustomCircleBar(Context context) {
 super(context);
 this.context=context;
 init();
 }
 
 public CustomCircleBar(Context context, AttributeSet attrs) {
 super(context, attrs);
 this.context=context;
 init();
 }
 
 public CustomCircleBar(Context context, AttributeSet attrs, int defStyleAttr) {
 super(context, attrs, defStyleAttr);
 this.context=context;
 init();
 }
 
 
 
 public void setPercent(int percent) {
 this.percent = percent;
 /*isShown()：Returns the visibility of this view and all of its ancestors*/
 if (isShown()) {
  /**
  *              
  */
  curTime=0;
  this.invalidate();
 }
 }
 
 public void setProgessColor(int mProgessColor) {
 this.mProgessColor = mProgessColor;
 if (isShown()) {
  this.invalidate();
 }
 }
 
 
 public void setCustomText(String mCustomText) {
 this.mCustomText = mCustomText;
 }
 
 private Handler mHandler = new Handler();
 private Runnable mAnimation = new Runnable() {
 @Override
 public void run() {
  if (curTime < duration) {
  curTime++;
  /**     ，  onDraw，onDraw    
   * mHandler.postDelayed(mAnimation, 20);     ，    
   *   20  ，  10 ，      200  
   */
  CustomCircleBar.this.invalidate();
  }
 }
 };
 
 private void init() {
 /**
  *      ，            
  */
 percent = 0;
 mProgessColor=Color.rgb(95,112,72);
 mCustomText="Home";
 typedValue=new TypedValue();
 context.getTheme().resolveAttribute(R.attr.maintextclor,typedValue,true);
 }
 
 
 
 @Override
 protected void onDraw(Canvas canvas) {
 super.onDraw(canvas);
 float mWidth = getWidth();
 float mHeight = getHeight();
 /**
  *            
  */
 /** Restores the paint to its default settings. */
 paintBar.reset();
 /**
  *     4   
  */
 paintBar.setStrokeWidth(4);
 /**
  *             
  */
 paintBar.setStyle(Paint.Style.STROKE);
 paintBar.setAntiAlias(true);
 paintBar.setColor(mProgessColor);
 /**
  *        ，           
  */
 paintBar.setAlpha(80);
 /**
  *            
  */
 paintText.setTextSize(20);
 paintText.setColor(getResources().getColor(typedValue.resourceId));
 paintText.setStyle(Paint.Style.STROKE);
 paintText.setAntiAlias(true);
 /**
  *          
  */
 paintText.setTextAlign(Paint.Align.CENTER);
 /**
  *       
  */
 Paint.FontMetrics fontMetrics = paintText.getFontMetrics();
 /**
  *       
  */
 float textHeight = fontMetrics.bottom - fontMetrics.top;
 /**
  *       
  */
 float radius = Math.min(mWidth, mHeight) / 2 - 10;
 /* ❑ save：    Canvas   。save  ，    Canvas   、  、  、  、     。
  ❑ restore：    Canvas       。  save  Canvas              。*/
 /*    ，     */
 canvas.save();
 /*clipRect：         ，            
   clipRect()   ，          ，           */
 canvas.clipRect(0, 0, mWidth, mHeight / 2 + radius - textHeight * 3 / 4);
 /*  clipRect   ，               */
 canvas.drawCircle(mWidth / 2, mHeight / 2, radius, paintBar);
 
 /**
  *       ，            
  */
 float theta_offset = (float) Math.acos((radius - textHeight / 2) / radius);
 /**
  *           
  */
 float theta_full = 360 - 2 * theta_offset;
 /**
  *             
  */
 float thetaProcess = mDecelerateInterpolator.getInterpolation(1.0f * curTime / duration) * percent * theta_full / 100;
 /**
  *             
  */
 paintBar.setAlpha(255);
 paintBar.setColor(mProgessColor);
 /**
  *          ，                 ，        ，        
  */
 canvas.drawArc(new RectF(mWidth / 2 - radius, mHeight / 2 - radius, mWidth / 2 + radius, mHeight / 2 + radius), theta_offset+90, thetaProcess, false, paintBar);
 /**
  *     
  */
 canvas.restore();
 /**
  *       
  */
 paintText.setTextSize(20);
 fontMetrics = paintText.getFontMetrics();
 float textBaseLineOffset = (fontMetrics.bottom - fontMetrics.top) / 2 - fontMetrics.bottom;
 canvas.drawText(mCustomText, mWidth / 2, mHeight / 2 + radius - textHeight / 2 + textBaseLineOffset, paintText);
 
 /**
  *      
  */
 paintText.setTextSize(mHeight * 1 / 8);
 fontMetrics = paintText.getFontMetrics();
 textBaseLineOffset = (fontMetrics.bottom - fontMetrics.top) / 2 - fontMetrics.bottom;
 canvas.drawText("%", mWidth / 2, mHeight / 2 + radius / 3 + textBaseLineOffset, paintText);
 
 /**
  *      
  */
 paintText.setTextSize(mHeight * 3 / 8);
 canvas.drawText("" + (int)(percent*mDecelerateInterpolator.getInterpolation(1.0f * curTime / duration)), mWidth / 2, mHeight / 2, paintText);
 /**
  * 20       
  */
 mHandler.postDelayed(mAnimation, 20);
 }
}

이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.