国产探花免费观看_亚洲丰满少妇自慰呻吟_97日韩有码在线_资源在线日韩欧美_一区二区精品毛片,辰东完美世界有声小说,欢乐颂第一季,yy玄幻小说排行榜完本

首頁 > 系統 > Android > 正文

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

2019-10-22 18:23:20
字體:
來源:轉載
供稿:網友

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

效果圖:

Android,view,進度

不啰嗦先看東西:

Android,view,進度

步驟分析

提取自定義屬性

//提供對外暴露的屬性,如有不夠自己擴展  <declare-styleable name="DescProgressView">    <attr name="dpv_text_normal_color" format="color" />    <attr name="dpv_text_seleced_color" format="color" />    <attr name="dpv_text_size" format="dimension" />    <attr name="dev_progress_bg_color" format="color" />    <attr name="dev_progress_small_circle_color" format="color" />    <attr name="dev_progress_big_circle_color" format="color" />  </declare-styleable>

解析自定義屬性

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圖的比例(包含圖標大小比例,位置比例)

//這里大家可以根據自己的習慣來,我習慣用view的尺寸當做參照,來約束界面的view,各有利弊,也可以暴露出屬性設置具體的dp值,根據比例的話,調整好比例后,所有的繪制內容會統一約束  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循環,子循環是確定每個描述文本的位置      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的使用,沒有什么技術含量.//最后暴露給外面設置數據的接口public void setProgressDescs(List<String> 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就更好了謝謝!

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持VEVB武林網。


注:相關教程知識閱讀請移步到Android開發頻道。
發表評論 共有條評論
用戶名: 密碼:
驗證碼: 匿名發表
主站蜘蛛池模板: 精河县| 北流市| 大埔区| 广西| 金门县| 中卫市| 曲水县| 龙井市| 井陉县| 桐城市| 翁源县| 苗栗市| 沛县| 通化市| 宿州市| 台南县| 吉林市| 贵德县| 石门县| 房产| 搜索| 汉沽区| 五家渠市| 望城县| 安西县| 临安市| 夏津县| 台前县| 昆明市| 广水市| 林口县| 绍兴市| 晋江市| 嵊州市| 亚东县| 南乐县| 崇义县| 张掖市| 门头沟区| 西盟| 乌什县|