自学了Android这么长时间,一直没有怎么去接触自定义View,这段时间在一个简单的项目中需要用到一个的进度条来展示数据,于是想到了使用ProgressBar来实现,但是使用Android自带的ProgressBar样式比较难实现,于是决定自定义一个View来实现,同时也练习下自定义View的使用。写下来记录下,没怎么写过博文,格式比较乱,见谅!
这个ProgressBar是参考网上的一篇博客的代码修改而来的,因为暂时找不到原博文了,所以无法注明出处,如果有所不妥可以联系我进行删除或者注明。
下面进入正文,先展示下效果:
原博文是在中间添加了进度文字的显示,因为项目需求,我做了如下修改:
- 添加进度条圆角的设置
- 添加进度条渐变色的设定
- 添加温度的设定(
其实就是将%改为了℃) - 将文字显示改到进度条末尾
- 添加是否显示文字
具体用法如下:
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:progress="30"//已加载进度
app:progress_color="#ff3300"//已加载部分颜色(渐变色的开始色)
app:progress_height="12dp"//已加载部分的高度
app:background_color="#bbbbbb"//未加载部分的颜色
app:background_height="2dp"//未加载部分高度
app:showText="true"//是否显示文字
app:progress_radius="true"//是否显示圆角
app:isGradient="true"//是否显示渐变
app:end_color="#ff9900"//渐变的结束色
app:text_size="20sp"//文本大小
app:isTemperature="true"//是否设置为温度
app:maxValue="50"//最大进度
接下来讲讲我做的修改吧,其实整个过程不难,毕竟是在原有基础上进行修改的。修改过程中,主要是对绘制的位置进行了调整。
设置圆角:主要是需要注意r的设置,因为经过测试我发现,在画直线的时候,是没有将圆角的宽度计算在内的,因此要设置一个偏差值,在不设置圆角时为0,设置圆角时我们需要设置为进度条部分高度的二分之一(半圆),否则后续画线的时候为产生误差,出现已加载部分和未加载部分重叠的情况。
//直线为圆角时的偏差值
int r = 0;
if (isRadius) {
//设置直线末端为圆角
mPaint.setStrokeCap(Paint.Cap.ROUND);
//圆角的宽度
r = mProgressHeight/2;
}
设置渐变:因为之前实在是没有自己尝试自定义view,因此对如何绘制渐变也是花了不少时间去谷歌,,,反省。绘制渐变的过程中主要是要确定渐变的开始位置和结束位置,其实就是已加载部分的开始位置和结束位置(注意:此时是不需要r这个偏差值的,其实很容易理解,我们设置这个偏差值是因为绘制直线没有将圆角计算在内,但是直线长度是不变的,只是直线绘制的开始位置需要加r,结束位置减r)。
//直线是否为渐变色
if (isGradient){
//设置线性渐变,开始位置和结束位置于进度条相同
Shader shader = new LinearGradient(getPaddingLeft(), mH