真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

成都創(chuàng)新互聯(lián)網(wǎng)站制作重慶分公司

Androidview自定義帶文字帶進度的控件

目標:自定義一個帶文字帶進度的控件,具體內(nèi)容如下

大余網(wǎng)站制作公司哪家好,找成都創(chuàng)新互聯(lián)公司!從網(wǎng)頁設計、網(wǎng)站建設、微信開發(fā)、APP開發(fā)、響應式網(wǎng)站等網(wǎng)站項目制作,到程序開發(fā),運營維護。成都創(chuàng)新互聯(lián)公司成立與2013年到現(xiàn)在10年的時間,我們擁有了豐富的建站經(jīng)驗和運維經(jīng)驗,來保證我們的工作的順利進行。專注于網(wǎng)站建設就選成都創(chuàng)新互聯(lián)公司。

效果圖:

Android view自定義帶文字帶進度的控件

不啰嗦先看東西:

Android view自定義帶文字帶進度的控件

步驟分析

提取自定義屬性

//提供對外暴露的屬性,如有不夠自己擴展
  
    
    
    
    
    
    
  

解析自定義屬性

private void initAttrs(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
    TypedArray typedArray = context.getTheme().obtainStyledAttributes(attrs, R.styleable.DescProgressView, defStyleAttr, R.style.Def_DescProgressViewStyle);
    int indexCount = typedArray.getIndexCount();
    for (int i = 0; i < indexCount; i++) {
      int attr = typedArray.getIndex(i);
      switch (attr) {
        case R.styleable.DescProgressView_dpv_text_normal_color:
          textNormalColor = typedArray.getColor(attr, Color.BLACK);
          break;
        case R.styleable.DescProgressView_dpv_text_seleced_color:
          textSelectedColor = typedArray.getColor(attr, Color.BLACK);
          break;
        case R.styleable.DescProgressView_dpv_text_size:
          dpvTextSize = typedArray.getDimensionPixelSize(attr, 0);
          break;
        case R.styleable.DescProgressView_dev_progress_bg_color:
          dpvProgressBgColor = typedArray.getColor(attr, Color.BLACK);
          break;
        case R.styleable.DescProgressView_dev_progress_small_circle_color:
          dpvSmallCicleColor = typedArray.getColor(attr, Color.BLACK);
          break;
        case R.styleable.DescProgressView_dev_progress_big_circle_color:
          dpvBigCircleColor = typedArray.getColor(attr, Color.BLACK);
          break;
      }
    }
    typedArray.recycle();
  }

測量UI圖的比例(包含圖標大小比例,位置比例)

//這里大家可以根據(jù)自己的習慣來,我習慣用view的尺寸當做參照,來約束界面的view,各有利弊,也可以暴露出屬性設置具體的dp值,根據(jù)比例的話,調(diào)整好比例后,所有的繪制內(nèi)容會統(tǒng)一約束
  private static final float SCALE_OF_PROGRESS_HEIGHT = 70.F / 120;
  private static final float SCALE_OF_TOP_AND_BOTTOM_PADDING = 10.F / 120;
  private static final float SCALE_OF_LEFT_AND_RIGHT_PADDING = 20.F / 120;
  private static final float SCALE_OF_TEXT_DESC_CONTAINER = 50.F / 120;
  private static final float SCALE_OF_BIG_CIRCLE_HEIGHT = 22.F / 120;
  private static final float SCALE_OF_SMALL_CIRCLE_HEIGHT = 16.F / 120;
  private static final float SCALE_OF_LINE_HEIGHT = 4.F / 120;
  private static final float DEF_VIEW_HEIGHT = 120.F;

提取繪制的各個元素的位置屬性坐標等

