AndroID原生控件只有横向进度条一种，而且没法变换样式，比如原生rom的样子
很丑是吧，当伟大的产品设计要求更换前背景，甚至纵向，甚至圆弧状的，咋办，比如：
ok，我们开始吧：
一）变换前背景
先来看看progressbar的属性：
复制代码 代码如下:
<Progressbar
androID:ID="@+ID/progressbar"
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.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，这就是我们今天的主角了：
复制代码 代码如下:
<@R_309_3419@ 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>
</@R_309_3419@>
看到androID:ID="@androID:ID/progress"木有，看到androID:ID="@androID:ID/secondaryProgress"木有
把这个文件复制到自己工程下的drawable，就可以随心所欲的修改shape的属性，渐变，圆角等等
那么怎么放一个图片进去呢，ok，新建progress_horizontal1.xml：
复制代码 代码如下:
<?xml version="1.0" en@R_301_5563@="utf-8"?>
<@R_309_3419@ xmlns:androID="http://schemas.androID.com/apk/res/androID">
<item androID:ID="@androID:ID/progress" androID:drawable="@drawable/progressbar" />
</@R_309_3419@>
在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" en@R_301_5563@="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,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,marcPaint);
会根据mSweep的变化，画出相应长度的弧度来
根据与阈值的对比，还可以设定不同的 颜色：
复制代码 代码如下:@H_960_403@
if (mIncSpeedValue > mThreshold) {
marcPaint.setcolor(0xFFFF0000);
}
else {
marcPaint.setcolor(0xFF00B0F0);
}
calcSpeed通过一个步进来控制增量或减量，以使弧度自然过渡，减少跳跃
ok，大功告成。
以上是内存溢出为你收集整理的Android中自定义进度条详解全部内容，希望文章能够帮你解决Android中自定义进度条详解所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）