自定义简单的ProgressBar

自学了Android这么长时间,一直没有怎么去接触自定义View,这段时间在一个简单的项目中需要用到一个的进度条来展示数据,于是想到了使用ProgressBar来实现,但是使用Android自带的ProgressBar样式比较难实现,于是决定自定义一个View来实现,同时也练习下自定义View的使用。写下来记录下,没怎么写过博文,格式比较乱,见谅!

这个ProgressBar是参考网上的一篇博客的代码修改而来的,因为暂时找不到原博文了,所以无法注明出处,如果有所不妥可以联系我进行删除或者注明。

下面进入正文,先展示下效果:

原博文是在中间添加了进度文字的显示,因为项目需求,我做了如下修改:

  1. 添加进度条圆角的设置
  2. 添加进度条渐变色的设定
  3. 添加温度的设定(其实就是将%改为了℃
  4. 将文字显示改到进度条末尾
  5. 添加是否显示文字

具体用法如下:

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
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
ProgressBar 是 Android 开发中常用的控件之一,它用于展示进度条。ProgressBar 的样式可以通过修改其属性或使用自定义样式来进行自定义。 下面是一个简单ProgressBar 自定义样式的示例: 1. 首先,在 `res/drawable` 目录下创建一个 XML 文件,例如 `custom_progress_bar.xml`。 ```xml <?xml version="1.0" encoding="utf-8"?> <layer-list xmlns:android="http://schemas.android.com/apk/res/android"> <item android:id="@android:id/background"> <shape> <corners android:radius="8dp"/> <solid android:color="#e0e0e0"/> </shape> </item> <item android:id="@android:id/progress"> <clip> <shape> <corners android:radius="8dp"/> <solid android:color="#00FF00"/> </shape> </clip> </item> </layer-list> ``` 2. 在布局文件中使用自定义ProgressBar 样式。 ```xml <ProgressBar android:id="@+id/progressBar" style="@android:style/Widget.ProgressBar.Horizontal" android:layout_width="match_parent" android:layout_height="wrap_content" android:progressDrawable="@drawable/custom_progress_bar" android:indeterminate="false" android:max="100" android:progress="50"/> ``` 在这个示例中,我们定义了一个自定义ProgressBar 样式 `custom_progress_bar.xml`,并在布局文件中使用了这个样式。通过设置 `android:progressDrawable` 属性为自定义的样式,我们可以实现自定义 ProgressBar 样式的效果。 这个示例中的自定义 ProgressBar 样式是一个分层列表,其中包含了两个项目: * `android:id="@android:id/background"`:用于设置 ProgressBar 的背景样式。 * `android:id="@android:id/progress"`:用于设置 ProgressBar 的进度样式。 在这个示例中,我们使用了圆角矩形来设置 ProgressBar 的形状,并使用了绿色的颜色来表示 ProgressBar 的进度。你可以根据自己的需要修改这些属性来实现自定义ProgressBar 样式。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值