Android ProgressBar 详解 改变 ProgressBar 颜色

xiaoxiao2021-02-27  354

今天来说说 ProgressBar   这个东西, 之前一种是用的 项目里面 别人写好的直接用, 还没怎么细看这两个东西 ProgressBar 很简单就一进度条 默认情况下, 他是圆形的,  但是它还有另一种 水平长条状的形态 同时还需要了解的有: 1. 水平形状的 ProgressBar 是有两个进度的 向我们看到 视频的精度条, 有一个是当前播放的,还有一个是下载的精度 2. 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.  [html]  view plain  copy style="@style/StyleProgressBarMini"   2.  [html]  view plain  copy style="?android:attr/progressBarStyleLargeInverse"   上面两种方式都可以设置PogressBar 的属性 我们在自定ProgressBar的时候一般用的都是第一种 下面看看 Android默认的两种 ProgressBar的Style  [java]  view plain  copy <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 是圆形的而且是不确定 [java]  view plain  copy <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>   这个是 水平的ProgressBar的 Style progressDrawable 这个属性是 确定的进度条的属性  indeterminateDrawable 这个事不确定的 进度条的熟悉  我可以看看 系统默认的 @drawable/progress_horizontal [html]  view plain  copy <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="270"               />           </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="270"                   />               </shape>           </clip>       </item>          <item android:id="@android:id/progress">           <clip>               <shape>                   <corners android:radius="5dip" />                   <gradient                           android:startColor="#ffffd300"                           android:centerColor="#ffffb600"                           android:centerY="0.75"                           android:endColor="#ffffcb00"                           android:angle="270"                   />               </shape>           </clip>       </item>      </layer-list>   上面有3个 item background、secondProgress、progress,看名字就能知道其大概作用, 我可以把这份文件copy 一份 就可以自己随心的改动 样式了 下面一份是自己定义的   [html]  view plain  copy <layer-list xmlns:android="http://schemas.android.com/apk/res/android" >          <!-- background -->       <item           android:id="@android:id/background"           android:drawable="@drawable/progress_patch_green">       </item>       <!-- progress -->       <item android:id="@android:id/progress">           <clip>               <nine-patch android:src="@drawable/progress_patch_galy" />           </clip>       </item>       <!-- second progress -->          <item android:id="@android:id/secondaryProgress">           <clip>               <nine-patch android:src="@drawable/progresspatch_blue" />           </clip>       </item>      </layer-list>   需要注意的是 上面 .9 图的使用 关于 clip  nine-patch  这些标签, 现在自己页不是很熟悉, 以后会写一篇关于这个的文章 如果不用Drawable的画, 只是想单纯的使用颜色该如何处理呢? 尝试过这样:  [java]  view plain  copy <layer-list xmlns:android="http://schemas.android.com/apk/res/android">       <item           android:id="@android:id/background"           android:drawable="@color/white">       </item>       <item           android:id="@android:id/secondaryProgress"           android:drawable="@color/red">       </item>       <item           android:id="@android:id/progress"           android:drawable="@color/red">       </item>   </layer-list>   但是后面在设置 Progress的时候 不起作用, 看到的结果总是   后面又尝试过 : [java]  view plain  copy <layer-list xmlns:android="http://schemas.android.com/apk/res/android">       <item           android:id="@android:id/background"           >           <shape>               <solid android:color="@color/white"></solid>           </shape>          </item>       <item           android:id="@android:id/secondaryProgress"           >           <shape>               <solid android:color="@color/red"></solid>           </shape>          </item>       <item           android:id="@android:id/progress"           >           <shape>               <solid android:color="@color/red"></solid>           </shape>          </item>   </layer-list>   还是不行 和上面一样的 后面又尝试了这样的: [java]  view plain  copy <layer-list xmlns:android="http://schemas.android.com/apk/res/android">       <item           android:id="@android:id/background"           >           <clip>               <shape>                   <solid android:color="@color/white"></solid>               </shape>              </clip>       </item>       <item           android:id="@android:id/secondaryProgress"           >           <clip>               <shape>                   <solid android:color="@color/red"></solid>               </shape>              </clip>       </item>       <item           android:id="@android:id/progress"           >           <clip>               <shape>                   <solid android:color="@color/red"></solid>               </shape>              </clip>       </item>   </layer-list>   这下好了能够正常显示了: 后面又尝试了这样的: [java]  view plain  copy <layer-list xmlns:android="http://schemas.android.com/apk/res/android">       <item android:id="@android:id/background">           <clip>               <shape>                   <gradient                       android:endColor="@color/white"                       android:startColor="@color/white"/>               </shape>           </clip>       </item>       <item android:id="@android:id/secondaryProgress">           <clip>               <shape>                   <gradient                       android:endColor="@color/colorPrimary"                       android:startColor="@color/colorPrimary"/>               </shape>           </clip>       </item>       <item android:id="@android:id/progress">           <clip>               <shape>                   <gradient                       android:endColor="@color/colorPrimary"                       android:startColor="@color/colorPrimary"/>               </shape>           </clip>       </item>   </layer-list>   也是ok 如图: 这是自己定义的ProgressBar的style  [html]  view plain  copy <style name="StyleProgressBarMini" parent="Widget.AppCompat.ProgressBar.Horizontal">          <item name="android:maxHeight">50dp</item>       <item name="android:minHeight">10dp</item>       <item name="android:indeterminateOnly">false</item>       <item name="android:indeterminateDrawable">           @android:drawable/progress_indeterminate_horizontal       </item>       <item name="android:progressDrawable">@drawable/shape_progressbar_mini</item>      </style>   具体使用如下: [html]  view plain  copy <ProgressBar       android:id="@+id/pb_progressbar"       style="@style/StyleProgressBarMini"       android:layout_width="match_parent"       android:layout_height="wrap_content"       android:layout_margin="30dp"       android:max="100"       android:progress="50"/>   ok 下面说说 自定义圆形的 圆形的主要修改   android:indeterminateDrawable 属性 第一步,在drawable文件夹下新建:progressbar_circle_1.xml,如下: [html]  view plain  copy <?xml version="1.0" encoding="utf-8"?>   <rotate xmlns:android="http://schemas.android.com/apk/res/android"       android:drawable="@drawable/loading" //自定义的菊花图片       android:fromDegrees="0"       android:pivotX="50%"       android:pivotY="50%"       android:toDegrees="360" >      </rotate>   第二步,在Style中定义mProgress_circle,如下: [html]  view plain  copy <style name="mProgress_circle">       <item name="android:indeterminateDrawable">@drawable/progressbar_circle_1</item>       <item name="android:minWidth">25dp</item>       <item name="android:minHeight">25dp</item>       <item name="android:maxWidth">60dp</item>       <item name="android:maxHeight">60dp</item>   </style>   支持大小自己随意定,别失真就好 第三步,组件中引用,如下 [html]  view plain  copy <ProgressBar       android:id="@+id/progressBar2"       style="@style/mProgress_circle"       android:layout_gravity="center_vertical"       android:layout_width="match_parent"       android:indeterminateDuration="1200"       android:layout_height="wrap_content" />   上面是通过一张图片填充 android:indeterminateDrawable,我们也可以定义一个 动画或者自定义 颜色(shape)来实现,跟图片的用法一样: 定义动画 progress_circle_loading,xml: [html]  view plain  copy <animation-list android:oneshot="false"     xmlns:android="http://schemas.android.com/apk/res/android">     <item android:duration="100" android:drawable="@drawable/loading_1" />     <item android:duration="100" android:drawable="@drawable/loading_2" />     <item android:duration="100" android:drawable="@drawable/loading_3" />     <item android:duration="100" android:drawable="@drawable/loading_4" />     <item android:duration="100" android:drawable="@drawable/loading_5" />     <item android:duration="100" android:drawable="@drawable/loading_6" />   </animation-list>   style的indeterminateDrawable引入: [html]  view plain  copy <item name="android:indeterminateDrawable">@drawable/progress_circle_loading</item>   定义shape颜色 progress_circle_shape.xml [html]  view plain  copy <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="8"       android:useLevel="false" >       <gradient         android:centerColor="#FFFFFF"         android:centerY="0.50"         android:endColor="#1E90FF"         android:startColor="#000000"         android:type="sweep"         android:useLevel="false" />     </shape>   </rotate>   style的indeterminateDrawable引入: [html]  view plain  copy <item name="android:indeterminateDrawable">@drawable/progress_circle_shape</item>   关于seekBar 的自定义和ProgressBar的基本一致 ok  老实说, 上面的关于 gradient shape 这新的知识不是很熟悉, 以后要专门写一篇关于这个的 参考了以下文章 http://blog.csdn.net/mad1989/article/details/38042875
转载请注明原文地址: https://www.6miu.com/read-2542.html

最新回复(0)