自定义ProgressBar（一）

ProgressBar是一个非常重要组件。通常用于向用户显示耗时操作完成的百分比。主要包括水平和圆形两种类型。讲解之前首先来讲一下样式属性设置，这个在自定义里面是核心部分。
　　本文主要介绍ProgressBar的属性里面的　progressDrawable　和　indeterminateDrawable

一、常用属性

（一）关于style属性设置：安卓支持几种风格的进度条，通过style属性可以为ProgressBar设置指定风格，该属性可支持如下几个属性值：
  1. 安卓styles.xml里面的 8个，这8个兼容不同系统版本，一般都用这些style样式用的多
属性值 属性的含义
style="@android:style/Widget.ProgressBar"
style="@android:style/Widget.ProgressBar.Large" 大环形进度条
style="@android:style/Widget.ProgressBar.Small" 小环形进度条
style="@android:style/Widget.ProgressBar.Inverse" 普通大小的环形进度条
style="@android:style/Widget.ProgressBar.Large.Inverse" 大环形进度条
style="@android:style/Widget.ProgressBar.Small.Inverse" 小环形进度条
style="@android:style/Widget.ProgressBar.Small.Title" 标题栏环形进度条
style="@android:style/Widget.ProgressBar.Horizontal" 水平进度条 
<style name="Widget.ProgressBar">
    <item name="indeterminateOnly">true</item>
    <item name="indeterminateDrawable">@drawable/progress_medium_white</item>
    <item name="indeterminateBehavior">repeat</item>
    <item name="indeterminateDuration">3500</item>
    <item name="minWidth">48dip</item>
    <item name="maxWidth">48dip</item>
    <item name="minHeight">48dip</item>
    <item name="maxHeight">48dip</item>
    <item name="mirrorForRtl">false</item>
</style>

<style name="Widget.ProgressBar.Large">
    <item name="indeterminateDrawable">@drawable/progress_large_white</item>
    <item name="minWidth">76dip</item>
    <item name="maxWidth">76dip</item>
    <item name="minHeight">76dip</item>
    <item name="maxHeight">76dip</item>
</style>

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

<style name="Widget.ProgressBar.Inverse">
    <item name="indeterminateDrawable">@drawable/progress_medium</item>
</style>

<style name="Widget.ProgressBar.Large.Inverse">
    <item name="indeterminateDrawable">@drawable/progress_large</item>
</style>

<style name="Widget.ProgressBar.Small.Inverse">
    <item name="indeterminateDrawable">@drawable/progress_small</item>
</style>

<style name="Widget.ProgressBar.Small.Title">
    <item name="indeterminateDrawable">@drawable/progress_small_titlebar</item>
</style>

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

2.styles_holo.xml里面的 16个，其中Widget.Holo.开头的有8个，Widget.Holo.Light.开头的有8个

----------------------------------------------- Widget.Holo.开头的 ------------------------------------------------------

<style name="Widget.Holo.ProgressBar" parent="Widget.ProgressBar">
    <item name="indeterminateDrawable">@drawable/progress_medium_holo</item>
</style>

<style name="Widget.Holo.ProgressBar.Horizontal" parent="Widget.ProgressBar.Horizontal">
    <item name="progressDrawable">@drawable/progress_horizontal_holo_dark</item>
    <item name="indeterminateDrawable">@drawable/progress_indeterminate_horizontal_holo</item>
    <item name="minHeight">16dip</item>
    <item name="maxHeight">16dip</item>
</style>

<style name="Widget.Holo.ProgressBar.Small" parent="Widget.ProgressBar.Small">
    <item name="indeterminateDrawable">@drawable/progress_small_holo</item>
</style>

<style name="Widget.Holo.ProgressBar.Small.Title" />

<style name="Widget.Holo.ProgressBar.Large" parent="Widget.ProgressBar.Large">
    <item name="indeterminateDrawable">@drawable/progress_large_holo</item>
</style>

<style name="Widget.Holo.ProgressBar.Inverse" />

