Android自定义控件实现环形播放进度条

来源：互联网发布：linux gem命令编辑：程序博客网时间：2024/05/18 01:48

导读：我们就可以再Android的基础控件上实现我们想要的功能或者自定义的外观。以ProgressBar为例，对于可调节的进度条似乎只有长条形的ProgressBar

Android提供了很多基本的控件实现，但不是一个完整、强大的实现。可幸的是，Android提供了自定义控件的实现，有了自定义控件，我们就可以再Android的基础控件上实现我们想要的功能或者自定义的外观。以ProgressBar为例，对于可调节的进度条似乎只有长条形的ProgressBar（圆形的貌似都是不停转动的,有说的不当的地方不要拍砖啊）假如我们想要一个可调节进度的圆形进度条呢。。。

下面我们直接切入主题
且看红色LinearLayout里的四个自定义控件的配置参数

view source
print?
01<LinearLayout 
02    android:layout_height="wrap_content"
03    android:layout_width="match_parent"
04    android:id="@+id/linearLayout2"
05    android:orientation="horizontal"
06    android:background="#ff0000"
07    android:gravity ="center_horizontal">
08     
09                    <com.genius.progress.RoundProgressBar
10                     android:id="@+id/roundBar1"
11                     android:layout_width="96px" 
12                     android:layout_height="96px"
13                          roundProgress:max="100"
14                    />
15                       
16                       
17                        <com.genius.progress.RoundProgressBar
18                     android:id="@+id/roundBar2"
19                     android:layout_width="96px" 
20                     android:layout_height="96px"
21                          roundProgress:max="100"
22                     roundProgress:fill ="false"   
23                     roundProgress:Paint_Width ="20"
24                    />
25                     
26                     
27                     <com.genius.progress.RoundProgressBar
28                     android:id="@+id/roundBar3"
29                     android:layout_width="wrap_content" 
30                     android:layout_height="wrap_content"
31                     android:background="@drawable/background3"
32                          roundProgress:max="100"
33                          roundProgress:fill ="false"   
34                          roundProgress:Inside_Interval="3"
35                     roundProgress:Paint_Width ="4"
36                     roundProgress:Paint_Color ="0xff0000ff"
37                          roundProgress:Show_Bottom ="false"
38                    />
39                     
40                    
41                     
42                    <com.genius.progress.RoundProgressBar
43                     android:id="@+id/roundBar4"
44                     android:layout_width="wrap_content" 
45                     android:layout_height="wrap_content"
46                     android:background="@drawable/background2"            
47                          roundProgress:max="100"
48                          roundProgress:Inside_Interval="10"
49                     roundProgress:fill ="true"       
50                     roundProgress:Paint_Width ="4"                        
51                     roundProgress:Paint_Color ="0xffaa55aa"
52                          roundProgress:Show_Bottom ="false"
53                    />
54                    
55     
56    </LinearLayout>

roundProgress是我自定义的属性前缀布局配置文件的前几行是这么写的

view source
print?
1<?xml version="1.0"encoding="utf-8"?>
2<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
3        xmlns:roundProgress="http://schemas.android.com/apk/res/com.genius.demo"
4    android:orientation="vertical"
5    android:layout_width="fill_parent"
6    android:layout_height="fill_parent"
7    android:background="#ffffff"
8    > 

注意这一行 xmlns:roundProgress="http://schemas.android.com/apk/res/com.genius.demo“ roundProgress就是在这里定义的 com.genius.demo是R.java文件所在的包名该类自定义属性的参数配置文件如下

view source
print?
01<?xml version="1.0"encoding="utf-8"?> 
02<resources> 
03 
04    <declare-styleable name="RoundProgressBar"> 
05        <attr name="max"format="integer"/>       
06        <attr name="fill"format="boolean"/>                        <!-- 是否填充圆形区域 -->
07        <attr name="Paint_Width"format="integer"/>                <!-- 画笔宽度，填充模式下无效，会被重置为0--> 
08        <attr name="Paint_Color"format="integer"/>                <!-- 画笔颜色 -->
09        <attr name="Show_Bottom"format="boolean"/>                <!-- 是否显示底色 -->
10        <attr name="Inside_Interval"format="integer"/> <!-- 圆形区域向里缩进的距离 -->
11    </declare-styleable> 
12     
13</resources> 

这样在布局文件中，就可以配置这些属性值了，相关定义注释已写的很清楚，具体的大家下代码跑一跑比对一下就知道了

由于绘图使用的是纯画笔绘制，那么在视觉上看起来会比较单调，其实可以通过对画笔设置渲染效果来达到一个炫丽的效果,有兴趣的童鞋可以试一下，Paint.setShader这个接口，本例无此实现，就不详细介绍了

控件中有两个接口是作动画相关的
public synchronized void startCartoom(int time)
public synchronized void stopCartoom()

比如你想播放一个10秒的录音，同时用进度条来表示播放进度，那么就可以调用 startCartoom(i10)来开启动画
其他的似乎没啥好说的了，代码就不贴上来了，源码工程里的注释也写很清楚了，大家下下来看看就明白了

至于为什么该类继承于TextView而不是View其实是为了在配置文件里指定背景图能够自适应大小，继承与View则需要自己去实现，其实也不难，重写OnMeasure方法，在该方法里调用setMeasuredDimension重新设置视图大小为背景图大小就可以了，怎么获取背景图就不用哥说了吧。
好吧，就这样吧，附上源码工程：

http://www.eoe.cn/uploadfile/2011/1206/20111206024630395.zip