Android自定义控件之自定义属性

前言

自定义控件可以说是android里的一个门槛，对很多android开发者来说可能都会认为比较难，当然这也是成为一个高手的必经之路，因此我准备在定义控件上多下些功夫，多花点时间研究，多写博客，如果想一起学习自定义控件，欢迎大家关注，如有疑问欢迎留言，如有谬误欢迎批评指正。

一、自定义控件步骤

1.自定义View属性
2.重写onMeasure
3.重写onLayout
4.重写onDraw
今天这篇博客主要介绍第一步自定义属性，通过一个案例来进行讲解
案例的效果如下

即我们通过自定义View画一个圆，其中可以控制圆的半径大小和颜色，具体怎么做的呢？

二、自定义属性方法

1.首先在res/values/目录下创建attrs文件，如下所示

1<declare-styleable name="CircleView">
2
3      <attr name="circleRadius" format="dimension"/>
4      <attr name="circleColor" format="color"/>
5</declare-styleable>

WheelRecyclerView是自己起的名字，不要与系统的冲突就行，
<attr name="circleRadius" format="dimension"/>其中name就是自定义属性的名字（类似于系统控件的android:layout_width） format 就是属性的类型，这里支持10种类型，如下图所示

我们先把这个小案例的流程走完，大家对流程熟悉之后再对细节进行讲解。

2.编写自定义View,并在构造方法中获取我们自定义的属性

1   public CircleView(Context context) {
2        this(context,null);
3    }
4
5    public CircleView(Context context, @Nullable AttributeSet attrs) {
6        this(context, attrs,0);
7    }
8
9	/**
10     * 获取自定义属性
11     * @param context
12     * @param attrs
13     * @param defStyleAttr
14     */
15    public CircleView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
16        super(context, attrs, defStyleAttr);
17
18         TypedArray ta=context.obtainStyledAttributes(attrs, R.styleable.CircleView);
19        /**
20         * 获取圆的半径属性
21         */
22        circleRadius=ta.getDimension(R.styleable.CircleView_circleRadius,DEFAULT_RADIUS);
23        /**
24         * 获取圆的颜色属性
25         */
26        mColor=ta.getColor(R.styleable.CircleView_circleColor,DEFAULT_COLOR);
27        ta.recycle();
28
29
30        init();
31    }

从上面可以看出，在一个参数的构造方法中，调用了两个参数的构造方法，然后在两个参数的构造方法中调用了三个参数的构造方法，然后通过context的obtainStyledAttributes方法可以得到一个TypedArray对象，这个对象里面封装了获取各个属性的方法，比如getDimension，getColor,getFloat等方法用来获取属性值。

3.重写onMeasure方法

1@Override
2    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
3        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
4
5        /**
6         * Extracts the mode from the supplied measure specification
7         * 从提供的测量规范中获取模式
8         */
9        int widthMode=MeasureSpec.getMode(widthMeasureSpec);
10        /**
11         * Extracts the size from the supplied measure specification
12         * 从提供的测量规范中获取大小
13         */
14        int widthSize=MeasureSpec.getSize(widthMeasureSpec);
15
16        int heightMode=MeasureSpec.getMode(heightMeasureSpec);
17        int heightSize=MeasureSpec.getSize(heightMeasureSpec);
18        /**
19         * 如果宽度的测量模式是AT_MOST
20         * 则设置宽度
21         */
22        if(widthMode==MeasureSpec.AT_MOST){
23
24            widthSize= (int) (circleRadius*2+getPaddingLeft()+getPaddingRight());
25        }
26
27        if(heightMode==MeasureSpec.AT_MOST){
28
29            heightSize= (int) (circleRadius*2+getPaddingTop()+getPaddingBottom());
30        }
31
32        setMeasuredDimension(widthSize,heightSize);
33    }

上面我们重写了onMeasure方法，获取测量模式、获取控价大小并且按照我们自己的要求制定规则调用setMeasuredDimension此方法设置最终的宽和高。

4.重写onDraw方法

