Android自定义View - 最通俗易懂的自定义View原理系列

前言

自定义View原理是Android开发者必须了解的基础；

在了解自定义View之前，你需要有一定的知识储备；

本文将全面解析关于自定义View中的所有知识基础。

目录

1. View的分类

视图View主要分为两类：

类别	解释	特点
单一视图	即一个View，如TextView	不包含子View
视图组	即多个View组成的ViewGroup，如LinearLayout	包含子View

2. View类简介

View类是Android中各种组件的基类，如View是ViewGroup基类

View表现为显示在屏幕上的各种视图

Android中的UI组件都由View、ViewGroup组成。

View的构造函数：共有4个，具体如下：

自定义View必须重写至少一个构造函数：

更加具体的使用请看：深入理解View的构造函数和理解View的构造函数 （见文末“阅读原文”）

3. View视图结构

对于多View的视图，结构是树形结构：最顶层是ViewGroup，ViewGroup下可能有多个ViewGroup或View，如下图：



View树结构

一定要记住：无论是measure过程、layout过程还是draw过程，永远都是从View树的根节点开始测量或计算（即从树的顶端开始），一层一层、一个分支一个分支地进行（即树形递归），最终计算整个View树中各个View，最终确定整个View树的相关属性。

4. Android坐标系

Android的坐标系定义为：

屏幕的左上角为坐标原点

向右为x轴增大方向

向下为y轴增大方向

具体如下图：



屏幕坐标系

注：区别于一般的数学坐标系



两者坐标系的区别

5. View位置（坐标）描述

View的位置由4个顶点决定的（如下A、B、C、D）



View的顶点

4个顶点的位置描述分别由4个值决定：

（请记住：View的位置是相对于父控件而言的）

Top：子View上边界到父view上边界的距离

Left：子View左边界到父view左边界的距离

Bottom：子View下边距到父View上边界的距离

Right：子View右边界到父view左边界的距离

如下图：



View的位置描述

个人建议：按顶点位置来记忆：

Top：子View左上角距父View顶部的距离；

Left：子View左上角距父View左侧的距离；

Bottom：子View右下角距父View顶部的距离

Right：子View右下角距父View左侧的距离

6. 位置获取方式

View的位置是通过

view.getxxx()

函数进行获取：（以Top为例）

// 获取Top位置
public final int getTop() {  
   return mTop;  
}  

// 其余如下：
 getLeft();      //获取子View左上角距父View左侧的距离
 getBottom();    //获取子View右下角距父View顶部的距离
 getRight();     //获取子View右下角距父View左侧的距离

与MotionEvent中 

get()

和

getRaw()

的区别

//get() ：触摸点相对于其所在组件坐标系的坐标
event.getX();      
event.getY();
//getRaw() ：触摸点相对于屏幕默认坐标系的坐标
event.getRawX();    
event.getRawY();

具体如下图：

get() 和 getRaw() 的区别

7. Android的角度(angle)与弧度(radian)

自定义View实际上是将一些简单的形状通过计算，从而组合到一起形成的效果。

这会涉及到画布的相关操作(旋转)、正余弦函数计算等，即会涉及到角度(angle)与弧度(radian)的相关知识。

角度和弧度都是描述角的一种度量单位，区别如下图：



角度和弧度区别

在默认的屏幕坐标系中角度增大方向为顺时针。



屏幕坐标系角度增大方向

注：在常见的数学坐标系中角度增大方向为逆时针

8. Android中颜色相关内容

Android中的颜色相关内容包括颜色模式，创建颜色的方式，以及颜色的混合模式等。

8.1 颜色模式

Android支持的颜色模式：

Android颜色模式

以ARGB8888为例介绍颜色定义:

ARGB88888

8.2 定义颜色的方式

8.2.1 在java中定义颜色

//java中使用Color类定义颜色
int color = Color.GRAY;     //灰色

 //Color类是使用ARGB值进行表示
 int color = Color.argb(127, 255, 0, 0);   //半透明红色
 int color = 0xaaff0000;                   //带有透明度的红色

8.2.2 在xml文件中定义颜色

在/res/values/color.xml 文件中如下定义：

<?xml version="1.0" encoding="utf-8"?>
<resources>

   //定义了红色（没有alpha（透明）通道）    
   <color name="red">#ff0000</color>
   //定义了蓝色（没有alpha（透明）通道）  
    <color name="green">#00ff00</color>
</resources>

[/code]

在xml文件中以”#“开头定义颜色，后面跟十六进制的值，有如下几种定义方式：

 #f00            //低精度 - 不带透明通道红色
 #af00           //低精度 - 带透明通道红色

 #ff0000         //高精度 - 不带透明通道红色
 #aaff0000       //高精度 - 带透明通道红色

[/code]

8.3 引用颜色的方式

8.3.1 在java文件中引用xml中定义的颜色：

//方法1
int color = getResources().getColor(R.color.mycolor);
//方法2（API 23及以上）
int color = getColor(R.color.myColor);

8.3.2 在xml文件(layout或style)中引用或者创建颜色

<!--在style文件中引用-->
   <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
       <item name="colorPrimary">@color/red</item>
   </style>

<!--在layout文件中引用在/res/values/color.xml中定义的颜色-->
 android:background="@color/red"    

<!--在layout文件中创建并使用颜色-->
 android:background="#ff0000"

8.4 取色工具

颜色都是用RGB值定义的，而我们一般是无法直观的知道自己需要颜色的值，需要借用取色工具直接从图片或者其他地方获取颜色的RGB值。

有时候一些简单的颜色选取就不用去麻烦UI了，开发者自己去选取效率更高

这里，取色工具我强推Markman：一款设计师用于标注的工具，主要用于尺寸标注、字体大小标注、颜色标注，而且使用简单。本人强烈推荐！



Markman

9. 总结

关于自定义View基础已经讲解完毕

接下来我们将推可以开始看自定义View的原理系列，敬请期待
（1）自定义View基础
- 最易懂的自定义View原理系列
（2）自定义View
Measure过程 - 最易懂的自定义View原理系列
（3）自定义View
Layout过程 - 最易懂的自定义View原理系列
（4）自定义View
Draw过程- 最易懂的自定义View原理系列