自定义View--圆形进度条&自定义属性的定义和使用

一、效果图

1. 设置圆形进度条，并在中间设置文本，实时更新数据，并设置进度条动态效果，效果图如下：
   

二、绘制圆环，圆弧，文本

1. 画圆环

1. canvas.drawCircle(cx, cy, radius, paint);其中，获取自身控件的尺寸，在 onMeasure() 方法中：width = this.getMeasuredWidth();

2. 画圆弧

1. canvas.drawArc(rectF,0,progress * 360 / max ,false,paint);;

2. 这里要注意两点：

   1. 画圆弧时，矩形参数的设置；举行是用来做内切椭圆的框框；
   2. 计算进度时，涉及到 两个 int 值间的运算；要注意60 / 100 = 0；要想获得真实值还是用 float 定义；

3. 画文本

1. 重点在于确定文本的坐标；以及文本的尺寸；勿忘设置笔的宽度为0

   String text = progress * 100 / max  + "%";
   //设置paint
   paint.setColor(textColor);
   paint.setTextSize(textSize);
   paint.setStrokeWidth(0);
   Rect rect = new Rect();//创建了一个矩形，此时矩形没有具体的宽度和高度
   paint.getTextBounds(text,0,text.length(),rect);//此时的矩形的宽度和高度即为整好包裹文本的矩形的宽高
   //获取左下顶点的坐标
   int x = width / 2 - rect.width() / 2;
   int y = width / 2 + rect.height() / 2;
   canvas.drawText(text,x,y,paint);
   

2. 自定义属性概念

   What？定义 > 可以在布局文件的标签中使用的属性。

   Why？通过布局的方式给视图对象指定特定的属性值, 而不用动态的在代码中设置。

   理解属性值的类型(format)

   1. reference 引用类型值 :@id/…
   2. color 颜色类型值 #ff00ff
   3. boolean 布尔类型值 true false
   4. dimension 尺寸类型值 dp / px /sp
   5. integer 整数类型值 weight progress max
   6. float 小数类型值 0.5f
   7. string 字符串类型值 “”
   8. 枚举类型值 ：水平/垂直

三、自定义属性使用

1. 定义属性并声明，

1. 在 values 目录下创建 attrs.xml。

   <declare-styleable name="RoundProgress">
   	<attr name="roundColor" format="color"></attr>
   	<attr name="roundProgressColor" format="color"></attr>
   	<attr name="textColor" format="color"></attr>
   	<attr name="roundWidth" format="dimension"></attr>
   	<attr name="textSize" format="dimension"></attr>
   </declare-styleable>
   

2. 引用属性

2. 在布局文件中引用当前应用的 名称空间
   这里的 app 可以换名称，就像 Android 等；

   xmlns:app="http://schemas.android.com/apk/res-auto"
   

3. 使用属性

3. 在自定义视图标签中使用自定义属性

   <com.example.p2p.util.RoundProgress
       android:layout_width="120dp"
       app:roundProgressColor="@android:color/holo_red_dark"
       app:textColor="@color/text_progress"
   

4. 代码中处理

4. 在自定义View类的构造方法中, 取出布局中的自定义属性值

   //1.得到所有自定义属性的数组
   TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.RoundProgress);
   //2.获取自定义属性的值, 如果没有指定取默认值；这里自定义的属性值还是要实例化的
   roundColor = typedArray.getColor(R.styleable.RoundProgress_roundColor, Color.RED);
   roundProgressColor = typedArray.getColor(R.styleable.RoundProgress_roundProgressColor, Color.GREEN);
   textColor = typedArray.getColor(R.styleable.RoundProgress_textColor, Color.GREEN);
   roundWidth = typedArray.getDimension(R.styleable.RoundProgress_roundWidth, UIUtils.dp2px(10));
   textSize = typedArray.getDimension(R.styleable.RoundProgress_textSize, UIUtils.dp2px(20));
   //3.释放资源数据
   typedArray.recycle();
   

5. 实现进度条充满动画

5. 让圆环进度"动起来"

   打开时，圆环会有一个从 0 到目标值 的填充；

   在初始化数据中：

   //获取数据中的进度值
   currentProress = Integer.parseInt(index.product.progress);
   //在分线程中，实现进度的动态变化
   new Thread(runnable).start();
   
   private Runnable runnable = new Runnable() {
       @Override
       public void run() {
           roundProHome.setMax(100);
           for (int i = 0; i < currentProress; i++) {
               roundProHome.setProgress(i + 1);
               SystemClock.sleep(20);
               //强制重绘
               //roundProHome.invalidate();//只有主线程才可以如此调用
               roundProHome.postInvalidate();//主线程、分线程都可以如此调用
           }
       }
   };
   

6. 声明：本博客根据尚硅谷项目实战: 硅谷金融.学习整理；