<style name="Widget.Holo.ProgressBar.Small.Inverse" />

<style name="Widget.Holo.ProgressBar.Large.Inverse" />

--------------------------------------------- Widget.Holo.Light.开头的 ----------------------------------------------------

<style name="Widget.Holo.Light.ProgressBar" parent="Widget.Holo.ProgressBar" />

<style name="Widget.Holo.Light.ProgressBar.Horizontal" parent="Widget.Holo.ProgressBar.Horizontal">
    <item name="progressDrawable">@drawable/progress_horizontal_holo_light</item>
</style>

<style name="Widget.Holo.Light.ProgressBar.Small" parent="Widget.Holo.ProgressBar.Small" />

<style name="Widget.Holo.Light.ProgressBar.Small.Title" parent="Widget.Holo.ProgressBar.Small.Title" />

<style name="Widget.Holo.Light.ProgressBar.Large" parent="Widget.Holo.ProgressBar.Large" />

<style name="Widget.Holo.Light.ProgressBar.Inverse" parent="Widget.Holo.ProgressBar.Inverse" />

<style name="Widget.Holo.Light.ProgressBar.Small.Inverse" parent="Widget.Holo.ProgressBar.Small.Inverse" />

<style name="Widget.Holo.Light.ProgressBar.Large.Inverse" parent="Widget.Holo.ProgressBar.Large.Inverse" />

3.styles_material.xml里面的 16个，其中Widget.Material.开头的有8个，Widget.Material.Light.开头的有8个

----------------------------------------------- Widget.Material.开头的 ------------------------------------------------------

<style name="Widget.Material.ProgressBar" parent="Widget.ProgressBar">
    <item name="indeterminateDrawable">@drawable/progress_medium_material</item>
</style>

<style name="Widget.Material.ProgressBar.Inverse"/>

<style name="Widget.Material.ProgressBar.Horizontal" parent="Widget.ProgressBar.Horizontal">
    <item name="progressDrawable">@drawable/progress_horizontal_material</item>
    <item name="indeterminateDrawable">@drawable/progress_indeterminate_horizontal_material</item>
    <item name="minHeight">16dip</item>
    <item name="maxHeight">16dip</item>
</style>

<style name="Widget.Material.ProgressBar.Small" parent="Widget.ProgressBar.Small">
    <item name="indeterminateDrawable">@drawable/progress_small_material</item>
</style>

<style name="Widget.Material.ProgressBar.Small.Inverse"/>
<style name="Widget.Material.ProgressBar.Small.Title"/>

<style name="Widget.Material.ProgressBar.Large" parent="Widget.ProgressBar.Large">
    <item name="indeterminateDrawable">@drawable/progress_large_material</item>
</style>

<style name="Widget.Material.ProgressBar.Large.Inverse"/>

-------------------------------------------- Widget.Material.Light.开头的 ---------------------------------------------------

<style name="Widget.Material.Light.ProgressBar" parent="Widget.Material.ProgressBar"/>
<style name="Widget.Material.Light.ProgressBar.Horizontal" parent="Widget.Material.ProgressBar.Horizontal"/>
<style name="Widget.Material.Light.ProgressBar.Small" parent="Widget.Material.ProgressBar.Small"/>
<style name="Widget.Material.Light.ProgressBar.Small.Title" parent="Widget.Material.ProgressBar.Small.Title"/>
<style name="Widget.Material.Light.ProgressBar.Large" parent="Widget.Material.ProgressBar.Large"/>
<style name="Widget.Material.Light.ProgressBar.Inverse" parent="Widget.Material.ProgressBar.Inverse"/>
<style name="Widget.Material.Light.ProgressBar.Small.Inverse" parent="Widget.Material.ProgressBar.Small.Inverse"/>
<style name="Widget.Material.Light.ProgressBar.Large.Inverse" parent="Widget.Material.ProgressBar.Large.Inverse"/>

