Android 사용자 정의 View 수평 대역 디지털 백분율 진행 막대 구현

이 진도 조 는 실제 진 도 를 반영 할 수 있 고 백분율 의 문 자 를 완성 할 때 진도 가 증가 함 에 따라 이동 할 수 있 으 며 소재 위치 도 실제 완 성 된 백분율 위치 이 고 효 과 는 다음 과 같다.

사고방식 은 다음 과 같다.첫 번 째 부분 은 왼쪽 의 파란색 직선 으로 이미 완 성 된 진 도 를 대표 한다.두 번 째 부분 은 오른쪽 회색 의 직선 으로 미 완성 진 도 를 나타 낸다.세 번 째 부분 은 빨간색 백분율 의 숫자 백분율 텍스트 로 현재 의 정확 한 완성 진 도 를 표시 합 니 다.
가장 중요 한 부분 은 백분율 텍스트 의 정확 한 위 치 를 확인 하 는 것 입 니 다.여 기 는 paint 의 getTextBounds 방법 으로 텍스트 의 너비 와 높이 를 얻 은 다음 에 그 위 치 를 정확하게 확인 하 는 것 입 니 다.
view 코드 는 다음 과 같 습 니 다.

public class NumberProgressView extends View {
 
  /**
   *         （dp）
   */
  private int paintProgressWidth = 3;
 
  /**
   *           （sp）
   */
  private int paintTextSize = 20;
 
  /**
   *            
   */
  private int paintLeftColor = 0xff67aae4;
 
  /**
   *            
   */
  private int paintRightColor = 0xffaaaaaa;
 
  /**
   *         
   */
  private int paintTextColor = 0xffff0077;
 
  /**
   * Contxt
   */
  private Context context;
 
  /**
   *          0 - 100
   */
  private int progress;
 
  /**
   *           
   */
  private int viewWidth;
 
  /**
   *         Y    
   */
  private int viewCenterY;
 
  /**
   *             
   */
  private Paint paintleft = new Paint();
 
  /**
   *             
   */
  private Paint paintRight = new Paint();
 
  /**
   *             
   */
  private Paint paintText = new Paint();
 
  /**
   *         
   */
  private int textWidth;
 
  /**
   *          
   */
  private float textBottomY;
 
  /**
   *        
   */
  private Rect rect = new Rect();
 
  /**
   *          （  0% 100%         ）
   */
  private int totalMovedLength;
 
  public NumberProgressView(Context context, AttributeSet attrs) {
    super(context, attrs);
    this.context = context;
    //          
    initData();
  }
 
  /**
   *      
   */
  private void initData() {
 
    //          
    int paintProgressWidthPx = Utils.dip2px(context, paintProgressWidth);
 
    //          
    int paintTextSizePx = Utils.sp2px(context, paintTextSize);
 
    //            
    paintleft.setColor(paintLeftColor);
    paintleft.setStrokeWidth(paintProgressWidthPx);
    paintleft.setAntiAlias(true);
    paintleft.setStyle(Style.FILL);
 
    //            
    paintRight.setColor(paintRightColor);
    paintRight.setStrokeWidth(paintProgressWidthPx);
    paintRight.setAntiAlias(true);
    paintRight.setStyle(Style.FILL);
 
    //           
    paintText.setColor(paintTextColor);
    paintText.setTextSize(paintTextSizePx);
    paintText.setAntiAlias(true);
    paintText.setTypeface(Typeface.DEFAULT_BOLD);
 
  }
 
  @Override
  protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    super.onMeasure(widthMeasureSpec, heightMeasureSpec);
    getWidthAndHeight();
  }
 
  /**
   *               
   */
  private void getWidthAndHeight() {
 
    //            
    paintText.getTextBounds("000%", 0, "000%".length(), rect);
    textWidth = rect.width();
    textBottomY = viewCenterY + rect.height() / 2;
 
    //          
    int viewHeight = getMeasuredHeight();
    viewWidth = getMeasuredWidth();
    viewCenterY = viewHeight / 2;
    totalMovedLength = viewWidth - textWidth;
 
  }
 
  @Override
  protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
 
    //  float   
    float progressFloat = progress / 100.0f;
 
    //         
    float currentMovedLentgh = totalMovedLength * progressFloat;
 
    //           ，    Veiw        
    canvas.drawLine(0, viewCenterY, currentMovedLentgh, viewCenterY, paintleft);
 
    //          ，                     ，          ，              
    if (progress < 10) {
      canvas.drawLine(currentMovedLentgh + textWidth * 0.5f, viewCenterY, viewWidth, viewCenterY, paintRight);
    } else if (progress < 100) {
      canvas.drawLine(currentMovedLentgh + textWidth * 0.75f, viewCenterY, viewWidth, viewCenterY, paintRight);
    } else {
      canvas.drawLine(currentMovedLentgh + textWidth, viewCenterY, viewWidth, viewCenterY, paintRight);
    }
 
    //   (  ：      ，                ，        ，          )
    canvas.drawText(progress + "%", currentMovedLentgh, textBottomY, paintText);
  }
 
  /**
   * @param progress           
   */
  public void setProgress(int progress) {
    this.progress = progress;
    invalidate();
  }
}

호출 자 activity 코드,진도 바 의 진도 설정:

public class NumberProgressBarActivity extends Activity {
 
  protected static final int WHAT_INCREASE = 1;
  private NumberProgressView np_numberProgressBar;
  private int progress;
 
  private Handler handler = new Handler() {
    public void handleMessage(android.os.Message msg) {
      progress++;
      np_numberProgressBar.setProgress(progress);
      handler.sendEmptyMessageDelayed(WHAT_INCREASE, getRadomNumber(50, 200));
      if (progress >= 100) {
        handler.removeMessages(WHAT_INCREASE);
      }
    }
  };
 
  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_number_progress_bar);
    np_numberProgressBar = (NumberProgressView) findViewById(R.id.np_numberProgressBar);
    Button btn_numberProgressBar = (Button) findViewById(R.id.btn_numberProgressBar);
    btn_numberProgressBar.setOnClickListener(new OnClickListener() {
      @Override
      public void onClick(View v) {
        increase();
      }
    });
  }
 
  private void increase() {
    progress = 0;
    np_numberProgressBar.setProgress(0);
    handler.removeMessages(WHAT_INCREASE);
    handler.sendEmptyMessage(WHAT_INCREASE);
  }
 
  /**
   *               
   *
   * @param start     
   * @param end      
   * @return
   */
  public int getRadomNumber(int start, int end) {
    return (int) (start + Math.random() * (end - start));
  }
}

도구 방법:

/**
   *  dip dp    px ，        
   */
  public static int dip2px(Context context, float dipValue) {
    final float scale = context.getResources().getDisplayMetrics().density;
    return (int) (dipValue * scale + 0.5f);
  }
 
  /**
   *  sp    px ，        
   */
  public static int sp2px(Context context, float spValue) {
    final float fontScale = context.getResources().getDisplayMetrics().scaledDensity;
    return (int) (spValue * fontScale + 0.5f);
  }

레이아웃:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
       android:layout_width="match_parent"
       android:layout_height="match_parent"
       android:orientation="vertical">
 
  <com.example.viewdemo.view.NumberProgressView
    android:id="@+id/np_numberProgressBar"
    android:layout_width="wrap_content"
    android:layout_height="100dp"
    android:layout_margin="20dp"
    android:background="#33890075"
    />
 
  <Button
    android:id="@+id/btn_numberProgressBar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="  "/>
 
</LinearLayout>

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