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

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

 

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

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

<LinearLayout
    android:layout_height="wrap_content"
    android:layout_width="match_parent"
    android:id="@+id/linearLayout2"
    android:orientation="horizontal"
    android:background="#ff0000"
    android:gravity = "center_horizontal">
   
                    <com.genius.progress.RoundProgressBar
                     android:id="@+id/roundBar1"
                     android:layout_width="96px" 
                     android:layout_height="96px"
                          roundProgress:max="100"
                    />
                     
                     
                        <com.genius.progress.RoundProgressBar
                     android:id="@+id/roundBar2"
                     android:layout_width="96px" 
                     android:layout_height="96px"
                          roundProgress:max="100"
                     roundProgress:fill = "false"   
                     roundProgress:Paint_Width = "20"
                    />
                   
                   
                     <com.genius.progress.RoundProgressBar
                     android:id="@+id/roundBar3"
                     android:layout_width="wrap_content" 
                     android:layout_height="wrap_content"
                     android:background="@drawable/background3"
                          roundProgress:max="100"
                          roundProgress:fill = "false"   
                          roundProgress:Inside_Interval="3"
                     roundProgress:Paint_Width = "4"
                     roundProgress:Paint_Color = "0xff0000ff"
                          roundProgress:Show_Bottom = "false"
                    />
                   
                  
                   
                    <com.genius.progress.RoundProgressBar
                     android:id="@+id/roundBar4"
                     android:layout_width="wrap_content" 
                     android:layout_height="wrap_content"
                     android:background="@drawable/background2"            
                          roundProgress:max="100"
                          roundProgress:Inside_Interval="10"
                     roundProgress:fill = "true"       
                     roundProgress:Paint_Width = "4"                        
                     roundProgress:Paint_Color = "0xffaa55aa"
                          roundProgress:Show_Bottom = "false"
                    />
                  
   
    </LinearLayout>

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

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文件所在的包名 该类自定义属性的参数配置文件如下

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

转自：http://www.eoeandroid.com/code/2011/1206/254.html