关闭

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

标签: android进度条ProgressBarSeekBar
287人阅读 评论(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
查看评论

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

Android常用的进度条有ProgressBar,SeekBar和RatingBar。ProgressBar继承于View类,直接子类有AbsSeekBar和ContentLoadingProgressBar,而SeekBar和RatingBar又是AbsSeekBar的子类,因此Progress...
  • baidujiangwei18
  • baidujiangwei18
  • 2016-05-07 23:08
  • 1416

Android中的两种进度条SeekBar和ProgressBar的简单理解

ProgressBar: 用户浏览网页的时候,中间肯定有个传输过程,所以用进度条让用户耐心等待。再比如在下载应用中,它也会有进度条显示下载进度。 ProgressDialog是继承自Android.app.ProgressDialog所设计的互动对话窗口,在应用时,必须新建Pro...
  • hanyuboke
  • hanyuboke
  • 2015-08-21 21:18
  • 2491

android 控件之ProgressBar实现双进度条(通常用于流媒体的缓冲区进度)

下面详细介绍ProgressBar 一、说明   在某些操作的进度中的可视指示器,为用户呈现操作的进度,还它有一个次要的进度条,用来显示中间进度,如在流媒体播放的缓冲区的进度。一个进度条也可不确定其进度。在不确定模式下,进度条显示循环动画。这种模式常用于应用程序使用任...
  • u014649337
  • u014649337
  • 2015-03-04 16:50
  • 1566

Android ProgressBar setProgressDrawable 设置无效问题

ProgressBar的背景设置xml时可以使用,但代码setProgressDrawable设置则无效。 layer-list如下:<?xml version="1.0" encoding="utf-8"?> <layer-list xm...
  • chenlove1
  • chenlove1
  • 2017-03-21 17:37
  • 1553

打造你自己的圆形或圆环形progressBar——圆形SeekBar演变圆形progressbar

转载请标明出处: http://blog.csdn.net/liuzg1220; 本文出自:【HugeBug的博客】 简介 上篇博客给大家分析了圆形SeekBar的案例,不了解的朋友请看上篇文章。这里在圆形SeekBar的基础上给大家演变出圆形的progressBar和圆环形的Progre...
  • liuzg1220
  • liuzg1220
  • 2016-08-15 16:00
  • 1948

progressBar与seekBar区别

一、ProgressBar进度条       在某项延续性工作的进展过程中为了不让用户觉得程序死掉了,需要有个活动的进度条,表示此过程正在进行中。 用户浏览网页的时候,中间肯定有个传输过程,所以用进度条让用户耐心等待。再比如在下载应...
  • zhouboyu
  • zhouboyu
  • 2016-04-17 03:26
  • 2114

android进度条(ProgressBar)实现动画效果

<ProgressBar android:id="@+id/pb_upload" android:indeterminate="false" android:indeterminateOnly="...
  • swd2lx
  • swd2lx
  • 2016-08-09 18:32
  • 2809

Android UI详解之SeekBar、ProgressBar和RatingBar

Android UI详解之SeekBar、ProgressBar和RatingBar      ***ProgressBar本身是一个进度条,他派生了两个子类SeekBar和RatingBar  Android中支持几种风格的进度条,通过Style属性指定...
  • UStory
  • UStory
  • 2015-01-09 15:59
  • 2008

Android 可拖动的进度条:SeekBar之简单使用

一、SeekBar的用处SeekBar是ProgressBar的扩展,是一个可以拖动的进度条,这样用户就可以通过拖动控制条来改变进度,就好像我们听音乐、看电影的前进与后退就是通过它来实现的。二、SeekBar的使用 如果我们想要实现对拖动的控制,就需要对该事件进行监听,Android系统提供了一个监...
  • danfengw
  • danfengw
  • 2015-09-06 08:54
  • 7595

Android——SeekBar(进度、音量大小的控件)

一、SeekBar 为ProgressBar的子类 二、SeekBar的主要方法和属性 (1) setMax   设置SeekBar的最大数值 (2) setProgress  设置SeekBar当前的数值 (3)setSecondaryProgress  设置...
  • yunwen3344
  • yunwen3344
  • 2014-12-18 16:13
  • 1636
    个人资料
    • 访问:3524次
    • 积分:50
    • 等级:
    • 排名:千里之外
    • 原创:3篇
    • 转载:1篇
    • 译文:0篇
    • 评论:0条
    文章分类
    文章存档