编写第一个自定义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)
方法,添加下述代码:
@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)。