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

最新推荐文章于 2024-01-06 21:07:43 发布

liusaisaiV1

最新推荐文章于 2024-01-06 21:07:43 发布

阅读量323

点赞数

分类专栏： Android学习总结文章标签： android java canvas kotlin 前端

本文链接：https://blog.csdn.net/liusaisaiV1/article/details/106276667

版权

Android学习总结专栏收录该内容

57 篇文章 5 订阅

订阅专栏

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

一、效果图
二、绘制圆环，圆弧，文本
三、自定义属性使用

一、效果图

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

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

1. 画圆环

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

2. 画圆弧

canvas.drawArc(rectF,0,progress * 360 / max ,false,paint);;
这里要注意两点：
1. 画圆弧时，矩形参数的设置；举行是用来做内切椭圆的框框；
2. 计算进度时，涉及到 两个 int 值间的运算；要注意60 / 100 = 0；要想获得真实值还是用 float 定义；

3. 画文本

重点在于确定文本的坐标；以及文本的尺寸；勿忘设置笔的宽度为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);

自定义属性概念

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. 定义属性并声明，

在 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. 引用属性

在布局文件中引用当前应用的名称空间
这里的 app 可以换名称，就像 Android 等；
```
xmlns:app="http://schemas.android.com/apk/res-auto"
```

3. 使用属性

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

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

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. 实现进度条充满动画

让圆环进度"动起来"

打开时，圆环会有一个从 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();//主线程、分线程都可以如此调用
        }
    }
};