Android ProgressBar 详解 改变 ProgressBar 颜色

迈不过友情╰ 2022-08-10 05:49 687阅读 0赞

今天来说说 ProgressBar 这个东西,

之前一种是用的 项目里面 别人写好的直接用, 还没怎么细看这两个东西

ProgressBar 很简单就一进度条

默认情况下, 他是圆形的,

但是它还有另一种 水平长条状的形态

同时还需要了解的有:

  1. 水平形状的 ProgressBar 是有两个进度的 向我们看到 视频的精度条, 有一个是当前播放的,还有一个是下载的精度
  1. ProgressBar 分为确定和不确定的两种, android:indeterminate 为true 表示不确定

3.系统的关于 ProgressBar的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”

设置ProgressBar的样式有两种方式:

  1. style=”@style/StyleProgressBarMini”

  1. style=”?android:attr/progressBarStyleLargeInverse”

上面两种方式都可以设置PogressBar 的属性

我们在自定ProgressBar的时候一般用的都是第一种

下面看看 Android默认的两种 ProgressBar的Style 

  1. <style name="Widget.ProgressBar">
  2.     <item name="indeterminateOnly">true</item>
  3.     <item name="indeterminateDrawable">@drawable/progress_medium_white</item>
  4.     <item name="indeterminateBehavior">repeat</item>
  5.     <item name="indeterminateDuration">3500</item>
  6.     <item name="minWidth">48dip</item>
  7.     <item name="maxWidth">48dip</item>
  8.     <item name="minHeight">48dip</item>
  9.     <item name="maxHeight">48dip</item>
  10.     <item name="mirrorForRtl">false</item>
  11. </style>

上面是默认的 的Style 是圆形的而且是不确定

  1. <style name="Widget.ProgressBar.Horizontal">
  2.     <item name="indeterminateOnly">false</item>
  3.     <item name="progressDrawable">@drawable/progress_horizontal</item>
  4.     <item name="indeterminateDrawable">@drawable/progress_indeterminate_horizontal</item>
  5.     <item name="minHeight">20dip</item>
  6.     <item name="maxHeight">20dip</item>
  7.     <item name="mirrorForRtl">true</item>
  8. </style>

这个是 水平的ProgressBar的 Style

progressDrawable 这个属性是 确定的进度条的属性

indeterminateDrawable 这个事不确定的 进度条的熟悉

我可以看看 系统默认的 @drawable/progress_horizontal 

  1. <layer-list xmlns:android="http://schemas.android.com/apk/res/android">
  3.     <item android:id="@android:id/background">
  4.         <shape>
  5.             <corners android:radius="5dip" />
  6.             <gradient
  7.                     android:startColor="#ff9d9e9d"
  8.                     android:centerColor="#ff5a5d5a"
  9.                     android:centerY="0.75"
  10.                     android:endColor="#ff747674"
  11.                     android:angle="270"
  12.             />
  13.         </shape>
  14.     </item>
  16.     <item android:id="@android:id/secondaryProgress">
  17.         <clip>
  18.             <shape>
  19.                 <corners android:radius="5dip" />
  20.                 <gradient
  21.                         android:startColor="#80ffd300"
  22.                         android:centerColor="#80ffb600"
  23.                         android:centerY="0.75"
  24.                         android:endColor="#a0ffcb00"
  25.                         android:angle="270"
  26.                 />
  27.             </shape>
  28.         </clip>
  29.     </item>
  31.     <item android:id="@android:id/progress">
  32.         <clip>
  33.             <shape>
  34.                 <corners android:radius="5dip" />
  35.                 <gradient
  36.                         android:startColor="#ffffd300"
  37.                         android:centerColor="#ffffb600"
  38.                         android:centerY="0.75"
  39.                         android:endColor="#ffffcb00"
  40.                         android:angle="270"
  41.                 />
  42.             </shape>
  43.         </clip>
  44.     </item>
  46. </layer-list>

上面有3个 item background、secondProgress、progress，看名字就能知道其大概作用, 我可以把这份文件copy 一份 就可以自己随心的改动 样式了

