这篇文章是基于以下两篇文章的实践：
1.自定义View - 基础
2.自定义View - Canvas - 图形绘制
我们在常用的 UI 布局中，常会用到这样的圆点：
当然我们可以用一张图片，利用 tintMode 显示出不同的颜色，从而实现这样的效果，这一点，我在之前 Material Design 中已经讲过。
今天，我们利用自定义 View 来实现。
一、第一步：考虑需要的属性
对于这个圆点，在项目需求中，通常只是一个指示器，因此需要设置的属性并不多。大致有两个：
- 颜色
- 大小 ，这里我们将大小参数定为半径
设定的属性需要写在 styles.xml 中（为了区分，你也可以新建一个 xml 文件用于存储自定义 View 的属性声明）
<declare-styleable name="PointView">
<attr name="radio" format="dimension"></attr>
<attr name="pointColor" format="color"></attr>
</declare-styleable>
说明：
- 声明属性要用 declare-styleable 标签包裹，其中 name 属性为 新建类的类名。
- attr 中为各个属性的说明，包括名称(name)，类型(format)
二、第二步：新建类，并获取属性
这里我自定义的 View 为 PointView。首先继承 View 并重写构造器。在构造器中，我们需要初始化画笔，并获取 xml 中自定义的属性。
public class PointView extends View {
private float mRadio = 3;
private int mPointColor = Color.BLACK;
private Paint mPaint;
public PointView(Context context) {
super(context);
initPaint();
}
public PointView(Context context, @Nullable AttributeSet attrs) {
super(context, attrs);
TypedArray ta = null;
try {
ta = context.obtainStyledAttributes(attrs, R.styleable.PointView);
mRadio = ta.getDimension(R.styleable.PointView_radio, dp2px(3));
mPointColor = ta.getColor(R.styleable.PointView_pointColor, Color.YELLOW);
} finally {
if (ta != null) {
ta.recycle();
}
}
initPaint();
}
private void initPaint(){
if (mPaint == null) {
mPaint = new Paint();
mPaint.setColor(mPointColor);
mPaint.setFlags(Paint.ANTI_ALIAS_FLAG);
}
}
}
三、第三步：绘制图形
这里的圆点图形比较简单，根据设置的半径 mRadio 直接绘制圆形
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
canvas.drawCircle(mRadio,mRadio,mRadio,mPaint);
}
四、第四步：测量视图
我们需要重写 onMeasure 方法，在这里根据 Mode 获取 width 和 height 的准确值，并通过 setMeasuredDimension( resultWidth,resultHeight ) 使测量值生效。
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
int resultWidth = 0;
int resultHeight = 0;
int specWidthMode = MeasureSpec.getMode(widthMeasureSpec);
int specWidthSize = MeasureSpec.getSize(widthMeasureSpec);
int specHeightMode = MeasureSpec.getMode(heightMeasureSpec);
int specHeightSize = MeasureSpec.getSize(heightMeasureSpec);
if (specWidthMode == MeasureSpec.AT_MOST) {//wrap_content
resultWidth = (int) (mRadio * 2);
}else{//match_parent
resultWidth = specWidthSize;
}
if (specHeightMode == MeasureSpec.AT_MOST) {//wrap_content
resultHeight = (int) (mRadio * 2);
}else{//match_parent
resultHeight = specHeightSize;
}
setMeasuredDimension(resultWidth,resultHeight);
}
五、暴露部分方法
PointView 有两个属性：颜色和大小。上面的代码只能保证在布局文件中声明的 PointView 显示正常，而代码中初始化的 PointView 需要我们暴露出设置颜色和大小的 set 方法。
这里的 set 方法除了像普通实体类做了赋值操作之外，还必须调用 invalidate 方法，通知视图重新绘制，否则属性的变化并不能真正体现在视图上。
public void setColor(int color){
initPaint();
mPaint.setColor(color);
invalidate();
}
public void setRadio(int radio){
if (radio > 0) {
mRadio = dp2px(radio);
}
requestLayout();
}
结束语：其实项目里许多简单的小东西可以通过代码实现，比如返回的小箭头、关闭弹窗的 X 等等。也许现在还不能做出什么大东西，但是小玩意儿也会让人觉得很有成就感啊。
