自定义View实现圆形水波进度条

607 查看

每次听到某大牛谈论自定义View，顿时敬佩之心，如滔滔江水连绵不绝，心想我什么时候能有如此境界，好了，心动不如行动，于是我开始了自定义View之路，虽然过程有坎坷，但是结果我还是挺满意的。我知道大牛还遥不可及，但是我已使出洪荒之力。此篇博客记录本人初入自定义View之路。

既然是初出茅庐，自然是按部就班的进行,先来一张效果图

这里写图片描述

本文章所写项目代码的GitHub链接

自定义属性

自定义属性，就是在资源文件夹下values目录中创建一个attrs.xml文件，
文件结构如下所示，atrr标签就是我们要自定义的一些属性，name就是自定义属性的名字，那么format是做什么的呢？

<?xml version="1.0" encoding="utf-8"?>

<declare-styleable name="">

</attr>

</declare-styleable>

</resources>

format是属性对应的值的类型，有十个值

enm 枚举类型，例 android:orientation=”vertical” 此值有horizontal，和 vertical
dimension 尺寸值
color 颜色值，例 android:textColor = “#00FF00”
boolean 布尔值，true or false
flag 位或运算
float 浮点型
fraction 百分数，
reference 参考某一资源ID,例 android:background = “@drawable/ic_launcher”
string 字符串类型
integer 整型值

知道了这些值得含义，就可以自定义我们自己的属性了，对于这个进度条，我们可以自定义圆的半径，颜色，和圆中心文本的大小，颜色，文本，最后attrs.xml文件为

<?xml version="1.0" encoding="utf-8"?>

<declare-styleable name="CustomBallView">

</declare-styleable>

</resources>

布局文件配置相关内容

在布局文件要配置我们自定义的属性，首先要自定义命名空间，

如上图，如果在as中命名空间写成http://schemas.android.com/apk/res/包名此时as会报错，这是gradle造成的，在eclipse中如果自定义的属性是不能用res-auto的必须得替换成你自定义view所属的包名，如果你在恰好使用的自定义属性被做成了lib 那就只能使用res-auto了，而在android-studio里，无论你是自己写自定义view 还是引用的lib里的自定义的view 都只能使用res-auto这个写法。以前那个包名的写法在android-studio里是被废弃无法使用的
所以配置后的布局文件如下

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

xmlns:customBallView="http://schemas.android.com/apk/res-auto"

xmlns:tools="http://schemas.android.com/tools"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:orientation="vertical"

tools:context="com.example.xh.customball.MainActivity"

tools:showIn="@layout/activity_main">

<TextView

android:id="@+id/textView"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:visibility="gone"

android:text="Hello World!" />

<com.example.xh.customball.CustomBall

android:background="@color/colorPrimary"

android:layout_centerInParent="true"

android:layout_margin="10dp"

customBallView:centerText="30%"

customBallView:centerTextSize="28dp"

customBallView:centerTextColor="#000000"

customBallView:ballColor="@color/colorAccent"

customBallView:ballRadius="30dp"

android:layout_width="260dp"

android:layout_height="260dp">

</com.example.xh.customball.CustomBall>

</LinearLayout>"crayon-v">xh.customball.CustomBall>

</LinearLayout>߇程有坎坷，但是结果我还是挺满意的。我知道大牛还遥不可及，但是我已使出洪荒之力。此篇博客记录本人初入自定义View之路。

既然是初出茅庐，自然是按部就班的进行,先来一张效果图

这里写图片描述

本文章所写项目代码的GitHub链接

自定义属性

<?xml version="1.0" encoding="utf-8"?>

<declare-styleable name="">

</attr>

</declare-styleable>

</resources>

format是属性对应的值的类型，有十个值

enm 枚举类型，例 android:orientation=”vertical” 此值有horizontal，和 vertical
dimension 尺寸值
color 颜色值，例 android:textColor = “#00FF00”
boolean 布尔值，true or false
flag 位或运算
float 浮点型
fraction 百分数，
reference 参考某一资源ID,例 android:background = “@drawable/ic_launcher”
string 字符串类型
integer 整型值

<?xml version="1.0" encoding="utf-8"?>

<declare-styleable name="CustomBallView">

</declare-styleable>

</resources>

布局文件配置相关内容

在布局文件要配置我们自定义的属性，首先要自定义命名空间，

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

xmlns:customBallView="http://schemas.android.com/apk/res-auto"

xmlns:tools="http://schemas.android.com/tools"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:orientation="vertical"

tools:context="com.example.xh.customball.MainActivity"

tools:showIn="@layout/activity_main">

<TextView

android:id="@+id/textView"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:visibility="gone"

android:text="Hello World!" />

<com.example.xh.customball.CustomBall

android:background="@color/colorPrimary"

android:layout_centerInParent="true"

android:layout_margin="10dp"

customBallView:centerText="30%"

customBallView:centerTextSize="28dp"

customBallView:centerTextColor="#000000"

customBallView:ballColor="@color/colorAccent"

customBallView:ballRadius="30dp"

android:layout_width="260dp"

android:layout_height="260dp">

</com.example.xh.customball.CustomBall>

</LinearLayout>>

自定义控件

有了上边的操作，接下来就开始到了真正自定义控件的时候了，创建一个CustomBall类继承View类，先看构造方法，我们写成构造方法最终调用三个参数的构造方法，获取自定义属性的值及初始化工作就在三个参数构造方法中进行。下面我先先来绘制一个圆，文字画在圆心试试手，效果如图