自定义一个圆圈View

这篇博客的目的是如何开发一个继承自View的自定义控件。最后的效果是能够得到一个任何页面都能使用的圆圈控件。代码很简单，也很粗陋。但是高楼平地起。

先贴代码，可以先不看，看完后面的解释再看代码：

package com.example.administrator.myfirstandroidstudioproject.customView;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.util.AttributeSet;
import android.view.View;

/**
* Created by Administrator on 2016/4/13.
*/
public class CustomView extends View {
//园的默认颜色
private int mColor = Color.RED;
//一个画笔，用于在onDraw函数中画圆
private Paint mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);

private void init() {
mPaint.setColor(mColor);
}

public CustomView(Context context) {
this(context,null);
init();
}

public CustomView(Context context, AttributeSet attrs) {
this(context, attrs,0);
init();
}

@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
//让warp生效，核心思想就是:
// 当设置成warp时，就用控件自己本身的长度
// （这个本身的长度不是说你在xml中配置的长度，而是比如一个字的长度是10px，那么有两个字的textView的长度就应该是20px）
// 否则就是用控件测量的长度。之前一直以为测量的长度就是控件本身的长度,原来不是。
// 测量的长度是通过父容器的MeasureSpec和自己的LayoutParams和本身的长度共同决定的结果。（这个就得看Android源码了）
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
int widthSpaceMode = MeasureSpec.getMode(widthMeasureSpec);
int widthSpaceSize = MeasureSpec.getSize(widthMeasureSpec);
int heightSpaceMode = MeasureSpec.getMode(heightMeasureSpec);
int heightSpaceSize = MeasureSpec.getSize(heightMeasureSpec);
if (widthSpaceMode == MeasureSpec.AT_MOST && heightSpaceMode == MeasureSpec.AT_MOST) {
setMeasuredDimension(100, 100);
} else if (widthSpaceMode == MeasureSpec.AT_MOST) {
setMeasuredDimension(100, heightSpaceSize);
} else if (heightSpaceSize == MeasureSpec.AT_MOST) {
setMeasuredDimension(widthSpaceSize, 100);
}
}

@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
//让padding生效，核心思想就是自己计算让padding之后的宽度和高度，最后画出来。
final int paddingLeft = getPaddingLeft();
final int paddingRight = getPaddingRight();
final int paddingTop = getPaddingTop();
final int paddingBottom = getPaddingBottom();
int width = getWidth() - paddingLeft - paddingRight;
int height = getHeight() - paddingTop - paddingBottom;
int radius = Math.min(width, height) / 2;
canvas.drawCircle(width / 2, height / 2, radius, mPaint);
}

public CustomView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
init();
}

}

布局

<com.example.administrator.myfirstandroidstudioproject.customView.CustomView
android:id="@+id/circleView1"
android:layout_width="wrap_content"
android:layout_height="100px"
android:background="#000000"
/>

形成一个View有三个过程。

1. onMeasure:测量控件的高和宽，并通过setMeasuredDimension(int measuredWidth, int measuredHeight)方法设置控件的高宽。

2. onLayout：计算控件在视图中的坐标。控件会按照这里设置的坐标决定自己在屏幕上的位置。

3. onDraw：画图，位置确定后，控件通过这个方法画出控件的图形。像上面的例子就是自己在控件的位置上话一个红色的圆。

知道了上面三个方法后就能解决继承View自定义控件所产生的两个问题：

问题1：wrap_content失效。给控件的布局中设置wrap_content将不会再有效果，解决方法参考上面的onMeasure代码。

问题2：padding失效。设置的padding将不会再有效。解决方法参考上面的onDraw方法。

如何给控件创建自定义属性

1. 在values文件夹下创建一个用于创建自定义属性的xml文件，这里就写成attrs.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
<declare-styleable name="CustomView">
<attr name="circle_color" format="color">
</attr>
</declare-styleable>
</resources>

declare-styleable元素指的是一个属性集合，里面可以有多个属性，在本例中只有一个颜色属性。还可以定义其他格式的属性，比如reference是id属性等等。

2. 在构造方法中解析这个xml文件，获取属性值，获得了属性的值，当然可以根据值来设置控件的样子了。

public CustomView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
/*
获取属性集合
*/
TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.CustomView);
/*
从属性集合中获取单个属性
第一个参数里的是获取的属性
第二个参数是如果没有获取到属性的默认属性
*/
mColor=a.getColor(R.styleable.CustomView_circle_color,Color.RED);
/*
释放资源
*/
a.recycle();
init();

}

最后，在布局文件中使用自定义属性。很简单，只有一个地方需要注意，需要指定一个命名空间xmlns，就是下面的 xmlns:app=”http://schemas.android.com/apk/res-auto”，app这个名字可以随便取，报错的原因是，xml必须按照命名空间中的约定编写。这是为了规范xml的格式。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
tools:context="com.example.administrator.myfirstandroidstudioproject.MainActivity">

<com.example.administrator.myfirstandroidstudioproject.customView.CustomView
android:id="@+id/circleView1"
android:layout_width="wrap_content"
android:layout_height="100px"
android:padding="20px"
app:circle_color="@color/colorAccent"
android:background="#000000"
/>
</LinearLayout>

注意的点：自定义view有三个构造函数

在代码中直接new一个Custom View实例的时候，会调用第一个构造函数。这个没有任何争议。

在xml布局文件中调用Custom View的时候，会调用第二个构造函数。这个也没有争议。

在xml布局文件中调用Custom View，并且Custom View标签中还有自定义属性时，这里调用的还是第二个构造函数。

所以，在第三个构造函数如果不在第二个函数里用this（）调用的化，自定义的属性将不会有效。