Android那些事儿_H5之家 - 中国HTML5教程资源分享第一站

Android那些事儿之自定义进度条

2012-05-08 21:59:33

标签：

原创作品，允许转载，转载时请务必以超链接形式标明文章原始出处、作者信息和本声明。否则将追究法律责任。

Android原生控件只有横向进度条一种，而且没法变换样式，比如原生rom的样子

很丑是吧，当伟大的产品设计要求更换前背景，甚至纵向，甚至圆弧状的，咋办，比如

ok，我们开始吧：

一）变换前背景

先来看看progressbar的属性：

根据style="?android:attr/progressBarStyleHorizontal"，我们找到源码中的style.xml

看到

木有，继续发掘源码，找到drawable下面的progress_horizontal.xml，这就是我们今天的主角了：

看到android:id="@android:id/progress"木有，看到android:id="@android:id/secondaryProgress"木有

把这个文件复制到自己工程下的drawable，就可以随心所欲的修改shape的属性，渐变，圆角等等

那么怎么放一个图片进去呢，ok，新建progress_horizontal1.xml：

在android:drawable中指定你处理好的图片

然后回到布局中

android:background="@drawable/progress_bg"指定背景

android:progressDrawable="@drawable/progress_horizontal1"前景使用上面的progress_horizontal1

ok，搞定

注意看，四角还是有圆倒角的，貌似是系统自己加上去的，总之我的图片里面是没有做这个倒角处理的

二）纵向进度条

还是得从源码入手，看回progress_horizontal.xml

为什么shape外面要包一层clip呢，官方文档解释是clipdrawable是可以自我复制的，来看看定义

android:clipOrientation有两个属性，默认为horizontal

android:gravity有两个属性，默认为left

那我们试试改成vertical和bottom会有什么效果，新建一个progress_vertical.xml，把源码progress_horizontal.xml的内容复制过来，这里去掉了secondaryProgress，修改了clip，shape的渐变中心centerY改为centerX

布局中android:progressDrawable="@drawable/progress_vertical"

ok，搞定，就是这么简单：

三）弧形bar

这个也许算不上是进度条，用的也不多，最多也就仪表盘用用，不然谁会把进度条整成圆弧的呢。好吧这个可不是改改源码就能搞定的，看代码

首先是一堆成员变量，两个Paint用来画圆弧一个前景一个背景，一个RectF圆弧就画在上面，然后是一些控制参数比如sweep圆弧扫过的角度，xy坐标等等

设置两个画笔，颜色，宽度，样式等等，BlurMaskFilter笔是边缘模糊效果，有几种，可以自己尝试

重写父类View的onSizeChanged，为的是自己根据布局中的大小做居中处理

重写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，大功告成

本文出自 “Android那些事儿” 博客，请务必保留此出处

kangear、ximen250、cbx51

5人

了这篇文章

类别：Andorid开发┆阅读(0)┆评论(0) ┆ 返回博主首页┆返回博客首页

上一篇 Android网络开发-请求队列下一篇 Android那些事儿之LBS定位