android自定义ProgressBar 修改进度条样式 出现setProgress无效问题

在很多时候android系统提供的进度条样式是不足以满足我们的需求的，因此在大多数的时候，我们为了美观，亦或者为了实现自己的功能，需要在系统的基础上进行修改其样式，当然你也可以自己从头写一个，不过个人觉得还是比较麻烦，好吧，废话不多说了，进入正题。

昨天在做一个下载功能时，需要一个进度条显示其进度，本来是很简单的功能，以前也做过，本以为很容易就可以实现，却因为一个细节，浪费了好几个小时，因此就记录一下，以防其他人遇到同样的问题。

首先说一下我遇到的问题，自定义进度条样式时，设置layer-list中时使用的是.9图片，导致在java代码中设置setProgress无效问题，原因.9图片直接填充整个进度条，那问题来了，进度条样式是不是不能用.9图片呢？答案是否定的，先来看下具体的代码：

布局文件

<FrameLayout
android:id="@+id/progress_layout"
android:layout_width="match_parent"
android:layout_height="38dp"
android:layout_centerVertical="true"
android:layout_toLeftOf="@id/bottom_share"
android:layout_toRightOf="@id/bottom_favorites"
android:background="@drawable/detail_btn">

<ProgressBar
android:id="@+id/pb_load_process"
style="?android:attr/progressBarStyleHorizontal"
android:progressDrawable="@drawable/progress_drawable"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:progress="0"
android:max="100"
/>

<TextView
android:id="@+id/tv_load_process"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:text="暂停"
android:textColor="#ffffff"
android:textSize="18sp" />
</FrameLayout>
progressBar应用样式文件

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="@android:id/background" android:drawable="@drawable/progress_bg"/>
<item android:id="@android:id/progress" android:drawable="@drawable/progress_btn_normal"/>
</layer-list>因为用不到第二进度所以就没加，progress_btn_normal是.9图片蓝色的，progress_bg是黑色的图片，先看下效果图


 

我们可以看到下载到5%时的时候，进度图片直接填充了整个进度条，好吧，其实从0%开始就是直接填充的整个进度条，我一开始以为是我有什么参数设置错了，把我以前写的拿出来对比了半天，发现没有什么不一样的，这时候就头疼了，百度google出来的答案一大堆，一开始没想到是图片的问题，以为是哪边设置错误导致setProgress无效，有说是需要用handler来更新进度，不能放到主线程，还有说这是ProgressBar的一个BUG等等，试了几个都没用，真是见了鬼了，后来实在没辙了，就逛百度Google只要跟ProgressBar自定义样式，setProgress有关的，我就点进去看，终于看到一个东西，说是在自定义样式时用.9图片需要这样设置<nine-patch
android:src="@drawable/progress_btn_normal"/> 然后我就想到不会吧，难道跟图片有关？然后我就直接把设置进度条样式的那段直接删除，只留一个背景，用系统原本的进度条，发现恢复正常了，然后又将进度样式图片改成普通的图片，我滴天，进度终于有用了，换回.9图片，又是一样的填充了，原来还真是图片的原因。。。。好吧，然后就是一阵欲哭无泪，又犯了这么低级的错误。。。。。

那么自定义进度样式是不是真的只能用普通图片，不能用.9图片？然后我就按照看到的那样加载.9图片

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="@android:id/background" android:drawable="@drawable/progress_bg"/>
<item android:id="@android:id/progress" >
<nine-patch android:src="@drawable/progress_btn_normal"/>
</item>
</layer-list> 结果。。。还是跟原来一样没有效果。
于是我想到了看看系统对话框的样式是怎么写的

<?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>以上就是系统对话框的样式，我们可以看到一个clip的节点，这个以前没接触过，所以果断查了一下，剪切（Clip）图像资源，使用剪切图像资源可以只显示一部分图像，这种资源经常被用在进度条的制作上，原来这个就是用在进度条上的，以前还真不知道。。。。
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="@android:id/background" android:drawable="@drawable/progress_bg" />
<item android:id="@android:id/progress">
<clip android:drawable="@drawable/progress_btn_normal"/>
</item>
</layer-list>效果图：



至此，问题就解决了，这其实没有什么技术含量，要是之前没遇到过，肯定不会想到是图片的原因，我们可能更多的是会去排查自己的代码。希望能给遇到同样问题的人一些帮助，节省时间，在这种问题上浪费时间个人觉得是非常不值的。。。