下面一份是自己定义的 

  1. <layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
  3.     <!-- background -->
  4.     <item
  5.         android:id="@android:id/background"
  6.         android:drawable="@drawable/progress_patch_green">
  7.     </item>
  8.     <!-- progress -->
  9.     <item android:id="@android:id/progress">
  10.         <clip>
  11.             <nine-patch android:src="@drawable/progress_patch_galy" />
  12.         </clip>
  13.     </item>
  14.     <!-- second progress -->
  16.     <item android:id="@android:id/secondaryProgress">
  17.         <clip>
  18.             <nine-patch android:src="@drawable/progresspatch_blue" />
  19.         </clip>
  20.     </item>
  22. </layer-list>

需要注意的是 上面 .9 图的使用

关于 clip nine-patch 这些标签, 现在自己页不是很熟悉, 以后会写一篇关于这个的文章

如果不用Drawable的画, 只是想单纯的使用颜色该如何处理呢?

尝试过这样: 

  1. <layer-list xmlns:android="http://schemas.android.com/apk/res/android">
  2.     <item
  3.         android:id="@android:id/background"
  4.         android:drawable="@color/white">
  5.     </item>
  6.     <item
  7.         android:id="@android:id/secondaryProgress"
  8.         android:drawable="@color/red">
  9.     </item>
  10.     <item
  11.         android:id="@android:id/progress"
  12.         android:drawable="@color/red">
  13.     </item>
  14. </layer-list>

但是后面在设置 Progress的时候 不起作用, 看到的结果总是

Center

后面又尝试过 :

  1. <layer-list xmlns:android="http://schemas.android.com/apk/res/android">
  2.     <item
  3.         android:id="@android:id/background"
  4.         >
  5.         <shape>
  6.             <solid android:color="@color/white"></solid>
  7.         </shape>
  9.     </item>
  10.     <item
  11.         android:id="@android:id/secondaryProgress"
  12.         >
  13.         <shape>
  14.             <solid android:color="@color/red"></solid>
  15.         </shape>
  17.     </item>
  18.     <item
  19.         android:id="@android:id/progress"
  20.         >
  21.         <shape>
  22.             <solid android:color="@color/red"></solid>
  23.         </shape>
  25.     </item>
  26. </layer-list>

还是不行 和上面一样的

后面又尝试了这样的:

  1. <layer-list xmlns:android="http://schemas.android.com/apk/res/android">
  2.     <item
  3.         android:id="@android:id/background"
  4.         >
  5.         <clip>
  6.             <shape>
  7.                 <solid android:color="@color/white"></solid>
  8.             </shape>
  10.         </clip>
  11.     </item>
  12.     <item
  13.         android:id="@android:id/secondaryProgress"
  14.         >
  15.         <clip>
  16.             <shape>
  17.                 <solid android:color="@color/red"></solid>
  18.             </shape>
  20.         </clip>
  21.     </item>
  22.     <item
  23.         android:id="@android:id/progress"
  24.         >
  25.         <clip>
  26.             <shape>
  27.                 <solid android:color="@color/red"></solid>
  28.             </shape>
  30.         </clip>
  31.     </item>
  32. </layer-list>

这下好了能够正常显示了:
Center 1

后面又尝试了这样的:

  1. <layer-list xmlns:android="http://schemas.android.com/apk/res/android">
  2.     <item android:id="@android:id/background">
  3.         <clip>
  4.             <shape>
  5.                 <gradient
  6.                     android:endColor="@color/white"
  7.                     android:startColor="@color/white"/>
  8.             </shape>
  9.         </clip>
  10.     </item>
  11.     <item android:id="@android:id/secondaryProgress">
  12.         <clip>
  13.             <shape>
  14.                 <gradient
  15.                     android:endColor="@color/colorPrimary"
  16.                     android:startColor="@color/colorPrimary"/>
  17.             </shape>
  18.         </clip>
  19.     </item>
  20.     <item android:id="@android:id/progress">
  21.         <clip>
  22.             <shape>
  23.                 <gradient
  24.                     android:endColor="@color/colorPrimary"
  25.                     android:startColor="@color/colorPrimary"/>
  26.             </shape>
  27.         </clip>
  28.     </item>
  29. </layer-list>

也是ok 如图:
Center 2

这是自己定义的ProgressBar的style 

  1. <style name="StyleProgressBarMini" parent="Widget.AppCompat.ProgressBar.Horizontal">
  3.     <item name="android:maxHeight">50dp</item>
  4.     <item name="android:minHeight">10dp</item>
  5.     <item name="android:indeterminateOnly">false</item>
  6.     <item name="android:indeterminateDrawable">
  7.         @android:drawable/progress_indeterminate_horizontal
  8.     </item>
  9.     <item name="android:progressDrawable">@drawable/shape_progressbar_mini</item>
  11. </style>

