Android实现个性化的进度条

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实现个性化的进度条,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

时间: 2024-09-15 05:47:07

Android实现个性化的进度条的相关文章

Android学习笔记(24):进度条组件ProgressBar及其子类

ProgressBar作为进度条组件使用,它还派生了SeekBar(拖动条)和RatingBar(星级评分条).   ProgressBar支持的XML属性: Attribute Name Related Method Description style   设置ProgressBar指定风格 android:indeterminate   设置为true时,进度条不显示进度 android:indeterminateBehavior   indeterminate模式下,当进度条达到最大值时的

Android 动态改变SeekBar进度条颜色与滑块颜色的实例代码_Android

遇到个动态改变SeekBar进度条颜色与滑块颜色的需求,有的是根据不同进度改变成不同颜色. 对于这个怎么做呢?大家都知道设置下progressDrawable与thumb即可,但是这样设置好就是确定的了,要动态更改需要在代码里实现. 用shape进度条与滑块 SeekBar设置 代码里动态设置setProgressDrawable与setThumb 画图形,大家都比较熟悉,background是背景图,secondaryProgress第二进度条,progress进度条: <layer-list

android项目实现带进度条的系统通知栏消息_Android

我们在做Android开发的时候经常会遇到后台线程执行的比如说下载文件的时候,这个时候我们希望让客户能看到后台有操作进行,这时候我们就可以使用进度条,那么既然在后台运行,为的就是尽量不占用当前操作空间,用户可能还要进行其他操作,最好的方法就是在通知栏有个通知消息并且有个进度条.本文给一个例子工读者参考. 效果图如下: 主界面只有一个按钮就不上文件了 通知栏显示所用到的布局文件content_view.xml <?xml version="1.0" encoding="u

Android 实现自定义圆形进度条的功能_Android

Android 实现自定义圆形进度条:                 Android 自定义view,在大多数项目中根据客户需求及用户的体验度来说,都要重新写控件的来展示漂亮的界面,这里就对圆形进度条说下如何实现. 绘制自定义的圆形进度条,分为三个步骤,内圆.外圆.文字. 其中内圆和文字比较好绘制,进度条的变化是由外圆来控制的,所以核心就是绘制外圆. 首先定义分别定义这三个画笔,两个Paint和一个TextPaint mCirclePaint = new Paint(); mCirclePai

Android编程实现自定义进度条颜色的方法_Android

本文实例讲述了Android编程实现自定义进度条颜色的方法.分享给大家供大家参考,具体如下: android 自定义进度条颜色 先看图 基于产品经理各种自定义需求,经过查阅了解,下面是自己对android自定义进度条的学习过程! 这个没法了只能看源码了,还好下载了源码, sources\base\core\res\res\  下应有尽有,修改进度条颜色只能找progress ,因为是改变样式,首先找styles.xml 找到xml后,进去找到 <style name="Widget.Pro

Android中自定义水平进度条样式之黑色虚线_Android

以下内容给大家介绍Android中自定义水平进度条样式之黑色虚线,对代码实现方法感兴趣的朋友一起学习吧. 布局layout中使用: <ProgressBar android:id="@+id/progress_bar" style="?android:attr/progressBarStyleHorizontal" <!--必须设置为水平--> android:progressDrawable="@drawable/myprogress&

Android 动态改变SeekBar进度条颜色与滑块颜色的实例代码

遇到个动态改变SeekBar进度条颜色与滑块颜色的需求,有的是根据不同进度改变成不同颜色. 对于这个怎么做呢?大家都知道设置下progressDrawable与thumb即可,但是这样设置好就是确定的了,要动态更改需要在代码里实现. 用shape进度条与滑块 SeekBar设置 代码里动态设置setProgressDrawable与setThumb 画图形,大家都比较熟悉,background是背景图,secondaryProgress第二进度条,progress进度条: <layer-list

Android自定义多节点进度条显示的实现代码(附源码)

亲们里面的线段颜色和节点图标都是可以自定义的. 在没给大家分享实例代码之前,先给大家展示下效果图: main.xml <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/rl_parent" xmlns:tools="http://schemas.android.com/tools" android:layou

Android动态自定义圆形进度条

效果图: A.绘制圆环,圆弧,文本 //1.画圆环 //原点坐标 float circleX = width / 2; float circleY = width / 2; //半径 float radius = width / 2 - roundWidth / 2; //设置画笔的属性 paint.setColor(roundColor); paint.setStrokeWidth(roundWidth); paint.setStyle(Paint.Style.STROKE); canvas.