Android 自定义 View 的几个关键方法分析

Android 如何自定义 View

自定义 UI 控件有 2 种方式：

• 1. 继承系统提供的现有控件（比如 LinearLayout、RelativeLayout、ImageView 等）
• 2. 直接继承自系统 View 或者 ViewGroup，并自绘显示内容

继承现有控件

相对而言，这是一种较简单的实现方式。因为大部分核心工作，比如关于控件大小的测量、控件位置的摆放等相关的计算，在系统中都已经实现并封装好，开发人员只要在其基础上进行一些扩展，并按照自己的意图显示相应的 UI 元素。比如以下一个标题栏的封装：

当我们想在想在 XML 布局文件中使用 AppToolbar 时，希望能在 XML 文件中直接指定 title 的显示内容、字体颜色，leftImage 和 rightImage 的显示图片等。这就需要使用自定义属性。其中

• 标签代表定义一个自定义属性集合，一般会与自定义控件结合使用
• 标签则是某一条具体的属性，name 是属性名称，format 代表属性的格式

直接继承自 View 或者 ViewGroup

这种方式相比第一种麻烦一些，但是更加灵活，也能实现更加复杂的 UI 界面。一般情况下使用这种实现方式需要解决以下几个问题：

• 如何根据相应的属性将 UI 元素绘制到界面
• 自定义控件的大小，也就是宽和高分别设置多少
• 如果是 ViewGroup，如何合理安排其内部子 View 的摆放位置

以上 3 个问题依次在如下 3 个方法中得到解决：

• onDraw
• onMeasure
• onLayout

因此自定义 View 的重点工作其实就是复写并合理的实现这 3 个方法。

注意：并不是每个自定义 View 都需要实现这 3 个方法，大多数情况下只需要实现其中 2 个甚至 1 个方法也能满足需求。

onDraw

onDraw 方法接收一个 Canvas 类型的参数。Canvas 可以理解为一个画布，在这块画布上可以绘制各种类型的 UI 元素。

系统提供了一系列 Canvas 操作方法，如下：

出来的效果如下：

onMeasure

首先我们需要弄清楚，自定义 View 为什么需要重新测量。正常情况下，我们直接在 XML 布局文件中定义好 View 的宽高，然后让自定义 View 在此宽高的区域内显示即可。但是为了更好地兼容不同尺寸的屏幕，Android 系统提供了 wrap_contetn 和 match_parent 属性来规范控件的显示规则。它们分别代表自适应大小和填充父视图的大小，但是这两个属性并没有指定具体的大小，因此我们需要在 onMeasure 方法中过滤出这两种情况，真正的测量出自定义 View 应该显示的宽高大小。

所有工作都是在 onMeasure 方法中完成，方法定义如下：

可以看出，方法会传入 2 个参数 widthMeasureSpec 和 heightMeasureSpec。这两个参数是从父视图传递给子 View 的两个参数，看起来很像宽、高，但是它们所表示的不仅仅是宽和高，还有一个非常重要的测量模式。

一共有 3 种测量模式。

• EXACTLY：表示在 XML 布局文件中宽高使用 match_parent 或者固定大小的宽高；
• AT_MOST：表示在 XML 布局文件中宽高使用 wrap_content；
• UNSPECIFIED：父容器没有对当前 View 有任何限制，当前 View 可以取任意尺寸，比如 ListView 中的 item。 具体值和测量模式都可以通过 Android SDK 中提供的 MeasureSpec.java 类获取：

为什么 1 个 int 值可以代表 2 种意义呢？ 实际上 widthMeasureSpec 和 heightMeasureSpec 都是使用二进制高 2 位表示测量模式，低 30 位表示宽高具体大小。 View 中的 onMeasure 默认实现如下：

setMeasuredDimension 是一个非常重要的方法，这个方法传入的值直接决定 View 的宽高，也就是说如果调用 setMeasuredDimension(100,200) ，最终 View 就显示宽 100 * 高 200 的矩形范围。getDefaultSize 返回的是默认大小，默认为父视图的剩余可用空间。

这也是为什 有时候自定义View 显示异常的原因，虽然我们在 XML 中指定的是 wrap_content，但是实际使用的宽高值却是父视图的剩余可用空。

解决方法只要复写 onMeasure，过滤出 wrap_content 的情况，并主动调用 setMeasuredDimension 方法设置正确的宽高即可。

ViewGroup 中的 onMeasure

如果我们自定义的控件是一个容器，onMeasure 方法会更加复杂一些。因为 ViewGroup 在测量自己的宽高之前，需要先确定其内部子 View 的所占大小，然后才能确定自己的大小。比如如下一段代码：

