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

编写第一个自定义View

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

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

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

1. 纸

2. 笔

3. 坐标系

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

• Canvas：画布，调用其内部方法进行绘制

• Paint：画笔，调用其内部方法进行画笔特性设置，例如抗锯齿，画笔颜色，画笔粗细等

• 坐标系：View坐标系，Android系统自建

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

@Overrideprotected 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>

运行后即可看到文章开篇中的效果，快动手试下吧。

本文分享自微信公众号 - 小海编码日记（gh_1f87b8c00ede）。