具体使用如下: 

  1. <ProgressBar
  2.     android:id="@+id/pb_progressbar"
  3.     style="@style/StyleProgressBarMini"
  4.     android:layout_width="match_parent"
  5.     android:layout_height="wrap_content"
  6.     android:layout_margin="30dp"
  7.     android:max="100"
  8.     android:progress="50"/>

ok 下面说说 自定义圆形的

圆形的主要修改 android:indeterminateDrawable 属性

第一步，在drawable文件夹下新建：progressbar_circle_1.xml，如下： 

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <rotate xmlns:android="http://schemas.android.com/apk/res/android"
  3.     android:drawable="@drawable/loading" //自定义的菊花图片
  4.     android:fromDegrees="0"
  5.     android:pivotX="50%"
  6.     android:pivotY="50%"
  7.     android:toDegrees="360" >
  9. </rotate>

第二步，在Style中定义mProgress_circle，如下： 

  1. <style name="mProgress_circle">
  2.     <item name="android:indeterminateDrawable">@drawable/progressbar_circle_1</item>
  3.     <item name="android:minWidth">25dp</item>
  4.     <item name="android:minHeight">25dp</item>
  5.     <item name="android:maxWidth">60dp</item>
  6.     <item name="android:maxHeight">60dp</item>
  7. </style>

支持大小自己随意定，别失真就好

第三步，组件中引用，如下 

  1. <ProgressBar
  2.     android:id="@+id/progressBar2"
  3.     style="@style/mProgress_circle"
  4.     android:layout_gravity="center_vertical"
  5.     android:layout_width="match_parent"
  6.     android:indeterminateDuration="1200"
  7.     android:layout_height="wrap_content" />

上面是通过一张图片填充 android:indeterminateDrawable ，我们也可以定义一个 动画 或者自定义 颜色（shape） 来实现，跟图片的用法一样：

定义动画 progress_circle_loading,xml： 

  1. <animation-list android:oneshot="false"
  2.   xmlns:android="http://schemas.android.com/apk/res/android">
  3.   <item android:duration="100" android:drawable="@drawable/loading_1" />
  4.   <item android:duration="100" android:drawable="@drawable/loading_2" />
  5.   <item android:duration="100" android:drawable="@drawable/loading_3" />
  6.   <item android:duration="100" android:drawable="@drawable/loading_4" />
  7.   <item android:duration="100" android:drawable="@drawable/loading_5" />
  8.   <item android:duration="100" android:drawable="@drawable/loading_6" />
  9. </animation-list>

style的indeterminateDrawable引入： 

  1. <item name="android:indeterminateDrawable">@drawable/progress_circle_loading</item>

定义shape颜色 progress_circle_shape.xml 

  1. <rotate xmlns:android="http://schemas.android.com/apk/res/android"
  2.   android:fromDegrees="0"
  3.   android:pivotX="50%"
  4.   android:pivotY="50%"
  5.   android:toDegrees="360" >
  6.   <shape
  7.     android:innerRadiusRatio="3"
  8.     android:shape="ring"
  9.     android:thicknessRatio="8"
  10.     android:useLevel="false" >
  11.     <gradient
  12.       android:centerColor="#FFFFFF"
  13.       android:centerY="0.50"
  14.       android:endColor="#1E90FF"
  15.       android:startColor="#000000"
  16.       android:type="sweep"
  17.       android:useLevel="false" />
  18.   </shape>
  19. </rotate>

style的indeterminateDrawable引入： 

  1. <item name="android:indeterminateDrawable">@drawable/progress_circle_shape</item>

关于seekBar 的自定义和ProgressBar的基本一致

ok 老实说, 上面的关于 gradient shape 这新的知识不是很熟悉, 以后要专门写一篇关于这个的

参考了以下文章

http://blog.csdn.net/mad1989/article/details/38042875

发表评论

表情：
评论列表 （有 0 条评论，687人围观）

还没有评论，来说两句吧...

相关阅读

    相关 Android UI之ProgressBar

    前言 　　开门见山，开篇明意。这篇博客主要讲解一下Android中ProgressBar控件以及间接继承它的两个子控件SeekBar、RatingBar的基本用法，因为其有继

    亦凉亦凉/ 0 赞/ 232 阅读