override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {
   super.onMeasure(widthMeasureSpec, heightMeasureSpec)
   heightMode=MeasureSpec.getMode(heightMeasureSpec)
    //获得容器中子View的个数 
   val childCount = childCount
    // 记录每一行View的总宽度 
   var totalLineWidth = 0
    // 记录每一行最高View的高度 
   var perLineMaxHeight = 0
    // 记录当前ViewGroup的总高度
   var totalHeight = 0
   for (i in 0 until childCount) {
       val childView  = getChildAt(i)
       // 对子View进行测量 
       measureChild(childView, widthMeasureSpec, heightMeasureSpec)
       val lp = childView.layoutParams as MarginLayoutParams
       // 获得子View的测量宽度
       val childWidth: Int = childView.measuredWidth + lp.leftMargin + lp.rightMargin
       // 获得子View的测量高度
       val childHeight: Int = childView.measuredHeight + lp.topMargin + lp.bottomMargin
       if (totalLineWidth + childWidth > widthSize) {
           // 统计总高度 
           totalHeight += perLineMaxHeight
           // 开启新的一行 
           totalLineWidth = childWidth
           perLineMaxHeight = childHeight
       } else {
           // 记录每一行的总宽度 
           totalLineWidth += childWidth
           // 比较每一行最高的View 
           perLineMaxHeight = Math.max(perLineMaxHeight, childHeight)
       }
       // 当该View已是最后一个View时，将该行最大高度添加到totalHeight中
       if (i == childCount - 1) {
           totalHeight += perLineMaxHeight
       }
   } 
   //如果高度的测量模式是EXACTLY，则高度用测量值，否则用计算出来的总高度（这时高度的设置为wrap_content） 
   
   heightSize = if (heightMode  == MeasureSpec.EXACTLY) heightSize else totalHeight
   setMeasuredDimension(widthSize, heightSize)
}

上述 onMeasure 方法的主要目的有 2 个：

• 调用 measureChild 方法递归测量子 View；
• 通过叠加每一行的高度，计算出最终高度 totalHeight,这种常见在 FlowLayout 控件中。

onLayout

上面的 onMeasure 方法只是计算出 ViewGroup 的最终显示宽高，但是并没有规定某一个子 View 应该显示在何处位置。要定义 ViewGroup 内部子 View 的显示规则，则需要复写并实现 onLayout 方法。

例如 FlowLayout 控件中的 onLayout 方法大致如下：

override fun onLayout(changed: Boolean, l: Int, t: Int, r: Int, b: Int) {
    mAllViews.clear()
    mPerLineMaxHeight.clear()
    //存放每一行的子View
    var lineViews: List<View> = ArrayList()
    //记录每一行已存放View的总宽度
    var totalLineWidth = 0
    //记录每一行最高View的高度
    var lineMaxHeight = 0

    //遍历所有View，将View添加到List 集合中
    //获得子View的总个数
    val childCount = childCount
    for (i in 0 until childCount) {
        val childView: View = getChildAt(i)
        val lp = childView.getLayoutParams() as MarginLayoutParams
        val childWidth: Int = childView.getMeasuredWidth() + lp.leftMargin + lp.rightMargin
        val childHeight: Int = childView.getMeasuredHeight() + lp.topMargin + lp.bottomMargin
        if (totalLineWidth + childWidth > width) {
            mAllViews.add(lineViews)
            mPerLineMaxHeight.add(lineMaxHeight)
            //开启新的一行
            totalLineWidth = 0
            lineMaxHeight = 0
            lineViews = ArrayList()
        }
        totalLineWidth += childWidth
        lineViews.add(childView)
        lineMaxHeight = Math.max(lineMaxHeight, childHeight)
    }
    //单独处理最后一行
    mAllViews.add(lineViews)
    mPerLineMaxHeight.add(lineMaxHeight)
    //遍历集合中的所有View并显示出来 
    //表示一个View和父容器左边的距离
    var mLeft = 0
    //表示View和父容器顶部的距离
    var mTop = 0
    for (i in 0 until mAllViews.size()) {
        //获得每一行的所有View
        lineViews = mAllViews.get(i)
        lineMaxHeight = mPerLineMaxHeight.get(i)
        for (j in 0 until lineViews.size()) {
            val childView: View = lineViews[j]
            val lp = childView.getLayoutParams() as MarginLayoutParams
            val leftChild = mLeft + lp.leftMargin
            val topChild = mTop + lp.topMargin
            val rightChild: Int = leftChild + childView.getMeasuredWidth()
            val bottomChild: Int = topChild + childView.getMeasuredHeight()
            //四个参数分别表示View的左上角和右下角
            childView.layout(leftChild, topChild, rightChild, bottomChild)
            mLeft += lp.leftMargin + childView.getMeasuredWidth() + lp.rightMargin
        }
        mLeft = 0
        mTop += lineMaxHeight
    }
}

上述 onLayout 方法：

• 先每一行的子View，记录每一行已存放View的总宽度，再记录每一行最高View的高度, 将View添加到List 中,以便获得子View的总个数
• 遍历总的高度，和总的行数；注意：如果剩余宽度不够，开启新的一行
• 遍历集合中的所有View并显示出来，并考虑View和父容器左边的距离、View和父容器顶部的距离
• 调用childView.layout来确定 childView 的位置 。

总结

• onDraw：主要负责绘制 UI 元素；
• onMeasure：主要负责测量自定义控件具体显示的宽高；
• onLayout：主要是在自定义 ViewGroup 中复写，并实现子 View 的显示位置，并在其中介绍了自定义属性的使用方法。