Android自定义控件实现环形播放进度条_android 音乐播放器环形进度条-优快云博客

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

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

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

 
    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是我自定义的属性前缀布局配置文件的前几行是这么写的

 
    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