Android自定义ProgressBar的样式

原创 2016年08月30日 19:15:31

ProgressBar简介

ProgressBar是Android开发中比较常用的一个UI控件,主要是用来显示任务执行的进度的,以及向用户表明任务正在执行中。
Android系统提供的ProgressBar的的样式主要分为两种:水平的进度条,环形进度条。
水平的进度条可以显示任务执行的进度(百分比),而环形进度条不能显示任务执行的进度,环形进度条只是用来向用户表明任务正在执行中。

自定义ProgressBar的样式

1.自定义水平进度条的样式

自定义水平进度条的样式是在系统提供的样式的基础上,通过自定义Drawable资源文件作为progressDrawable的属性值的方式,来实现水平进度条的自定义样式的。
如下:
在res/drawable目录下新建一个drawable资源文件,progress.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:id="@android:id/background"

        android:drawable="@color/progress_bg" />
    <item android:id="@android:id/secondaryProgress">
        <scale
            android:drawable="@color/secondary_progress"
            android:scaleWidth="100%" />
    </item>
    <item android:id="@android:id/progress">
        <scale
            android:drawable="@color/progress"
            android:scaleWidth="100%" />
    </item>
</layer-list>

在布局文件中使用:

<ProgressBar
       android:id="@+id/progressBar"
       style="@android:style/Widget.ProgressBar.Horizontal"
       android:layout_width="match_parent"
       android:layout_height="10dp"
       android:progressDrawable="@drawable/progress" />

第一个item定义的是进度条的背景,第二个item定义的是secondaryProgress的颜色,第三个item定义的是进度progress的颜色

注意:

定义progressDrawable的时候,必须要按照这个顺序(如果没有secondaryProgress可以去掉)来定义,并且secondaryProgress和progress定义drawable时都必须用< scale/>子项,否则进度条会一直显示满的状态。
在第代码中设置了进度:

progressBar=(ProgressBar) findViewById(R.id.progressBar);
progressBar.setProgress(40);
progressBar.setSecondaryProgress(60);

显示效果如下:

2.自定义环形进度条的样式
2.1通过自定义Drawable资源文件作为indeterminateDrawable的属性值,来实现自定义环形进度条的样式。
在res/drawable目录下新建一个Drawable资源文件 progress1.xml

<?xml version="1.0" encoding="utf-8"?>
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromDegrees="0"
    android:pivotX="50%"
    android:pivotY="50%"
    android:toDegrees="360">
    <shape
        android:innerRadiusRatio="3"
        android:shape="ring"
        android:thicknessRatio="20"
        android:useLevel="false">
        <gradient
            android:centerColor="#FFDC35"
            android:centerY="0.50"
            android:endColor="#CE0000"
            android:startColor="#FFFFFF"
            android:type="sweep"
            android:useLevel="false" />
    </shape>
</rotate>

在布局文件中使用:

 <ProgressBar
        style="@android:style/Widget.ProgressBar.Large"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:indeterminateDrawable="@drawable/progress1" />

显示效果如下:

也可以使用一张图片来自定义环形进度条的样式:
在res/drawable目录下新建一个Drawable资源文件 progress2.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <rotate
            android:drawable="@drawable/progress_icon"
            android:fromDegrees="0"
            android:pivotX="50%"
            android:pivotY="50%"
            android:toDegrees="360"></rotate>
    </item>
</layer-list>

在布局文件中使用:

<ProgressBar
        style="@android:style/Widget.ProgressBar.Large"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:indeterminateDrawable="@drawable/progress2" />

显示效果如下:

缺陷:

但是有一个缺点就是,这两种定义环形进度条的方式,都不能控制进度条旋转的速度。

3.使用动画实现环形进度条的效果
环形进度条无非就是一个加载动画,完全可以用一个动画来实现加载动画效果。
在res目录中新建一个anim目录,在anim目录中定义一个补间动画load_anim.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:interpolator="@android:anim/linear_interpolator">
    <rotate
        android:duration="1500"
        android:fromDegrees="0"
        android:pivotX="50%"
        android:pivotY="50%"
        android:repeatCount="-1"
        android:toDegrees="359"></rotate>
</set>

这里定义这个旋转动画要注意三点,

一个是android:interpolator=”@android:anim/linear_interpolator”
一个是android:toDegrees=”359” 不是360
一个是android:repeatCount=”-1”
这三点共同实现了无限旋转,没有停顿。

在布局文件定义一个ImageView,用来显示动画。

<ImageView
        android:id="@+id/progressBar"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_centerInParent="true"
        android:src="@drawable/progress_icon"></ImageView>

在程序中启动动画:

progressBar = (ImageView) findViewById(R.id.progressBar);
Animation animation = AnimationUtils.loadAnimation(this, R.anim.load_anim);
progressBar.startAnimation(animation);

这样也同样实现了一个加载动画的效果。
显示效果如下:

版权声明:本文为博主原创文章,未经博主允许不得转载。

Android 之LayerDrawable层叠样式layer-list及自定义颜色ProgressBar

前面一篇文章中简单实现了ProgressBar,http://blog.csdn.net/kiritor/article/details/8726267           但是对于我们来说系统的P...
  • kiritor
  • kiritor
  • 2013年03月27日 21:10
  • 7702

android开发步步为营之78:自定义样式ProgressBar

android开发过程中,系统控件那些自带的样式,一般是不满足项目需求,一般都需要自定义样式,ProgressBar作为显示进度控件,一般也是需要设计自己的样式的。本文给出一个自定义样式。     ...

Android简单自定义圆形和水平ProgressBar的样式

1、ProgressBar分为两种,我们能明确看到进度,不确定的就是不清楚、不确定一个操作需要多长时间来完成,这个时候就需要用的不确定的ProgressBar了。属性android:indetermi...

Android 自定义ProgressBar样式

首先,在activity_main中定义个一个ProgressBar 控件

Android:自定义ProgressBar的样式(背景色/一级、二级进度条颜色)

Android:自定义ProgressBar的样式(背景色/一级、二级进度条颜色)

android自定义ProgressBar 修改进度条样式 出现setProgress无效问题

在很多时候android系统提供的进度条样式是不足以满足我们的需求的,因此在大多数的时候,我们为了美观,亦或者为了实现自己的功能,需要在系统的基础上进行修改其样式,当然你也可以自己从头写一个,不过个人...

android中自定义ProgressBar水平样式

...progressBar

Android中自定义ProgressBar的样式

如果想快速获取水平进度条显示操作,直接进入第四步和第六步操作就可以了!! 首先可以去sdk中查看 sdk1\platforms\android-23\data\res\values,中的sty...

Android ProgressBar 自定义样式(七),仿真QQ聊天、网易新闻客户端加载图片Loading

先上图,有图有真相:     其实也很简单,也是用了一下投机取巧的方法,大家有更多的方法的话,可以和我交流一下。 xml布局文件如下: ...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Android自定义ProgressBar的样式
举报原因:
原因补充:

(最多只允许输入30个字)