4.styles_device_default.xml里面的13个，其中Widget.DeviceDefault.开头的有5个，
Widget.DeviceDefault.Light.开头的有8个。

------------------------------------------- Widget.DeviceDefault..开头的 --------------------------------------------------

<style name="Widget.DeviceDefault.ProgressBar" parent="Widget.Material.ProgressBar"/>

<style name="Widget.DeviceDefault.ProgressBar.Horizontal" parent="Widget.Material.ProgressBar.Horizontal"/>

<style name="Widget.DeviceDefault.ProgressBar.Small" parent="Widget.Material.ProgressBar.Small"/>

<style name="Widget.DeviceDefault.ProgressBar.Small.Title" parent="Widget.Material.ProgressBar.Small.Title"/>

<style name="Widget.DeviceDefault.ProgressBar.Large" parent="Widget.Material.ProgressBar.Large"/>

---------------------------------------- Widget.DeviceDefault.Light.开头的 -----------------------------------------------

<style name="Widget.DeviceDefault.Light.ProgressBar"
    parent="Widget.Material.Light.ProgressBar"/>

<style name="Widget.DeviceDefault.Light.ProgressBar.Horizontal" 
    parent="Widget.Material.Light.ProgressBar.Horizontal"/>

<style name="Widget.DeviceDefault.Light.ProgressBar.Small" 
    parent="Widget.Material.Light.ProgressBar.Small"/>

<style name="Widget.DeviceDefault.Light.ProgressBar.Small.Title" 
    parent="Widget.Material.Light.ProgressBar.Small.Title"/>

<style name="Widget.DeviceDefault.Light.ProgressBar.Large" 
    parent="Widget.Material.Light.ProgressBar.Large"/>

<style name="Widget.DeviceDefault.Light.ProgressBar.Inverse" 
    parent="Widget.Material.Light.ProgressBar.Inverse"/>

<style name="Widget.DeviceDefault.Light.ProgressBar.Small.Inverse" 
    parent="Widget.Material.Light.ProgressBar.Small.Inverse"/>

<style name="Widget.DeviceDefault.Light.ProgressBar.Large.Inverse" 
    parent="Widget.Material.Light.ProgressBar.Large.Inverse"/>
（二）其他属性
属性值 描述
android:max="" 进度条最大值
android:progress="" 进度条已完成值
android:secondaryProgress="" 二级进度值，值介于0到max。该进度在主进度和背景之间。比如用于网络播放视频时，二级进度用于表示缓冲进度，主进度用于表示播放进度。
android:animationResolution 超时的动画帧之间的毫秒 ；必须是一个整数值,如“100”。（已经被舍弃了，现在都不用了。）
android:progressDrawable="" 设置进度条轨道对应的drawable对象
android:indeterminate="" 是否允许使用不确定模式，该属性设置为true，表示设置进度条不精确显示进度，在不确定模式下，进度条动画无限循环
android:indeterminateDrawable="" 定义不确定模式是否可拉
android:indeterminateDuration="" 时间不定的动画
android:indeterminateBehavior="" 定义当进度达到最大时，不确定模式的表现；该值必须为repeat或者cycle，repeat表示进度从0重新开始；cycle表示进度保持当前值，并且回到0
android:indeterminateOnly="" 限制为不定模式
android:indeterminateTint=""
android:indeterminateTintMode=""

二、水平的ProgressBar

1.首先是布局代码：

  <?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:background="#3C7793"
    android:orientation="vertical">

    <ProgressBar
        android:id="@+id/progressBar1"
        style="?android:attr/progressBarStyleHorizontal"
        android:layout_margin="10dp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:progress="0"
        android:secondaryProgress="100"
        android:progressDrawable="@drawable/progressbar_line" />
</LinearLayout>

2.再看drawable目录下的progressbar_line.xml是怎么定义的：（第一个item是背景，第二个item是二级进度值,一般用于视频的缓冲，最后一个是显示的进度）

  <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="0"
                />
        </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="0"
                    />
            </shape>
        </clip>
    </item>

    <item android:id="@android:id/progress">
        <clip>
            <shape>
                <corners
                    android:radius="5dip" />
                <gradient
                    android:startColor="#80ff0000"
                    android:endColor="#8000ff00"
                    android:angle="0" />
            </shape>
        </clip>
    </item>
  </layer-list>

