非常普遍的ProgressBar进度条

不知不觉这已经是第51期了,在前面50期我们学了Android开发中使用频率非常高的一些UI组件,当然这些组件还不足够完成所有APP的开发,还会经常用到一些诸如进度条、拖动条、搜索框、时间和日期选择器等组件,那么后面几期就来一起学习这些高级组件。

一、ProgressBar系列组件

ProgressBar也是一组重要的组件,ProgressBar本身代表了进度条组件,它还派生了两个常用的组件:SeekBar和RatingBar。ProgressBar及其子类在用法上十分相似,只是显示界面有一定的区别,因此本节把它们归为一类,针对它们的共性集中讲解,并突出介绍它们的区别。

ProgressBar及其子类的类图如下图所示:

ProgressBar继承于View类,直接子类有AbsSeekBar和ContentLoadingProgressBar, 其中AbsSeekBar的子类有SeekBar和RatingBar,可见这二者是基于ProgressBar实现的。

二、ProgressBar基础

进度条也是UI界面中一种非常实用的组件,通常用于向用户显示某个耗时操作完成的百分比。

进度条可以动态地显示进度,因此避免长时间地执行某个耗时操作时,让用户感觉程序失去了响应,从而更好地提高用户界面的友好性。

Android支持多种风格的进度条,通过style属性可以为ProgressBar指定风格。该属性可支持如下几个属性值:

  • @android:style/Widget.ProgressBar.Horizontal:水平进度条。
  • @android:style/Widget.ProgressBar.Inverse:普通大小的环形进度条。
  • @android:style/Widget.ProgressBar.Large:大环形进度条。
  • @android:style/Widget.ProgressBar.Large.Inverse:大环形进度条。
  • @android:style/Widget.ProgressBar.Small:小环形进度条。
  • @android:style/Widget.ProgressBar.Small.Inverse:小环形进度条。

其实在Android开发中,ProgressBar的样式设定有两种方式,除了上面这种,还有一种可以通过如下方式使用:

  • ?android:attr/progressBarStyle
  • ?android:attr/progressBarStyleHorizontal
  • ?android:attr/progressBarStyleInverse
  • ?android:attr/progressBarStyleLarge
  • ?android:attr/progressBarStyleLargeInverse
  • ?android:attr/progressBarStyleSmall
  • ?android:attr/progressBarStyleSmallInverse
  • ?android:attr/progressBarStyleSmallTitle

除此之外,ProgressBar还支持如下常用XML属性:

  • android:max:进度条的最大值。
  • android:progress:进度条已完成进度值。
  • android:progressDrawable:设置轨道对应的Drawable对象。
  • android:indeterminate:如果设置成true,则进度条不精确显示进度。
  • android:indeterminateDrawable:设置不显示进度的进度条的Drawable对象。
  • android:indeterminateDuration:设置不精确显示进度的持续时间。
  • android:secondaryProgress:二级进度条,类似于视频播放的一条是当前播放进度,一条是缓冲进度。

其中android:progressDrawable用于指定进度条的轨道的绘制形式,该属性可指 定为一个LayerDrawable对象的引用。

ProgressBar提供了如下方法来操作进度:

  • getMax():返回这个进度条的范围的上限。
  • getProgress():返回进度。
  • getSecondaryProgress():返回次要进度。
  • incrementProgressBy(int diff):指定增加的进度。为正数时进度增加;为负数时进度减少。
  • isIndeterminate():指示进度条是否在不确定模式下。
  • setIndeterminate(boolean indeterminate):设置是否为不确定模式。

三、ProgressBar示例

接下来通过一个简单的示例程序来学习系统默认ProgressBar的使用。

从本期开始的高级UI组件部分使用新的模块来完成,可以参照初识ListView这期的创建方法,新建一个advancedviewsample模块。

这个示例用户界面非常简单,新建程序对应的布局文件activity_main.xml的代码如所示:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:layout_width="match_parent"
              android:layout_height="match_parent"
              android:orientation="vertical" >


    <!-- 系统提供的圆形进度条,依次是大中小 -->
    <ProgressBar
        style="@android:style/Widget.ProgressBar.Small"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

    <ProgressBar
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

    <ProgressBar
        style="@android:style/Widget.ProgressBar.Large"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />


    <!--系统提供的水平进度条-->
    <ProgressBar
        style="@android:style/Widget.ProgressBar.Horizontal"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:max="100"
        android:progress="18" />

    <ProgressBar
        style="@android:style/Widget.ProgressBar.Horizontal"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:indeterminate="true" />
</LinearLayout>

上面的界面布局文件中先定义了三个环形进度条,这种环形进度条无法显示进度,它只是显示一个不断旋转的图片。

布局文件的后面定义的两个水平进度条,第一个进度条有设置进度值;第二个进度条不精确显示进度。

程序其余地方不用修改,直接运行程序可以看到下图所示界面效果。

从上图发现,这些进度条都不是很美观,而且也没法显示具体进度值,这就需要开发者自定义ProgressBar了,我们下期再来一同学习。

原文发布于微信公众号 - 分享达人秀(ShareExpert)

原文发表时间:2017-08-31

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏hightopo

原 荐 WebGL 3D 电信机架实战之数据

24060
来自专栏练小习的专栏

关于margin-top的百分比值

周末朋友发出江湖救急的消息,说他有个莫名其妙的bug搞不定了,于是我让他把bug的代码发过来看看。 他的需求是绝对居中,代码是这样的 width:100px; ...

21790
来自专栏用户2442861的专栏

Markdown,你只需要掌握这几个

http://www.cnblogs.com/crazyant007/p/4220066.html

13710
来自专栏大壮

iOS 动画(理论篇)

17850
来自专栏hightopo

原 基于HTML5 Canvas 点击添加

16040
来自专栏IT派

Javascript 将 HTML 页面生成 PDF 并下载

最近碰到个需求,需要把当前页面生成 pdf,并下载。弄了几天,自己整理整理,记录下来,我觉得应该会有人需要 :)

32910
来自专栏前端小作坊

React diff 算法

React是facebook开发的一个用于UI开发的基础库。它自底向上重新设计了,为了实现高性能。在这篇文章中将展示React的diff算法是如何来优化你的ap...

15930
来自专栏Flutter入门

Flutter开发实战分析-animation_demo解析导读

以下代码基本参考于 flutter_gallery中的animation_demo示例。(可以结合本文看源码) 整体动画效果预览

99630
来自专栏Web项目聚集地

Javascript将HTML转成PDF并下载「支持多页」

由于html2canvas只能将它能处理的生成canvas image,因此渲染出来的结果并不是100%与原来一致。但它不需要服务器参与,整个图片都由客户端浏览...

43120
来自专栏偏前端工程师的驿站

语义化HTML:p、h1-6、q、blockquote、hr、address、code、pre、var、cite、dfn和samp

一、元素语义                         p标签   W3C草案: The p element represents a paragrap...

26450

扫码关注云+社区

领取腾讯云代金券