自定义控件零基础教学（一）——自定义控件的绘制理念

开篇之言：

        虽急于工作，但亦不随便。予我一滴雨水，还你一片大海。

一、基于现实

    

        设想我们身前有一张书案，上面有N多大小一样的白色纸张，还有一根笔杆和很多大小粗细各样的笔头，还有各种颜料。

        现在我们想在一张纸上画一个正方形，那么问题来了，我们该如何画，从哪里开始，画多大？在现实中，我们可能随便拿一只笔随手就画，尽管我们随手就画，那也是有一个起点有一个终点的，在关于起点终点这种位置上，就难免触碰到坐标系，不过对于一张纸而言，也就是一个二维坐标——x,y轴罢了，就像初中高中在纸上画的抛物线一样。

        那我们现在严谨一些，以一点点数学的角度来画这个正方形。暂且我们先用我们熟悉的方式以纸张左下角为原点来定义X轴和Y轴，轴上的间距且以10为单位。好了，坐标轴建立好了，接下来该思考要画一个什么样的正方形。画画自然是要用笔的，没有笔如何画画，所以现在我们就该“头疼”这个画笔的设置了。

        画笔要用多大的笔头？要用什么颜色？笔头的大小决定了我们画在纸上的痕迹的大小，就像毛笔一样，不同的笔头画的粗细也不一样。要用什么颜色呢？红色、黄色、蓝色、绿色？算了算了，画一个小小的正方形，搞这么些骚操作有些浪费时间，就选默认的好了，默认的笔头大小，默认的黑色。

        OK，现在画笔准备就绪，该考虑从哪个点开始画了。之前我们定义好了坐标轴，但没有指定在哪个位置开始画，哪个位置结束。各位同学对正方形的了解都是在中学时各种正方形的定理中得到的，边长相等的四边形为正方形、一个角为90度的菱形是正方形等等，所以我们只需要确定好两个点还有这两个点X轴Y轴的距离相等即可，那么确定哪两个点呢？左上角的点和右下角的点就行了。比如以（20，50）这个点为左上角并作为绘画的起点，那么我们想画一个边长为20的正方形的话，就得计算一下右下角的点的坐标了，没错很简单，就是（40，30），之后我们就动笔连接这两个点，以直角的方式从左上角出发，左右开弓，画到右下角。

        下面的画法是错误的啊，正方形什么样子，各位同学心里面要有点逼数啊。

        

二、代码编程

        在看代码之前，得先来学习几个英语单词。Paint，画笔。Canvas，画布。Draw，绘制。Rect，矩形。

        看完代码后，希望同学能够去参照上面我们通过想象画出来的正方形，去比较代码运行在虚拟机上的效果图，去仔细观看有什么不同之处，去思考为何是这样的效果。

Java代码

package com.example.administrator.csdn;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.util.AttributeSet;
import android.view.View;

/**
 * Created by Administrator on 2018/4/6.
 */
public class CustomView extends View{
    private Paint mPiant;//画笔

    public CustomView(Context context) {
        super(context);
        mPiant = new Paint();
    }

    public CustomView(Context context, AttributeSet attrs) {
        super(context, attrs);
        mPiant = new Paint();
    }

    @Override
    protected void onDraw(Canvas canvas) {//这里的canvas就是画布，也就是我们前面想象里的纸张
        super.onDraw(canvas);
        //起点左上角(20,30)   终点右下角(40,50)
        canvas.drawRect(20,30,40,50,mPiant);//draw 绘制  Rect 矩形

    }
}

xml代码

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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="com.example.administrator.csdn.MainActivity">

    <com.example.administrator.csdn.CustomView
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
</RelativeLayout>

效果图

        在Java代码中，我们可以看到，起始点左上角的坐标和结束点右下角的坐标跟我们想象中是相反的，至于为什么是相反的，以及我们想象中的正方形和虚拟机上的正方形为何不同，看下面的图，就能够很清楚的知道了。

        同学们所存在的疑问的原因就是在于我们中学时建立坐标系的习惯和安卓里定义坐标轴的方式是不一样的，在安卓中，原点默认是在手机上的左上角，默认X轴向右为正值，默认Y轴向下为正值。

        可能有许多同学对于代码中不理解的部分，比如构造方法和onDraw（）方法，Paint画笔对象的生成等，同学们不要在这上面过多的思考，依葫芦画瓢就行，学到后面自然豁然开朗。

        如果有哪位同学有好的博客或者工作需求，可以推荐给我，我的QQ：1770759296，微信：Ztl960628，万分感激。有不妥之处，望在评论区里指正，感谢。

下一篇：自定义控件零基础教学（二）——绘制的工具类