Android自定义长条形ProgressBar进度条

简述:

最近在做一个类似流量统计的进度条,但是要考虑一种情况就是progress的值超过规定值(比如满值是100)的情况。可能用户希望一眼就看到自己超了流量。而且默认的进度条是黄色的进度,灰黑色的背景。这个也是可以改变的。

此外,还有一个用途是,可以实现,不同的进度,进度条显示不同的颜色(理论上可行,未实验)

效果:

测试值为50时的效果:
Android自定义长条形ProgressBar进度条
测试值为100时的效果:

Android自定义长条形ProgressBar进度条
测试值为150时的效果:
Android自定义长条形ProgressBar进度条

实现原理:

ProgressBar的显示效果,是定义在XML文件中的,像长条形进度条,是定义在
系统的drawable/progress_horizontal.xml文件中,通过分析此文件,可以明白为什么进度条是那样显示的。
源文件代码:

<?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>

这个layer-list是一个分层的东东,里面有三层(由3个item元素定义),分别代表背景,第二层进度条,最前一层进度条。
通过查找ProgressBar的文档,我们知道,他有一个setProgressDrawable方法,思路来了,自己模仿这个文件,写一个Drawable资源文件,只要变变颜色即可,哈哈。不过中间遇到的问题不少。
先贴代码:
activity:

public class MainActivity extends Activity {
private ProgressBar pb01 = null;

int flow = 0;
/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);

pb01 = (ProgressBar)findViewById(R.id.ProgressBar01);

flow=150;
if(flow<=100){
pb01.setProgressDrawable(getResources().getDrawable(R.drawable.progressbar));
pb01.setSecondaryProgress(100);
pb01.setProgress(flow);
}
else{
pb01.setProgressDrawable(getResources().getDrawable(R.drawable.progressbar2));
pb01.setSecondaryProgress(110);
pb01.setProgress(100);
}
}
}

main.xml

<?xml version=”1.0″ encoding=”utf-8″?>
<LinearLayout xmlns:android=”http://schemas.android.com/apk/res/android”
android:orientation=”vertical”
android:layout_width=”fill_parent”
android:layout_height=”fill_parent”
>
<TextView
android:layout_width=”fill_parent”
android:layout_height=”wrap_content”
android:text=”@string/hello”
/>
<ProgressBar
android:id=”@+id/ProgressBar01″
style=”?android:attr/progressBarStyleHorizontal”
android:layout_width=”fill_parent”
android:layout_height=”wrap_content”
android:max=”120″
>
</ProgressBar>
</LinearLayout>

progressbar.xml放在drawable或者drawable-mdpi下注意,xml文件名禁止有大写字母

<?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=”5dip” />
<gradient
android:startColor=”#ffD09BA1″
android:centerColor=”#ffDC4E66″
android:centerY=”0.5″
android:endColor=”#ffD0223D”
android:angle=”270″
/>
</shape>
</item>

<item android:id=”@android:id/secondaryProgress”>
<clip>
<shape>
<corners android:radius=”5dip” />
<gradient
android:startColor=”#ff9d9e9d”
android:centerColor=”#ff5a5d5a”
android:centerY=”0.75″
android:endColor=”#ff747674″
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>

progressbar2.xml

<?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=”5dip” />
<gradient
android:startColor=”#ffD09BA1″
android:centerColor=”#ffDC4E66″
android:centerY=”0.5″
android:endColor=”#ffD0223D”
android:angle=”270″
/>
</shape>
</item>

<item android:id=”@android:id/secondaryProgress”>
<clip>
<shape>
<corners android:radius=”5dip” />
<gradient
android:startColor=”#ffD66D7B”
android:centerColor=”#ffF02740″
android:centerY=”0.75″
android:endColor=”#ffF00A29″
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>

大功告成

注意事项:

在main.xml中不能指定progress的值,否则progress不会显示,可能是因为没有进行绘图就setProgress的原因

参考资料:

http://www.cnblogs.com/xirihanlin/archive/2010/06/14/1758145.html

http://www.javaeye.com/topic/788978

遗留问题:

1、能否实现只动态改变background或progresss或secondaryProgress的颜色
2、<clip>元素是什么意思,
切片?可切?

刘钊的博客:http://www.liuzhaocn.com

发表评论

电子邮件地址不会被公开。 必填项已用*标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据

  • © 2010 知研片语
  • 京ICP备16042882号