Android中自定义进度条详解
作者：junjie 发布时间：2022-11-10 00:27:52
标签：Android,自定义进度条
Android原生控件只有横向进度条一种，而且没法变换样式，比如原生rom的样子
很丑是吧，当伟大的产品设计要求更换前背景，甚至纵向，甚至圆弧状的，咋办，比如：
ok，我们开始吧：
一）变换前背景
先来看看progressbar的属性：
<ProgressBar
android:id="@+id/progressBar"
style="?android:attr/progressBarStyleHorizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="5dip"
android:layout_toRightOf="@+id/progressBarV"
android:indeterminate="false"
android:padding="2dip"
android:progress="50" />
根据style="?android:attr/progressBarStyleHorizontal"，我们找到源码中的style.xml
<style name="Widget.ProgressBar.Horizontal">
<item name="android:indeterminateOnly">false</item>
<item name="android:progressDrawable">@android:drawable/progress_horizontal</item>
<item name="android:indeterminateDrawable">@android:drawable/progress_indeterminate_horizontal</item>
<item name="android:minHeight">20dip</item>
<item name="android:maxHeight">20dip</item>
</style>
看到：
<item name="android:progressDrawable">@android:drawable/progress_horizontal</item>
木有，继续发掘源码，找到drawable下面的progress_horizontal.xml，这就是我们今天的主角了：
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="@android:id/background">
<shape>
<corners android:radius="5dip" />
<gradient
android:startColor="#ff9d9e9d"
android:centerColor="#ff5a5d5a"
android:centerY="0.75"
android:endColor="#ff747674"
android:angle="270"
/>
</shape>
</item>
<item android:id="@android:id/secondaryProgress">
<clip>
<shape>
<corners android:radius="5dip" />
<gradient
android:startColor="#80ffd300"
android:centerColor="#80ffb600"
android:centerY="0.75"
android:endColor="#a0ffcb00"
android:angle="270"
/>
</shape>
</clip>
</item>
<item android:id="@android:id/progress">
<clip>
<shape>
<corners android:radius="5dip" />
<gradient
android:startColor="#ffffd300"
android:centerColor="#ffffb600"
android:centerY="0.75"
android:endColor="#ffffcb00"
android:angle="270"
/>
</shape>
</clip>
</item>
</layer-list>
看到android:id="@android:id/progress"木有，看到android:id="@android:id/secondaryProgress"木有
把这个文件复制到自己工程下的drawable，就可以随心所欲的修改shape的属性，渐变，圆角等等
那么怎么放一个图片进去呢，ok，新建progress_horizontal1.xml：
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="@android:id/progress" android:drawable="@drawable/progressbar" />
</layer-list>
在android:drawable中指定你处理好的图片
然后回到布局中：
<ProgressBar
android:id="@+id/progressBar1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@+id/progressBar"
android:layout_margin="5dip"
android:layout_toRightOf="@+id/progressBarV"
android:background="@drawable/progress_bg"
android:indeterminate="false"
android:indeterminateOnly="false"
android:maxHeight="20dip"
android:minHeight="20dip"
android:padding="2dip"
android:progress="50"
android:progressDrawable="@drawable/progress_horizontal1" />
android:background="@drawable/progress_bg"指定背景
android:progressDrawable="@drawable/progress_horizontal1"前景使用上面的progress_horizontal1
ok，搞定
注意看，四角还是有圆倒角的，貌似是系统自己加上去的，总之我的图片里面是没有做这个倒角处理的
二）纵向进度条
还是得从源码入手，看回progress_horizontal.xml
<item android:id="@android:id/progress">
<clip>
<shape>
<corners android:radius="5dip" />
<gradient
android:startColor="#ffffd300"
android:centerColor="#ffffb600"
android:centerY="0.75"
android:endColor="#ffffcb00"
android:angle="270"
/>
</shape>
</clip>
</item>
为什么shape外面要包一层clip呢，官方文档解释是clipdrawable是可以自我复制的，来看看定义
<?xml version="1.0" encoding="utf-8"?>
<clip
xmlns:android="http://schemas.android.com/apk/res/android"
android:drawable="@drawable/drawable_resource"
android:clipOrientation=["horizontal" | "vertical"]
android:gravity=["top" | "bottom" | "left" | "right" | "center_vertical" |
"fill_vertical" | "center_horizontal" | "fill_horizontal" |
"center" | "fill" | "clip_vertical" | "clip_horizontal"] />
android:clipOrientation有两个属性，默认为horizontal
android:gravity有两个属性，默认为left
那我们试试改成vertical和bottom会有什么效果，新建一个progress_vertical.xml，把源码progress_horizontal.xml的内容复制过来，这里去掉了secondaryProgress，修改了clip，shape的渐变中心centerY改为centerX
<item android:id="@android:id/progress">
<clip
android:clipOrientation="vertical"
android:gravity = "bottom">
<shape>
<corners android:radius="5dip" />
<gradient
android:startColor="#ffffd300"
android:centerColor="#ffffb600"
android:centerX="0.75"
android:endColor="#ffffcb00"
android:angle="90"
/>
</shape>
</clip>
</item>
布局中android:progressDrawable="@drawable/progress_vertical"
ok，搞定，就是这么简单：
三）弧形bar
这个也许算不上是进度条，用的也不多，最多也就仪表盘用用，不然谁会把进度条整成圆弧的呢。好吧这个可不是改改源码就能搞定的，看代码：
public class Arcs extends View {
private Paint mArcPaint;
private Paint mArcBGPaint;
private RectF mOval;
private float mSweep = 0;
private int mSpeedMax = 200;
private int mThreshold = 100;
private int mIncSpeedValue = 0;
private int mCurrentSpeedValue = 0;
private float mCenterX;
private float mCenterY;
private float mSpeedArcWidth;
private final float SPEED_VALUE_INC = 2;
..........
}
首先是一堆成员变量，两个Paint用来画圆弧一个前景一个背景，一个RectF圆弧就画在上面，然后是一些控制参数比如sweep圆弧扫过的角度，xy坐标等等。
mArcPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
mArcPaint.setStyle(Paint.Style.STROKE);
mArcPaint.setStrokeWidth(mSpeedArcWidth);
// mPaint.setStrokeCap(Paint.Cap.ROUND);
mArcPaint.setColor(0xff81ccd6);
BlurMaskFilter mBlur = new BlurMaskFilter(8, BlurMaskFilter.Blur.INNER);
mArcPaint.setMaskFilter(mBlur);
mArcBGPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
mArcBGPaint.setStyle(Paint.Style.STROKE);
mArcBGPaint.setStrokeWidth(mSpeedArcWidth+8);
mArcBGPaint.setColor(0xff171717);
BlurMaskFilter mBGBlur = new BlurMaskFilter(8, BlurMaskFilter.Blur.INNER);
mArcBGPaint.setMaskFilter(mBGBlur);
设置两个画笔，颜色，宽度，样式等等，BlurMaskFilter笔是边缘模糊效果，有几种，可以自己尝试。
@Override
protected void onSizeChanged(int w, int h, int ow, int oh) {
super.onSizeChanged(w, h, ow, oh);
Log.i("onSizeChanged w", w+"");
Log.i("onSizeChanged h", h+"");
mCenterX = w * 0.5f; // remember the center of the screen
mCenterY = h - mSpeedArcWidth;
mOval = new RectF(mCenterX - mCenterY, mSpeedArcWidth, mCenterX + mCenterY, mCenterY * 2);
}
重写父类View的onSizeChanged，为的是自己根据布局中的大小做居中处理
@Override
protected void onDraw(Canvas canvas) {
drawSpeed(canvas);
calcSpeed();
}
private void drawSpeed(Canvas canvas) {
canvas.drawArc(mOval, 179, 181, false, mArcBGPaint);
mSweep = (float) mIncSpeedValue / mSpeedMax * 180;
if (mIncSpeedValue > mThreshold) {
mArcPaint.setColor(0xFFFF0000);
}
else {
mArcPaint.setColor(0xFF00B0F0);
}
canvas.drawArc(mOval, 180, mSweep, false, mArcPaint);
}
private void calcSpeed() {
if (mIncSpeedValue < mCurrentSpeedValue) {
mIncSpeedValue += SPEED_VALUE_INC;
if (mIncSpeedValue > mCurrentSpeedValue) {
mIncSpeedValue = mCurrentSpeedValue;
}
invalidate();
}
else if (mIncSpeedValue > mCurrentSpeedValue) {
mIncSpeedValue -= SPEED_VALUE_INC;
if (mIncSpeedValue < mCurrentSpeedValue) {
mIncSpeedValue = mCurrentSpeedValue;
}
invalidate();
}
}
重写onDraw以便重绘canvas
drawSpeed里面
通过计算mSweep = (float) mIncSpeedValue / mSpeedMax * 180;
然后canvas.drawArc(mOval, 180, mSweep, false, mArcPaint);
会根据mSweep的变化，画出相应长度的弧度来
根据与阈值的对比，还可以设定不同的 颜色：
if (mIncSpeedValue > mThreshold) {
mArcPaint.setColor(0xFFFF0000);
}
else {
mArcPaint.setColor(0xFF00B0F0);
}
calcSpeed通过一个步进来控制增量或减量，以使弧度自然过渡，减少跳跃
ok，大功告成。
0
投稿猜你喜欢
- 新建一个表：create table abc(id int IDENTITY(1,1) NOT NULL,name nvarchar(100
- 简介Exchanger是一个用于线程间数据交换的工具类，它提供一个公共点，在这个公共点，两个线程可以交换彼此的数据。当一个线程调用excha
- Android Init进程对信号的处理流程在Android中，当一个进程退出（exit()）时，会向它的父进程发送一个SIGC
1 前言Java是近 10 年来计算机软件发展过程中的传奇，其在众多开发者心中的地位可谓“爱不释手”- 问题介绍：用二维数组表示一个迷宫，设置迷宫起点和终点，输出迷宫中的一条通路实现思路：二维数组表示迷宫：0表示路且未走过、1表示墙、2表示通路
- Monkey 是Android SDK提供的一个命令行工具， 可以简单，方便地运行在任何版本的Android模拟器和实体设备上。 Monke
- 加载资源文件比较常用的有两种：一、用ClassLoader，说到这里就不得不提一下ClassLoader的分类，java内置的ClassLo
- 电话号码的字母组合中等给定一个仅包含数字 2-9 的字符串，返回所有它能表示的字母组合。答案可以按 任意顺序 返回。给出数字到字母的映射如下
- 本文列举了几个方法： 1. 使用java.math.BigDecimal &n
- 写了一个可以扫描附近蓝牙设备的小Demo，可以查看蓝牙设备的设备名和Mac地址代码量不多，很容易看懂/** * 作者：叶应是叶 * 时间：2
- 本文实例讲述了C#检查键盘大小写锁定状态的方法。分享给大家供大家参考。具体分析如下：1、命名空间：using System.Runtime.
- 一、java方法重写方法的重写是子类根据需求对父类继承的方法进行重新的编写，在重写时，可以使用super方法的方式来保留父类中的方法，注意:
- 由于工作要求最近在使用GridView完成图片的批量上传功能，我的例子当中包含仿微信图片上传、拍照、本地选择、相片裁剪等功能，如果有需要的朋
- 1. 前言本节将对 Spring Security 中的密码编码进行一些探讨。2. 不推荐使用md5首先md5 不是加密算法，是哈希摘要。以
- NotificationManager 是状态栏通知的管理类，负责发通知、清除通知等操作。NotificationManager 是一个系统
- View绘制的三大流程，指的是measure（测量）、layout（布局）、draw（绘制） measure负责确定View的测量宽/高，也
- 前言Sharding-JDBC是ShardingSphere的第一个产品，也是ShardingSphere的前身。它定位为轻量级Java框架
- C# 的类型转换有显式转型 和 隐式转型 两种方式。显式转型：有可能引发异常、精确度丢失及其他问题的转换方式。需要使用手段进行转换操作。隐式
- 本文实例讲述了Java实现字符串解析为日期时间的方法。分享给大家供大家参考，具体如下：Java版本：1.8开始import java.tim
- 前言如果你想玩转C# 里面多线程，工厂模式，生产者/消费者,队列等高级操作，就可以和我一起探索这个强大的线程安全提供阻塞和限制功能的C#神器