1 @Override
2    protected void onDraw(Canvas canvas) {
3        super.onDraw(canvas);
4
5        int paddingLeft=getPaddingLeft();
6        int paddingTop=getPaddingTop();
7        int paddingBottom=getPaddingBottom();
8        int paddingRight=getPaddingRight();
9
10        int width=getWidth()-paddingLeft-paddingRight;
11        int height=getHeight()-paddingBottom-paddingTop;
12
13        canvas.drawCircle(width/2+paddingLeft,height/2+paddingTop,circleRadius,mPaint);
14    }

onDraw方法很简单就是调用canvas的drawCircle方法，设置好圆的位置、半径和画笔画一个圆

到这里一个简单的自定义控件以及完成了，在布局中声明我们自定义的View如下:

1<?xml version="1.0" encoding="utf-8"?>
2<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
3    android:layout_width="match_parent"
4    android:layout_height="match_parent"
5    xmlns:app="http://schemas.android.com/apk/res-auto">
6
7    <com.example.video.CircleView
8        android:layout_width="wrap_content"
9        android:layout_height="wrap_content"
10        android:layout_margin="5dp"
11        android:padding="5dp"
12        app:circleRadius="50dp"
13        app:circleColor="#FF0000"/>
14
15</LinearLayout>

运行即可看到文章开头的效果。

三、自定义属性format类型详解

接下来咱们对自定义属性时的format的类型做一下说明，format的类型一共10中分别为：
string、boolean、color、dimension、enum、flags、float、fraction、integer、reference。

1.string

即字符串这个很好理解，类似于系统的textview设置text内容，在attrs中声明如下

1<declare-styleable name="名称">
2    <attr name="text" format="string"/>
3</declare-styleable>

在布局中设置如下

app:text="Hello World!"

系统textview的text设置如下

android:text="hello world!!!"

2.boolean

布尔类型，有两个值true和false,类似于系统Button的clickable属性，在attrs中声明如下

1<declare-styleable name="名称">
2    <attr name="clickable" format="boolean"/>
3</declare-styleable>

在布局中设置如下

app:clickable="true"

系统button的clickable设置如下

android:clickable="false"

3.color

设置颜色即设置16进制的颜色，在attrs中声明如下

1<declare-styleable name="名称">
2    <attr name="color" format="color"/>
3</declare-styleable>

在布局中有如下两种设置方式

1app:color="#FFFFFF"
2app:color="@color/id"

系统中给TextView设置字体颜色

android:textColor="@color/colorPrimary"

4.dimension

设置尺寸值，一般用来设置dp值，在attrs中声明如下

1<declare-styleable name="名称">
2    <attr name="circleRadius" format="dimension" />
3</declare-styleable>

在布局中可以进行如下设置

 app:circleRadius="50dp"

系统textview设置宽度的方法

 android:layout_width="50dp"

5.enum

设置枚举，一般有几个选项，用来选择，可以参考LinearLayout的orientation属性，在attrs中声明如下

1<attr name="orientation">
2    <enum name="horizontal" value="0"/>
3    <enum name="vertical" value="1"/>
4</attr>

在布局中可以进行如下的属性设置

enum “

可以看到当我们输入orientation的时候会有两个选项就是我们上述xml中所声明的horizontal和vertical

系统中的LinearLayout与之同理。

6.flags

位或运算即可以进行多个选择，在atts中声明如下

1<declare-styleable name="CircleView">
2     <attr name="gravity" format="flags">
3         <flag name="top" value="0"/>
4         <flag name="center" value="1"/>
5         <flag name="right" value="2"/>
6         <flag name="left" value="3"/>
7     </attr>
8</declare-styleable>

在布局中可以进行如下的属性设置

app:gravity="right|left|top"

7.float

浮点类型，在attr中声明如下

1<declare-styleable name="CircleView"> 
2   <attr name = "alpha" format="float" />
3</declare-styleable>

在布局中可以对属性进行如下设置

app:alpha="0.8"

8.fraction

百分数，一般有两种

100% 表示相对于对象自身的百分比
100%p 表示相对于父容器的百分比，percent of parent
<declare-styleable name="CircleView"> <attr name="progress" format="fraction"/> </declare-styleable>

在布局中可以属性进行如下设置

app:progress="50%"

9.integer

整形，这个很简单，就不说了

10.reference

某一资源ID，在attr中声明如下

1<declare-styleable name="CircleView">
2	<attr name="pic" format="reference"/>
3</declare-styleable>