当前位置： 移动技术网 > 移动技术>移动开发>Android > Android实现个性化的进度条

Android实现个性化的进度条

2019年07月24日  | 移动技术网移动技术  | 我要评论

1.案例效果图

2.准备素材

progress1.png(78*78) progress2.png(78*78)

3.原理

采用一张图片作为progressbar的背景图片(一般采用颜色比较浅的)。另一张是进度条的图片(一般采用颜色比较深的图片)。进度在滚动时：进度图片逐步显示，背景图片逐步隐藏，达到上面的效果。

4.灵感来自android控件提供的源码

4.1 默认带进度的进度条，如下图

<progressbar
android:id="@+id/progressbar2"
style="@android:style/widget.progressbar.horizontal"
android:layout_width="268dp"
android:layout_height="wrap_content"
android:progress="45" />

注意：关键是style属性在起作用

4.2 找到样式定义的位置

鼠标放在style属性值上，按下ctrl键，出现超链接，点击超链接跳转到样式的定义位置

样式定义的内容如下

重点研究：

android:progressdrawable：进度条的样式

@android:drawable/progress_horizontal：样式定义的文件

在android-sdk-windows\platforms\android-14\data\res目下搜索progress_horizontal.xml文件，搜索结果如下：

打开progress_horizontal.xml文件，内容如下

<layer-listxmlns:android="http://schemas.android.com/apk/res/android"> 
<itemandroid:id="@android:id/background">
<shape>
<cornersandroid:radius="5dip"/>
<gradient
android:startcolor="#ff9d9e9d"
android:centercolor="#ff5a5d5a"
android:centery="0.75"
android:endcolor="#ff747674"
android:angle="270"
/>
</shape>
</item> 
<itemandroid:id="@android:id/secondaryprogress">
<clip>
<shape>
<cornersandroid:radius="5dip"/>
<gradient
android:startcolor="#80ffd300"
android:centercolor="#80ffb600"
android:centery="0.75"
android:endcolor="#a0ffcb00"
android:angle="270"
/>
</shape>
</clip>
</item> 
<itemandroid:id="@android:id/progress">
<clip>
<shape>
<cornersandroid:radius="5dip"/>
<gradient
android:startcolor="#ffffd300"
android:centercolor="#ffffb600"
android:centery="0.75"
android:endcolor="#ffffcb00"
android:angle="270"
/>
</shape>
</clip>
</item>
</layer-list>

释义：

<item android:id="@android:id/background">：定义进度条的背景样式

<item android:id="@android:id/secondaryprogress">：辅助进度条的样式

<item android:id="@android:id/progress">：进度条的样式

思考：如果我想做垂直进度条，怎么办了？

关键在clip元素的属性上做修改

<clip
android:cliporientation="vertical" 定义滚动的方向 vertical为垂直方向
android:drawable="@drawable/progress1" 定义进度的图片
android:gravity="bottom" > 定义进度的开始位置
</clip>

5.定义样式文件progress_vertical.xml

progress_vertical.xml文件代码如下

<?xmlversion="1.0"encoding="utf-8"?>
<layer-listxmlns:android="http://schemas.android.com/apk/res/android">
<itemandroid:id="@android:id/progress">
<clip
android:cliporientation="vertical"
android:drawable="@drawable/progress1"
android:gravity="bottom">
</clip>
</item>
</layer-list>

6.应用自定义的样式 

<button
android:id="@+id/btstart"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_margintop="150dp"
android:text="开始"/>
<progressbar
android:id="@+id/pbpic"
style="@android:style/widget.progressbar.horizontal"
android:layout_width="50dp"
android:layout_height="68dp"
android:background="@drawable/progress2"
android:max="100"
android:progress="0"
android:progressdrawable="@drawable/progress_vertical" /> <!-- 在此属性上应用 -->
<textview
android:id="@+id/txtprogress"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>

7.点击按钮模拟进度滚动的效果

publicclass progressactivity extends activity { 
progressbar pb = null;
textview txtprogress;
handler handler = new handler();
@override
publicvoid oncreate(bundle savedinstancestate) {
super.oncreate(savedinstancestate);
setcontentview(r.layout.main);
system.out.println("主题=" + gettheme() + "");
pb = (progressbar) findviewbyid(r.id.pbpic);
button btnstart = (button) findviewbyid(r.id.btstart);//按钮
txtprogress = (textview) findviewbyid(r.id.txtprogress);//显示进度
btnstart.setonclicklistener(new onclicklistener() {//按钮点击事件
publicvoid onclick(view v) {
new thread(new runnable() {//创建并启动线程，使用线程执行模拟的任务
publicvoid run() {
for (inti = 0; i < 100; i++) { //循环100遍
try {
handler.post(new runnable() { //更新界面的数据
publicvoid run() {
pb.incrementprogressby(1);//增加进度
txtprogress.settext(pb.getprogress() + "%");//显示完成的进度
}
});
thread.sleep(100);
} catch (interruptedexception e) {
}
}
}
}).start();
}
});
}
}

以上所述是小编给大家介绍的android实现个性化的进度条，希望对大家有所帮助

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网