View绘制系列(4)-第一个自定义View

编写第一个自定义View

为了后续文章中描述方便，我们把布局过程中的两个步骤单独分离，分别称为测量过程和布局过程。

本篇文章的目标是在View内部(100,100)坐标处绘制一个边长为100的正方形，效果如下：

怎么实现上面所说的效果呢？首先来考虑下如果是在现实生活中，我们要绘制一个顶点在(100,100)，边长为100的正方形，我们需要什么呢？

纸
笔
坐标系

那么在View系统中是否有响应的抽象实现呢？如果有的话，绘制工作就变的异常简单了。首先来看下坐标系，这个肯定有啊，我们在View简介中就已经介绍过了Android中的坐标系，这里我们要进行View内部绘制，选用的肯定是View坐标系哈，以View左上角为坐标原点，水平右向为X正向，垂直下向为Y正向。那么纸呢？还记得onDraw函数原型吗？它的参数Canvas对象就是纸的抽象实现。笔的抽象实现是Paint类，位于android.graphics包下，自此我们就找到了Android系统中View绘制的三要素：

Canvas：画布，调用其内部方法进行绘制
Paint：画笔，调用其内部方法进行画笔特性设置，例如抗锯齿，画笔颜色，画笔粗细等
坐标系：View坐标系，Android系统自建

打开上篇中的MyCustomView.java，找到onDraw(Canvas canvas)方法，添加下述代码：

@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);
    paint.setColor(Color.BLUE);
    canvas.drawRect(100f,100f,200f,200f,paint);
}

可以看到在这段代码中，首先我们创建了一个抗锯齿的画笔对象，Paint.ANTI_ALIAS_FLAG用于指定画笔抗锯齿，随后使用setColor方法为画笔设置颜色，最后调用canvas的drawRect方法，使用创建的画笔绘制了一个矩形。

drawRect函数原型为public void drawRect(float left, float top, float right, float bottom, @NonNull Paint paint)，其中left，right，top，bottom分别对应的是View的getLeft(),getRight(),getTop(),getBottom()这四个方法的值。该示例中各函数取值说明如下图(PS:并非1:1绘制，只是说明各取值)。

在xml中引用MyCustomView，如下：

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout 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"
   tools:context=".CustomViewActivity">

   <com.example.myapplication.MyCustomView
       android:id="@+id/custom_view"
       android:layout_width="match_parent"
       android:layout_height="match_parent"/>

</androidx.coordinatorlayout.widget.CoordinatorLayout>