Android中自定义进度条详解
程序员文章站
2022-07-03 19:08:48
android原生控件只有横向进度条一种，而且没法变换样式，比如原生rom的样子
很丑是吧，当伟大的产品设计要求更换前背景，甚至纵向，甚至圆弧状的，咋办，比如：...
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，大功告成。