关闭

深入了解Android进度条——ProgressBar,SeekBar和RatingBar

标签: android进度条ProgressBarSeekBar
222人阅读 评论(0) 收藏 举报
分类:

Android常用的进度条有ProgressBar,SeekBar和RatingBar。ProgressBar继承于View类,直接子类有AbsSeekBar和ContentLoadingProgressBar,而SeekBar和RatingBar又是AbsSeekBar的子类,因此ProgressBar是RatingBar,SeekBar的父类。

一、ProgressBar

Android系统自带的ProgressBar有两种样式:水平(Horizontal)和圆,其中圆的又包括Large,Normal,Small等

下面我以 水平和Small圆为例,深入了解其实现的方式,按照系统的实现方式就可以很easy的实现自定义的进度条!!有木有点小小的鸡冻。。lets go!。

1.水平样式的ProgressBar

效果图

h

(1)ProgressBar的样式(style)设定其实有两种方式 :

<ProgressBar
 style="?android:attr/progressBarStyleHorizontal"或者style="@android:style/Widget.ProgressBar.Horizontal"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:id="@+id/progressBar" 
 android:layout_gravity="center_horizontal" 
 android:max="100"
 android:progress="20" 
 android:indeterminate="false"/>

关于?android:attr/和@android:style的对应关系如下

  • style=”?android:attr/progressBarStyleHorizontal”
  • style=”?android:attr/progressBarStyleInverse”
  • style=”?android:attr/progressBarStyleLarge”
  • style=”?android:attr/progressBarStyleLargeInverse”
  • style=”?android:attr/progressBarStyleSmall”
  • style=”?android:attr/progressBarStyleSmallInverse”
  • Widget.ProgressBar.Horizontal
  • Widget.ProgressBar.Small
  • Widget.ProgressBar.Large
  • Widget.ProgressBar.Inverse
  • Widget.ProgressBar.Small.Inverse
  • Widget.ProgressBar.Large.Inverse

(2)style/Widget.ProgressBar.Horizontal,样式定义的源码,此文件的位置(android-sdk\platforms\android-XX\data\res\values\)

 

<style name="Widget.ProgressBar.Horizontal">
 <item name="indeterminateOnly">false</item>
 <item name="progressDrawable">@drawable/progress_horizontal</item>
 <item name="indeterminateDrawable">@drawable/progress_indeterminate_horizontal</item>
 <item name="minHeight">20dip</item>
 <item name="maxHeight">20dip</item>
 <item name="mirrorForRtl">true</item>
 </style>

在这里要注意啦!!!有一个重要的属性——progressDrawable,此属性是用来定义ProgressBar显示的样式的(水平还是圆),下面我们来看看它所对应的文件progress_horizontal 此文件的位置(android-sdk\platforms\android-XX\data\res\drawable)

<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>

这里面有3个item,分别为:background、secondProgress、progress;background就是ProgressBar的背景色,progress就是ProgressBar的当前进度;secondProgresss就是ProgressBar的缓存进度(比如在看网络视频时候都会有一个缓存的进度条和一个播放的进度,在这里缓存的进度就可以是android:secondaryProgress,而播放进度就是android:progress,有了secondProgress,可以很方便定制ProgressBar。)

(3)此时,如果让你自定义一个水平的ProgressBar,这下有点思路了吧!就是模仿系统的progress_horizontal 文件,新建一个自己的my_progress_horizontal 文件,之后设置ProgressBar的android:progressDrawable属性,如下

<ProgressBar
 android:progressDrawable="@drawable/my_progress_horizontal" 
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:id="@+id/progressBar" 
 android:layout_gravity="center_horizontal" 
 android:max="100"
 android:progress="20" 
 android:indeterminate="false"/>

2.圆形的ProgressBar

效果图

c

同上的道理 我们直接定位到style/Widget.ProgressBar.Small,样式定义的源码,此文件的位置(android-sdk\platforms\android-XX\data\res\values\)

<style name="Widget.ProgressBar.Small">
 <item name="indeterminateDrawable">@drawable/progress_small_white</item>
 <item name="minWidth">16dip</item>
 <item name="maxWidth">16dip</item>
 <item name="minHeight">16dip</item>
 <item name="maxHeight">16dip</item>
 </style>

