（4.1.15.1） Android简单自定义圆形和水平ProgressBar_第1张图片

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


1、ProgressBar有两个进度，一个是android:progress，另一个是android:secondaryProgress。后者主要是为缓存需要所涉及的，比如在看网络视频时候都会有一个缓存的进度条以及还要一个播放的进度，在这里缓存的进度就可以是android:secondaryProgress，而播放进度就是android:progress，有了secondProgress，可以很方便定制ProgressBar。

2、ProgressBar分为确定的和不确定的，确定的是我们能明确看到进度，相反不确定的就是不清楚、不确定一个操作需要多长时间来完成，这个时候就需要用的不确定的ProgressBar了。属性android:indeterminate如果设置为true的话，那么ProgressBar就可能是圆形的滚动条或者水平的滚动条（由样式决定），但是我们一般时候，是直接使用Style类型来区分圆形还是水平ProgressBar的。

3、ProgressBar的样式设定其实有两种方式，在API文档中说明的方式如下：

  • Widget.ProgressBar.Horizontal
  • Widget.ProgressBar.Small
  • Widget.ProgressBar.Large
  • Widget.ProgressBar.Inverse
  • Widget.ProgressBar.Small.Inverse
  • Widget.ProgressBar.Large.Inverse
使用的时候可以这样：style="@android:style/Widget.ProgressBar.Small"，另外还有一种方式就是使用系统的attr，下面的方式是系统的style：

  • style="?android:attr/progressBarStyle"
  • style="?android:attr/progressBarStyleHorizontal"
  • style="?android:attr/progressBarStyleInverse"
  • style="?android:attr/progressBarStyleLarge"
  • style="?android:attr/progressBarStyleLargeInverse"
  • style="?android:attr/progressBarStyleSmall"
  • style="?android:attr/progressBarStyleSmallInverse"
  • style="?android:attr/progressBarStyleSmallTitle"
[java] view plain copy
  1. <ProgressBar
  2. android:id="@+id/progressBar1"
  3. style="?android:attr/progressBarStyleHorizontal"
  4. style="@android:style/Widget.ProgressBar.Horizontal"（等同于@android:attr）
  5. android:layout_width="match_parent"
  6. android:layout_height="wrap_content"/>

水平ProgressBar系统样式

我们去看一下style="?android:attr/progressBarStyleHorizontal"的源码，如下：

[html] view plain copy
  1. <prename="code"class="java"><stylename="Widget.ProgressBar.Horizontal">
  2. <itemname="android:indeterminateOnly">false</item>
  3. <itemname="android:progressDrawable">@android:drawable/progress_horizontal</item>
  4. <itemname="android:indeterminateDrawable">@android:drawable/progress_indeterminate_horizontal</item>
  5. <itemname="android:minHeight">20dip</item>
  6. <itemname="android:maxHeight">20dip</item>
  7. <itemname="android:mirrorForRtl">true</item>
  8. </style>
  一眼看出  android:progressDrawable  便是主角，继续看一下progress_horizontal的源码，如下：  
 
  
 
              [java] view plain     copy                                   
        
  1.  <?xmlversion="1.0"encoding="utf-8"?>
    2.     
  2.  <!--Copyright(C)2008TheAndroidOpenSourceProject
    3.     
  3.  
    4.     
  4.  LicensedundertheApacheLicense,Version2.0(the"License");
    5.     
  5.  youmaynotusethisfileexceptincompliancewiththeLicense.
    6.     
  6.  YoumayobtainacopyoftheLicenseat
    7.     
  7.  
    8.     
  8.  http://www.apache.org/licenses/LICENSE-2.0
    9.     
  9.  
    10.     
  10.  Unlessrequiredbyapplicablelaworagreedtoinwriting,software
    11.     
  11.  distributedundertheLicenseisdistributedonan"ASIS"BASIS,
    12.     
  12.  WITHOUTWARRANTIESORCONDITIONSOFANYKIND,eitherexpressorimplied.
    13.     
  13.  SeetheLicenseforthespecificlanguagegoverningpermissionsand
    14.     
  14.  limitationsundertheLicense.
    15.     
  15.  -->
    16.     
  16.  
    17.     
  17.  <layer-listxmlns:android="http://schemas.android.com/apk/res/android">
    18.     
  18.  
    19.     
  19.  <itemandroid:id="@android:id/background">
    20.     
  20.  <shape>
    21.     
  21.  <cornersandroid:radius="5dip"/>
    22.     
  22.  <gradient
    23.     
  23.  android:startColor="#ff9d9e9d"
    24.     
  24.  android:centerColor="#ff5a5d5a"
    25.     
  25.  android:centerY="0.75"
    26.     
  26.  android:endColor="#ff747674"
    27.     
  27.  android:angle="270"
    28.     
  28.  />
    29.     
  29.  </shape>
    30.     
  30.  </item>
    31.     
  31.  
    32.     
  32.  <itemandroid:id="@android:id/secondaryProgress">
    33.     
  33.  <clip>
    34.     
  34.  <shape>
    35.     
  35.  <cornersandroid:radius="5dip"/>
    36.     
  36.  <gradient
    37.     
  37.  android:startColor="#80ffd300"
    38.     
  38.  android:centerColor="#80ffb600"
    39.     
  39.  android:centerY="0.75"
    40.     
  40.  android:endColor="#a0ffcb00"
    41.     
  41.  android:angle="270"
    42.     
  42.  />
    43.     
  43.  </shape>
    44.     
  44.  </clip>
    45.     
  45.  </item>
    46.     
  46.  
    47.     
  47.  <itemandroid:id="@android:id/progress">
    48.     
  48.  <clip>
    49.     
  49.  <shape>
    50.     
  50.  <cornersandroid:radius="5dip"/>
    51.     
  51.  <gradient
    52.     
  52.  android:startColor="#ffffd300"
    53.     
  53.  android:centerColor="#ffffb600"
    54.     
  54.  android:centerY="0.75"
    55.     
  55.  android:endColor="#ffffcb00"
    56.     
  56.  android:angle="270"
    57.     
  57.  />
    58.     
  58.  </shape>
    59.     
  59.  </clip>
    60.     
  60.  </item>
    61.     
  61.  
    62.     
  62.  </layer-list>
    63.    
    
 
  这里面有3个item，分别为：background、secondProgress、progress，看名字就能知道其大概作用，我们比较关心的应该是后两个，其实把这个文件copy一份到自己的项目下，就可以随心所欲的修改shape属性：圆角、渐变等等。  
 
  
 
  
