关闭

Android自定义ProgressBar的样式

标签: android自定义进度条
266人阅读 评论(0) 收藏 举报
分类:

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

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

0
0

猜你在找
【直播】机器学习&数据挖掘7周实训--韦玮
【套餐】系统集成项目管理工程师顺利通关--徐朋
【直播】3小时掌握Docker最佳实战-徐西宁
【套餐】机器学习系列套餐(算法+实战)--唐宇迪
【直播】计算机视觉原理及实战--屈教授
【套餐】微信订阅号+服务号Java版 v2.0--翟东平
【直播】机器学习之矩阵--黄博士
【套餐】微信订阅号+服务号Java版 v2.0--翟东平
【直播】机器学习之凸优化--马博士
【套餐】Javascript 设计模式实战--曾亮
查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:30557次
    • 积分:706
    • 等级:
    • 排名:千里之外
    • 原创:44篇
    • 转载:1篇
    • 译文:0篇
    • 评论:3条