布局过程的完全解析

前言

那么为什么要分为两个流程呢

因为测量流程是一个复杂的流程，有时候不一定一遍就能得出测量结果，可能需要 2 - 3 次甚至更多

自定义布局的几种类型，也是自定义布局的两个方法

实战，第一种类型：改写已有View 的步骤

需求：实现一个正方形的ImageView，以窄边作为变长，我们可以这样实现：

package com.example.viewtest.view

import android.content.Context
import android.util.AttributeSet
import androidx.appcompat.widget.AppCompatImageView
import kotlin.math.min

class SquareImageView(context: Context, attrs: AttributeSet) : AppCompatImageView(context, attrs) {
    override fun layout(l: Int, t: Int, r: Int, b: Int) {
        val width = r - l
        val height = t - b
        val value = min(width, height)
        super.layout(l, t, r + value, b + value)
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

这样可以实现我们的效果，但是为什么不能这样写呢？

因为这是父View在他的OnLayout方法中会调用字view的layout，让子view将自己的尺寸保存下来，而我们在这个过程中修改了自己的尺寸，父view是不知道的，后续的过程中父view会一直认为我们的尺寸是他传给我们的那个，会发生意想不到的效果

比方说我们在xml中声明的这个view 的宽是300，高是200，在这个view的右边紧挨着放了另一个view，运行的效果会发现这两个view中间有100的距离，就是因为父view认为你是300，而你实际把自己改成了200

接下来展示正确的写法

package com.example.viewtest.view

import android.content.Context
import android.util.AttributeSet
import androidx.appcompat.widget.AppCompatImageView
import kotlin.math.min

class SquareImageView(context: Context, attrs: AttributeSet) : AppCompatImageView(context, attrs) {

    override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {
        // 保留这个方法，让父布局去测量我的结果，我的宽高
        super.onMeasure(widthMeasureSpec, heightMeasureSpec)

        // 通过这两个拿到测量之后的结果
        val value = min(measuredWidth, measuredHeight)

        // 修改后的值直接保存，这样才有意义，才会起到作用
        // 不是通过返回值将结果返回给父view，因为之后不一定是父view在使用
        setMeasuredDimension(value, value)

        // measuredWidth、width 的区别
        // measuredWidth 是测量过程中的值，width 是最终的结果值，父view可能会对measuredWidth进行修改，他俩可能值不一样
        // width 只有测量结束才能拿到结果，即使是刷新，在刷新完成之前虽然有值，也是上一次的测量结果
        // 在测量过程中应该使用 measuredWidth，高同理
    }

}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

这里额外说一下 measuredWidth、width 的区别（高同理）

    // measuredWidth、width 的区别
    // measuredWidth 是测量过程中的值，width 是最终的结果值，父view可能会对measuredWidth进行修改，他俩可能值不一样
    // width 只有测量结束才能拿到结果，即使是刷新，在刷新完成之前虽然有值，也是上一次的测量结果
    // 在测量过程中应该使用 measuredWidth，高同理
1
2
3
4

实战，第二种类型：完全自定义View的尺寸

步骤

package com.example.viewtest.view

import android.content.Context
import android.graphics.Canvas
import android.graphics.Paint
import android.util.AttributeSet
import android.view.View
import androidx.appcompat.widget.AppCompatImageView
import com.example.viewtest.R
import com.example.viewtest.ext.dp
import kotlin.math.min

private const val PADDING = 100f
private const val RADIUS = 100f
class CircleView(context: Context, attrs: AttributeSet) : View(context, attrs) {

    private val paint = Paint(Paint.ANTI_ALIAS_FLAG)

    override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec)

        val size = (PADDING + RADIUS) * 2

        /**
         * resolveSize 的作用
         * 一值两用，通过 MeasureSpec.getMode 判断返回的约束条件；通过 MeasureSpec.getSize 获取真实的值
         * 如果强制类型，那么使用父类给的值，如果是范围类型，则谁小使用谁，其他则随意使用
         */
        val width = resolveSize(size.toInt(), widthMeasureSpec)
        val height = resolveSize(size.toInt(), heightMeasureSpec)

        setMeasuredDimension(width, height)

    }

    override fun onDraw(canvas: Canvas) {
        super.onDraw(canvas)

        canvas.drawCircle(PADDING + RADIUS, PADDING + RADIUS, RADIUS , paint)
    }

}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

实战，第三种类型：完全自定义View的尺寸

import android.content.Context
import android.graphics.Rect
import android.util.AttributeSet
import android.view.ViewGroup
import androidx.core.view.children
import kotlin.math.max

class TagLayout(context: Context?, attrs: AttributeSet?) : ViewGroup(context, attrs) {
    private val childrenBounds = mutableListOf<Rect>()

    override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {
        var widthUsed = 0
        var heightUsed = 0
        var lineWidthUsed = 0
        var lineMaxHeight = 0
        val specWidthSize = MeasureSpec.getSize(widthMeasureSpec)
        val specWidthMode = MeasureSpec.getMode(widthMeasureSpec)
        for ((index, child) in children.withIndex()) {

            // 测量子类的限制类型以及他的宽，确定他最终的真实宽度
            measureChildWithMargins(child, widthMeasureSpec, 0, heightMeasureSpec, heightUsed)

            // 判断是否需要换行，换行需要重制上一行的内容
            if (specWidthMode != MeasureSpec.UNSPECIFIED &&
                lineWidthUsed + child.measuredWidth > specWidthSize) {
                lineWidthUsed = 0
                heightUsed += lineMaxHeight
                lineMaxHeight = 0
                measureChildWithMargins(child, widthMeasureSpec, 0, heightMeasureSpec, heightUsed)
            }

            if (index >= childrenBounds.size) {
                childrenBounds.add(Rect())
            }
            val childBounds = childrenBounds[index]
            childBounds.set(lineWidthUsed, heightUsed, lineWidthUsed + child.measuredWidth, heightUsed + child.measuredHeight)

            lineWidthUsed += child.measuredWidth
            // 已经使用的最大宽度为当我自己的宽度
            widthUsed = max(widthUsed, lineWidthUsed)
            // 当前行的最大高度
            lineMaxHeight = max(lineMaxHeight, child.measuredHeight)
        }
        val selfWidth = widthUsed
        val selfHeight = heightUsed + lineMaxHeight
        // 确定我自己的宽高
        setMeasuredDimension(selfWidth, selfHeight)
    }

    override fun onLayout(changed: Boolean, l: Int, t: Int, r: Int, b: Int) {
        for ((index, child) in children.withIndex()) {
            val childBounds = childrenBounds[index]
            child.layout(childBounds.left, childBounds.top, childBounds.right, childBounds.bottom)
        }
    }

    // 调用 measureChildWithMargins 时会强转报错
    override fun generateLayoutParams(attrs: AttributeSet?): LayoutParams {
        return MarginLayoutParams(context, attrs)
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61