這個view的唯一要提前確定的就是文字的位置,文字的位置確定需要知道所有文字的長度,左右間距,計算出中間的白色間隔
代碼如下

 /**
   * 獲取文字在畫布中的位置
   */
  private void getDescTextRegonPoint() {
    for (int i = 0; i < descs.size(); i++) {
      Point textRegonPoint = new Point();
      int sumX = 0;
      //非常重要:計算各個文字在view中的具體坐標,體會下這個二級for循環(huán),子循環(huán)是確定每個描述文本的位置
      for (int j = 0; j < i; j++) {
        Point tempSum = allDescTextPoints.get(j);
        sumX += tempSum.x;
      }
      sumX += i * getTextDescSpace();
      textRegonPoint.x = sumX + leftAndRightPadding;
      textRegonPoint.y = dpViewHeight - topAndBottomPadding - textDescContainerHeight / 2;
      textPoints4Draw.add(textRegonPoint);
    }
  }
 /**
   * 獲取文字的間距
   *
   * @return 獲取文字的間距
   */
  private float getTextDescSpace() {
    float allDescWith = 0;
    for (Point tempDesc : allDescTextPoints) {
      allDescWith += tempDesc.x;
    }
    int textContainerW = (int) (dpViewWidth - leftAndRightPadding * 2 - allDescWith);
    if (descs != null && descs.size() > 1) {
      int spaceCount = descs.size() - 1;
      return textContainerW * 1.F / spaceCount;
    }
    return 0;
  }

繪制

我們在view測量確定了尺寸完畢之后,直接繪制即可

 @Override
  protected void onSizeChanged(int w, int h, int oldw, int oldh) {
  // 確定各個比例的大小
    super.onSizeChanged(w, h, oldw, oldh);
    dpViewHeight = h;
    dpViewWidth = w;
    progressContainerHeight = (int) (SCALE_OF_PROGRESS_HEIGHT * dpViewHeight);
    topAndBottomPadding = (int) (SCALE_OF_TOP_AND_BOTTOM_PADDING * dpViewHeight);
    leftAndRightPadding = (int) (SCALE_OF_LEFT_AND_RIGHT_PADDING * dpViewHeight);
    textDescContainerHeight = (int) (SCALE_OF_TEXT_DESC_CONTAINER * dpViewHeight);
    smallCircleRadio = (int) (SCALE_OF_SMALL_CIRCLE_HEIGHT * dpViewHeight / 2);
    bigCircleRadio = (int) (SCALE_OF_BIG_CIRCLE_HEIGHT * dpViewHeight / 2);
    lineHeight = (int) (SCALE_OF_LINE_HEIGHT * dpViewHeight);

    // 獲取各個部分所需要的約束坐標
    getDescTextWidthAndHeight();
    getDescTextRegonPoint();
    getBgLineRectF();
    getBgCirclePoints();
    getSelectedRectF();
    getColorFullRectF();
    getGrayRectF();
  }


@Override
 protected void onDraw(Canvas canvas) {
  super.onDraw(canvas);
  drawDescText(canvas);
  drawBgLine(canvas);
  drawSelectedLine(canvas);
  drawGrayRectF(canvas);
  drawSelectedCircles(canvas);
 }
//繪制部分的代碼就是canvas 的API的使用,沒有什么技術含量.
//最后暴露給外面設置數(shù)據(jù)的接口

public void setProgressDescs(List descs, int currentSelectPosition) {
  this.currentSelectPosition = currentSelectPosition;
  if (descs != null && descs.size() > 1) {
   this.descs.clear();
   this.descs.addAll(descs);
   this.allDescTextPoints.clear();
   invalidate();
  }
 }

源代碼下載地址https://github.com/GuoFeilong/DescPbView來個star就更好了謝謝!

以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助,也希望大家多多支持創(chuàng)新互聯(lián)。


分享文章:Androidview自定義帶文字帶進度的控件
本文地址:http://weahome.cn/article/gccosg.html

其他資訊

在線咨詢

微信咨詢

電話咨詢

028-86922220(工作日)

18980820575(7×24)

提交需求

返回頂部