1、ProgressBar分为两种,我们能明确看到进度,不确定的就是不清楚、不确定一个操作需要多长时间来完成,这个时候就需要用的不确定的ProgressBar了。属性android:indeterminate如果设置为true的话,那么ProgressBar就可能是圆形的滚动条或者水平的滚动条(由样式决定),但是我们一般时候,是直接使用Style类型来区分圆形还是水平ProgressBar的。
2、ProgressBar(Horizontal 才有,无进度的没有)有两个进度,一个是android:progress,另一个是android:secondaryProgress。后者主要是为缓存需要所涉及的,比如在看网络视频时候都会有一个缓存的进度条以及还要一个播放的进度,在这里缓存的进度就可以是android:secondaryProgress,而播放进度就是android:progress,有了secondProgress,可以很方便定制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: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 android:id="@+id/progressBar" style="?android:attr/progressBarStyleHorizontal" android:layout_width="match_parent" android:layout_height="wrap_content" />和
<ProgressBar android:id="@+id/progressBar" style="@android:style/Widget.ProgressBar.Horizontal" android:layout_width="match_parent" android:layout_height="wrap_content" />的效果是一样的。
我们去看一下style="?android:attr/progressBarStyleHorizontal"的源码和style="@android:style/Widget.ProgressBar.Horizontal" 的源码其实是一样的如下:
<style name="Widget.ProgressBar.Horizontal"> <item name="indeterminateOnly">false</item>所以其实我们要修改样式的话只需要修改 android:progressDrawable"对应的资源就可以了。<item name="android:indeterminateOnly">false</item> <!-- 进度条的背景,progress ,secondaryProgress 的颜色--> <item name="android:progressDrawable">@drawable/progressbar_horizontal</item><!-- progress_horizontal --> <item name="android:indeterminateDrawable">@android:drawable/progress_indeterminate_horizontal</item> <!--高度--><item name="minHeight">20dip</item> <item name="maxHeight">20dip</item> <item name="mirrorForRtl">true</item></style>
<item name="android:progressDrawable">@drawable/progressbar_horizontal</item><!-- progress_horizontal -->
<?xml version="1.0" encoding="utf-8"?> <!-- Copyright (C) 2008 The Android Open Source Project Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. --> <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>
<?xml version="1.0" encoding="utf-8"?> <layer-list xmlns:android="http://schemas.android.com/apk/res/android"> <item android:id="@android:id/background"> <shape> <corners android:radius="1dip" /> <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="1dip" /> <gradient android:startColor="#006633" android:centerColor="#eecc33" android:centerY="0.75" android:endColor="#009933" android:angle="270" /> </shape> </clip> </item> <item android:id="@android:id/progress"> <clip> <shape> <corners android:radius="1dip" /> <gradient android:startColor="#00ff66" android:centerColor="#00cc66" android:centerY="0.75" android:endColor="#009966" android:angle="270" /> </shape> </clip> </item> </layer-list>
然后我们在values文件中的styles.xml文件中添加一个自定义的style
<style name="ProgressHorizontal"> <item name="android:indeterminateOnly">false</item> <!-- 进度条的背景,progress ,secondaryProgress 的颜色--> <item name="android:progressDrawable">@drawable/progressbar_horizontal_custom.xml</item><!-- progress_horizontal --> <item name="android:indeterminateDrawable">@android:drawable/progress_indeterminate_horizontal</item> <!--高度--> <item name="android:minHeight">10dip</item> <item name="android:maxHeight">10dip</item> </style>将 android:progressDrawable 的值改成我们自己定义的progressbar_horizontal_custom.xml
然后我们就可以在XMl中使用我们自定义的样式了
<ProgressBar android:id="@+id/progressBar" style="@style/ProgressHorizontal" android:layout_width="match_parent" android:layout_height="wrap_content" android:progress="50" android:secondaryProgress="70" android:visibility="visible" />
效果:
我这里还改了他的高度。
还有就是 background,progress,secondaryProgress对应的三个条目,可以用图片来代替shape.但是一点要用.9path的图片.
例如:
<?xml version="1.0" encoding="utf-8"?> <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>
其他用法是一样的再次不多说。
好下面看转圈的进度条
<ProgressBar android:id="@+id/progressBar" style="@android:style/Widget.ProgressBar" android:layout_gravity="center_vertical" android:layout_width="match_parent" android:layout_height="wrap_content" />我们先看Widget.Progress的源码:
<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>其中
<item name="indeterminateDrawable">@drawable/progress_medium_white</item>
以上属性的值可以是一个动画,也可以是一个图片(shape也可以),
再看 @drawable/progress_medium_white(andorid4.0)
<animated-rotate xmlns:android="http://schemas.android.com/apk/res/android" android:drawable="@drawable/spinner_white_48" android:pivotX="50%" android:pivotY="50%" android:framesCount="12" android:frameDuration="100" />发现其实就是一个不断重复的旋转动画
所以只要将
android:drawable="@drawable/spinner_white_48"属性对应的图片换成我们需要的样式就可以定制我们自己想要的样式了。
后面的步骤和horizontal的一样再次不多说