3.代码里面控制进度的显示，新建一个线程,重写runnable，在run方法里面去模拟执行耗时操作，通过handler发消息给主线程，主线程拿到消息之后更新UI.

import android.os.Bundle;
import android.os.Handler;
import android.os.Message;
import android.support.v7.app.AppCompatActivity;
import android.widget.ProgressBar;

public class MainActivity extends AppCompatActivity {
   
    private ProgressBar progressBar1;

    //在这里处理更新进度条
    private Handler mHandler = new Handler(){
        @Override
        public void handleMessage(Message msg) {
            super.handleMessage(msg);
            switch (msg.what) {
                case 0x0001:
                    progressBar1.setProgress(msg.arg1);
                    //如果进度小于100,则延迟100毫秒之后重复执行runnable
                    if(msg.arg1<100){
                        mHandler.postDelayed(r, 100);
                    }else{
                        //否则，都置零，线程重新执行
                        progressBar1.setProgress(0);
                        mHandler.post(r);
                    }
                    break;
            }
        }
    };

    Runnable r = new Runnable() {
        int currentProgress = 0;
        @Override
        public void run() {
            Message msg = new Message();
            msg.what = 0x0001;
            currentProgress = progressBar1.getProgress()+1;
            progressBar1.setProgress(currentProgress);
            msg.arg1 = currentProgress;
            mHandler.sendMessage(msg);
        }
    };

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main2);

        progressBar1 = (ProgressBar) findViewById(R.id.progressBar1);
        progressBar1.setProgressDrawable(getResources().getDrawable(R.drawable.progressbar_line));

        if(progressBar1.getProgress() < progressBar1.getMax()){
            // 把r加入到线程队列，然后线程队列里就开始执行runnable对象中的run()
            mHandler.post(r);
        }else{//不用的时候，就把r从线程队列移除，这是一个小的性能优化
            mHandler.removeCallbacks(r);
        }
    }
}

三、圆形的ProgressBar

1.先来看看布局：

<?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:background="#3C7793"
android:orientation="vertical">

    <ProgressBar
        android:id="@+id/loadProgressBar"
        style="@android:style/Widget.ProgressBar"
        android:layout_margin="10dp"
        android:indeterminateDrawable="@drawable/progressbar_round"
        android:layout_width="100dp"
        android:layout_height="100dp" />
</LinearLayout>

2.再看看drawable目录下的progressbar_round.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="10"
        android:useLevel="false">

        <gradient
            android:centerColor="#FFFFFF"
            android:centerY="0.50"
            android:endColor="#FFFF00"
            android:startColor="#00FFFF"
            android:type="sweep"
            android:useLevel="false" />
    </shape>
</rotate>

效果图如下：

ProgressBar演示.gif

下一篇我们重点讲解如何写一个View继承ProgressBar，实现各种吊炸天的效果。

相关文章阅读：

全面总结侧滑菜单的4种实现方式

万能的dialog库（包括类似popwindow效果）　
　
　　自定义ViewPager实现3D画廊效果

简单几行代码让ViewPager实现垂直滑动效果

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 159,117评论 4赞 362
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 67,328评论 1赞 293
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 108,839评论 0赞 243
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 44,007评论 0赞 206
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 52,384评论 3赞 287
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 40,629评论 1赞 219
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 31,880评论 2赞 313
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 30,593评论 0赞 198
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 34,313评论 1赞 243
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,575评论 2赞 246
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,066评论 1赞 260
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 28,392评论 2赞 253
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 33,052评论 3赞 236
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,082评论 0赞 8
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,844评论 0赞 195
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 35,662评论 2赞 274
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 35,575评论 2赞 270

推荐阅读更多精彩内容