自定义 View 实践（一）- 自定义圆点视图

---

这篇文章是基于以下两篇文章的实践：
1.自定义View - 基础
2.自定义View - Canvas - 图形绘制

---

我们在常用的 UI 布局中，常会用到这样的圆点：

效果图-g.png

当然我们可以用一张图片，利用 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 等等。也许现在还不能做出什么大东西，但是小玩意儿也会让人觉得很有成就感啊。

谢谢观赏