自定义水平ProgressBar
  
 第一步，在drawable文件夹下新建一个progressbar_horizontal_1.xml：
  
 
              [java] view plain     copy                                   
        
  1.  <?xmlversion="1.0"encoding="utf-8"?>
    2.     
  2.  <layer-listxmlns:android="http://schemas.android.com/apk/res/android">
    3.     
  3.  
    4.     
  4.  <!--background-->
    5.     
  5.  <item
    6.     
  6.  android:id="@android:id/background"
    7.     
  7.  android:drawable="@drawable/progress_patch_green">
    8.     
  8.  </item>
    9.     
  9.  <!--progress-->
    10.     
  10.  <itemandroid:id="@android:id/progress">
    11.     
  11.  <clip>
    12.     
  12.  <nine-patchandroid:src="@drawable/progress_patch_galy"/>
    13.     
  13.  </clip>
    14.     
  14.  </item>
    15.     
  15.  <!--secondprogress-->
    16.     
  16.  
    17.     
  17.  <itemandroid:id="@android:id/secondaryProgress">
    18.     
  18.  <clip>
    19.     
  19.  <nine-patchandroid:src="@drawable/progresspatch_blue"/>
    20.     
  20.  </clip>
    21.     
  21.  </item>
    22.     
  22.  
    23.     
  23.  </layer-list>
    24.    
    
 
  上图中的progress和secondprogress中src的资源便是我自定义的，注意这三个之间的叠放顺序，background是最底层，中间的是progress最上层是second。  
 
  
 第二步，标准一点，在style中新建我们自定义的style：mProgress_horizontal：
  
 
              [java] view plain     copy                                   
        
  1.  <stylename="mProgress_horizontal">
    2.     
  2.  <itemname="android:indeterminateOnly">false</item>
    3.     
  3.  <itemname="android:progressDrawable">@drawable/progressbar_horizontal_1</item><!--progress_horizontal-->
    4.     
  4.  <itemname="android:indeterminateDrawable">@android:drawable/progress_indeterminate_horizontal</item>
    5.     
  5.  <itemname="android:minHeight">20dip</item>
    6.     
  6.  <itemname="android:maxHeight">20dip</item>
    7.     
  7.  </style>
    8.    
    
 
  上图中prpgressDrawable资源便是指向了我们自定义的progressbar_horizontal_1，大功告成。  
 
  
 第三步，组件引用：
  
 
              [java] view plain     copy                                   
        
  1.  <ProgressBar
    2.     
  2.  android:id="@+id/progressBar1"
    3.     
  3.  android:layout_width="match_parent"
    4.     
  4.  android:layout_height="wrap_content"
    5.     
  5.  android:background="@drawable/progress_backround"
    6.     
  6.  android:padding="5dp"
    7.     
  7.  android:progress="50"
    8.     
  8.  style="@style/mProgress_horizontal"
    9.     
  9.  android:secondaryProgress="20"
    10.     
  10.  android:visibility="visible"/>
    11.    
    
 
  【附】  
 
  
 在这里我们也可以省略第二步创建style，直接在组件中android:progressDrawable引用自己的progressbar_horizontal_1，如下：
  
 
              [java] view plain     copy                                   
        
  1.  <ProgressBar
    2.     
  2.  android:id="@+id/progressBar1"
    3.     
  3.  android:indeterminate="false"
    4.     
  4.  android:indeterminateOnly="false"
    5.     
  5.  android:layout_width="match_parent"
    6.     
  6.  android:layout_height="wrap_content"
    7.     
  7.  android:background="@drawable/progress_backround"
    8.     
  8.  android:padding="5dp"
    9.     
  9.  android:progress="50"
    10.     
  10.  android:maxHeight="20dp"
    11.     
  11.  android:minHeight="20dp"
    12.     
  12.  android:progressDrawable="@drawable/progressbar_horizontal_1"
    13.     
  13.  android:secondaryProgress="20"
    14.     
  14.  />
    15.    
    
  
 
  
 
  
 第四步，效果图：
  
 
  
 
  
 
  