此时我们发现,它是通过指定indeterminateDrawable的属性值来实现的,而progress_small_white 就是一张简单的图片而已,并没有设置progressDrawable的属性值,

如果要自定义一个圆形的ProgressBar ,只需要设置ProgressBar 的indeterminateDrawable属性值就可以,它的值可以是一张图片,可以指定动画,也可以自定义颜色(shape)

例如:自定义一个动画progress_circle_loading.xml

<?xml version="1.0" encoding="UTF-8"?>
<animation-list android:oneshot="false" 
<item android:duration="100" android:drawable="@drawable/loading_1" />    
<item android:duration="100" android:drawable="@drawable/loading_2" /> 
<item android:duration="100" android:drawable="@drawable/loading_3" />  
<item android:duration="100" android:drawable="@drawable/loading_4" />   
</animation-list>
<style name="Widget.ProgressBar.Small">
 <item name="indeterminateDrawable">@drawable/progress_circle_loading</item>
 <item name="minWidth">16dip</item>
 <item name="maxWidth">16dip</item>
 <item name="minHeight">16dip</item>
 <item name="maxHeight">16dip</item>
 </style>

 

二、总结:至此,如何自定义ProgressBar应该明白了吧,SeekBar和RatingBar也是如此,说白了,就是通过修改进度条的属性值来实现自定义的,只要我们记住这几个属性值就可以了

1、ProgressBar的常用属性

android:max 设置该进度条的最大值
android:progress 设置该进度条的已完成进度值
android:progressDrawable 设置该进度条的轨道对应的Drawable对象(主要用来自定义ProgressBar水平样式)
android:indeterminate 该属性设为true,设置进度条不精确显示进度
android:indeterminateDrawable 设置绘制不显示进度的进度条的Drawable对象(主要用来自定义ProgressBar圆形样式)

 

2、SeekBar(有一个滑块)

除了继承ProgressBar的常用属性外还有如下常用属性

android:thumb:指定一个Drawable对象,该对象将作为自定义滑块,改变拖动条的滑块外观。

OnSeekBarChangeListener监听器。(监听器决定了它的只要应用场景,让程序能响应拖动条滑块位置的改变,如调节音量的进度条)

 

3、RatingBar(评分控件,应用场景不言而喻)

除了继承ProgressBar的常用属性外还有如下常用属性

android:rating 设置该星级评分条默认的星级
android:numStars 设置该星级评分条总共有多少个星级
android:stepSize 设置每次最少需要改变多少个星级
android:isIndicator 设置该星级评分条是否允许用户改变(true为不允许修改)

OnRatingBarChangeListener监听器。(为了让程序能响应星级评分的改变)

 

三、项目实战

了解以上内容后,趁热打铁,来点实战!!!

效果如下

Screenshot_2016-05-07-15-45-54

暂不支持git图片,我来简单描述一下

第一个进度条(带飞机的那个):实现可以手动拖拽飞机,并显示响应的进度

第二个进度条(带机器的那个):实现橘黄色的云朵围绕机器人转圈的效果

ps很简单的效果,本人口才有限,自己脑补一下

不要立即向下看!!自己要思考一下!!!想想实现的思路!!这点很重要!很重要!很重要!

 

u=1355912217,3585476702&fm=21&gp=0

 

我来简单描述一下思路:

第一个:很明显需要自定义一个SeekBar,样式是水平的

1.设置SeekBar的android:progressDrawable属性值=自定义的文件,用来修改水平展示的样式(参考上文ProgressBar的progressDrawable属性值)

2.设置SeekBar的android:thumb属性值 = 一张飞机的图片,用来实现自定义的滑块!

 

第二个

1.首先 进度条由两个控件组成,ProgressBar+ImageView(机器人),控件是叠加在一起的(放在一个相对布局里)

2.自定义ProgressBar,样式圆形:设置ProgressBar的android:indeterminateDrawable属性=一个转圈的动画


项目源码:点击打开链接

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:2622次
    • 积分:40
    • 等级:
    • 排名:千里之外
    • 原创:3篇
    • 转载:1篇
    • 译文:0篇
    • 评论:0条
    文章分类
    文章存档