圆形ProgressBar系统样式
  
 
              [java] view plain     copy                                   
        
  1.  <ProgressBar
    2.     
  2.  android:id="@+id/progressBar2"
    3.     
  3.  style="@android:attr/progressBarStyleLarge"
    4.     
  4.  android:layout_gravity="center_vertical"
    5.     
  5.  android:layout_width="match_parent"
    6.     
  6.  android:layout_height="wrap_content"/>
    7.    
    
 
  我们以progressBarStyleLarge为例进行探索，找到这个布局文件，源码如下：  
 
              [java] view plain     copy                                   
        
  1.  <stylename="Widget.ProgressBar.Large">
    2.     
  2.  　　<itemname="android:indeterminateDrawable">@android:drawable/progress_large_white</item>
    3.     
  3.  　　<itemname="android:minWidth">76dip</item>
    4.     
  4.  　　<itemname="android:maxWidth">76dip</item>
    5.     
  5.  　　<itemname="android:minHeight">76dip</item>
    6.     
  6.  　　<itemname="android:maxHeight">76dip</item>
    7.     
  7.  </style>
    8.    
    
 
  同样一眼看出  indeterminateDrawable  便是主角了，继续看一下progress_large_white源码，如下：  
 
              [java] view plain     copy                                   
        
  1.  <rotatexmlns:android="http://schemas.android.com/apk/res/android"
    2.     
  2.  android:drawable="@drawable/spinner_white_76"
    3.     
  3.  android:pivotX="50%"
    4.     
  4.  android:pivotY="50%"
    5.     
  5.  android:fromDegrees="0"
    6.     
  6.  android:toDegrees="360"/>
    7.    
    
 
  看到这里就透彻了，就是在这里spinner_white_76进行不停的旋转的，我们copy一下这个文件，就可以直接自定义了。  
 
  
 
  
 
  
自定义圆形ProgressBar
  第一步，在drawable文件夹下新建：progressbar_circle_1.xml，如下：  
 
              [java] view plain     copy                                   
        
  1.  <?xmlversion="1.0"encoding="utf-8"?>
    2.     
  2.  <rotatexmlns:android="http://schemas.android.com/apk/res/android"
    3.     
  3.  android:drawable="@drawable/loading"//自定义的菊花图片
    4.     
  4.  android:fromDegrees="0"
    5.     
  5.  android:pivotX="50%"
    6.     
  6.  android:pivotY="50%"
    7.     
  7.  android:toDegrees="360">
    8.     
  8.  
    9.     
  9.  </rotate>
    10.    
    
 
  第二步，在Style中定义mProgress_circle，如下：  
 
              [java] view plain     copy                                   
        
  1.  <stylename="mProgress_circle">
    2.     
  2.  <itemname="android:indeterminateDrawable">@drawable/progressbar_circle_1</item>
    3.     
  3.  <itemname="android:minWidth">25dp</item>
    4.     
  4.  <itemname="android:minHeight">25dp</item>
    5.     
  5.  <itemname="android:maxWidth">60dp</item>
    6.     
  6.  <itemname="android:maxHeight">60dp</item>
    7.     
  7.  </style>
    8.    
    
 
  支持大小自己随意定，别失真就好  
 
  
 第三步，组件中引用，如下：
  
 
              [java] view plain     copy                                   
        
  1.  <ProgressBar
    2.     
  2.  android:id="@+id/progressBar2"
    3.     
  3.  style="@style/mProgress_circle"
    4.     
  4.  android:layout_gravity="center_vertical"
    5.     
  5.  android:layout_width="match_parent"
    6.     
  6.  android:indeterminateDuration="1200"
    7.     
  7.  android:layout_height="wrap_content"/>
    8.    
    
 
  【附】  
  上面是通过一张图片填充  android:indeterminateDrawable  ，我们也可以定义一个  动画  或者自定义  颜色（shape）  来实现，跟图片的用法一样：  
  
 
  
 定义动画 progress_circle_loading,xml：
  
 
              [java] view plain     copy                                   
        
  1.  <?xmlversion="1.0"encoding="UTF-8"?>
    2.     
  2.  <animation-listandroid:oneshot="false"
    3.     
  3.  　　xmlns:android="http://schemas.android.com/apk/res/android">
    4.     
  4.  　　<itemandroid:duration="100"android:drawable="@drawable/loading_1"/>
    5.     
  5.  　　<itemandroid:duration="100"android:drawable="@drawable/loading_2"/>
    6.     
  6.  　　<itemandroid:duration="100"android:drawable="@drawable/loading_3"/>
    7.     
  7.  　　<itemandroid:duration="100"android:drawable="@drawable/loading_4"/>
    8.     
  8.  　　<itemandroid:duration="100"android:drawable="@drawable/loading_5"/>
    9.     
  9.  　　<itemandroid:duration="100"android:drawable="@drawable/loading_6"/>
    10.     
  10.  </animation-list>
    11.    
    
 
  style的indeterminateDrawable引入：              [html] view plain     copy                                   
        
  1.  <prename="code"class="java"><itemname="android:indeterminateDrawable">@drawable/progress_circle_loading</item>
    2.    
    
  
 
  
 定义shape颜色 progress_circle_shape.xml
  
 
              [java] view plain     copy                                   
        
  1.  <?xmlversion="1.0"encoding="utf-8"?>
    2.     
  2.  <rotatexmlns:android="http://schemas.android.com/apk/res/android"
    3.     
  3.  　　android:fromDegrees="0"
    4.     
  4.  　　android:pivotX="50%"
    5.     
  5.  　　android:pivotY="50%"
    6.     
  6.  　　android:toDegrees="360">
    7.     
  7.  　　<shape
    8.     
  8.  　　　　android:innerRadiusRatio="3"
    9.     
  9.  　　　　android:shape="ring"
    10.     
  10.  　　　　android:thicknessRatio="8"
    11.     
  11.  　　　　android:useLevel="false">
    12.     
  12.  　　　　<gradient
    13.     
  13.  　　　　　　android:centerColor="#FFFFFF"
    14.     
  14.  　　　　　　android:centerY="0.50"
    15.     
  15.  　　　　　　android:endColor="#1E90FF"
    16.     
  16.  　　　　　　android:startColor="#000000"
    17.     
  17.  　　　　　　android:type="sweep"
    18.     
  18.  　　　　　　android:useLevel="false"/>
    19.     
  19.  　　</shape>
    20.     
  20.  </rotate>
    21.    
    
 
  
  style的indeterminateDrawable引入：  
 
  
 
              [java] view plain     copy                                   
        
  1.  <itemname="android:indeterminateDrawable">@drawable/progress_circle_shape</item>
    2.    
    
 
  
 
 
  
 效果图如下：
  
 （4.1.15.1） Android简单自定义圆形和水平ProgressBar_第2张图片
 
  
 
 
  
 
 
  
  
 
  
 SeekBar的原理是一样的，不信你看下图，我就是用的seekbar
  
 
 
                                                                                             







更多相关文章
	

    

  1. Android更新下载进度条
  2. 自定义android圆形ImageView
  3. Android画各种圆，饼图，环图，圆形图片
  4. Android使用OKHttp3实现下载(断点续传、显示进度)
  5. 如何实现textview多余文字的水平滚动显示
  6. 一个非常好用的自定义圆形控件
  7. Android百分比下载进度条
  8. android 进度条垂直动态上升下降达到警告线改变前景色
  9. android水平循环滚动控件使用详解



随机推荐
	

    

  1. 
Android(安卓)Studio JDK版本问题报错
    2. 

  2. 
Android与PHP服务器交互
    3. 

  3. 
httplive流媒体播放(m3u8)
    4. 

  4. 
Camera驱动开发 - 基于高通MSM8660 + And
    5. 

  5. 
android截取屏幕图
    6. 

  6. 
android之ArrayAdaper之Spinner
    7. 

  7. 
Google Maps Android(安卓)API v2说明
    8. 

  8. 
(翻译)VectorDrawables的使用
    9. 

  9. 
android webView判断是否加载完成的2种办
    10. 

  10. 
Android实用代码片段(二)
    11.