Android自定义View——布局Layout

之前写了一篇文章介绍自定义View，主要是介绍了自定义View绘制相关的操作。
这里主要是介绍自定义View另一个重要的关键——布局Layout。

绘制相关介绍可以参考：https://www.jianshu.com/p/8b96285cda49

自定义布局

自定义布局主要分为两个部分， 测量（measure()） 和 布局 （layout()）
测量过程： 从根view递归调用每一级子view的measure()方法
布局流程：从根view递归调用每一级子view的layout()方法，把测量时得到的子View的尺寸和位置传递给子View。

具体的布局流程如下：
1，在xml中编写View的相关属性 （layout_xxx，设置View的宽高等）
2，父View在自己的onMeasure()方法中，根据xml中设置的要求和自己可用的空间，来计算出对子View的尺寸要求，然后调用子View的measure()方法
3，子View在自己的onMeasure()方法中，根据自己的特性得出自己的期望尺寸（如果是ViewGroup 会重复第二步继续调用子View的measure()方法）
4，父View在子View计算出期望尺寸后，得出子View的实际尺⼨寸和位置保存
5，子View在layout() ⽅方法中将父 View 传进来的⾃自⼰己的实际尺⼨寸和位置保存（如果是 ViewGroup，还会在 onLayout() ⾥里里调⽤用每个字 View 的layout()把它们的尺⼨寸 位置传给它们）

Demo：

下面通过一个demo来展示自定义View的布局，先看效果

标签我使用了自定义的View如下,这个属于自定义view的绘制部分，比较简单不是本篇文章介绍的重点，这里就不多说了。

public class TagTextView extends androidx.appcompat.widget.AppCompatTextView {
    private static final int[] COLORS = {
            Color.parseColor("#E91E63"),
            Color.parseColor("#673AB7"),
            Color.parseColor("#3F51B5"),
            Color.parseColor("#2196F3"),
            Color.parseColor("#009688"),
            Color.parseColor("#FF9800"),
            Color.parseColor("#FF5722"),
            Color.parseColor("#795548")
    };
    private static final Random random = new Random();
    private static final int CORNER_RADIUS = (int) Utils.dp2px(4);
    private static final int X_PADDING = (int) Utils.dp2px(20);
    private static final int Y_PADDING = (int) Utils.dp2px(12);


    private static final int X_LAYOUT = (int) Utils.dp2px(4);
    private static final int Y_LAYOUT = (int) Utils.dp2px(4);

    Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);

    public TagTextView(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
    }

    {
        setTextColor(Color.WHITE);
        setTextSize(20);
        paint.setColor(COLORS[random.nextInt(COLORS.length)]);
        setPadding(X_PADDING, Y_PADDING, X_PADDING, Y_PADDING);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        canvas.drawRoundRect(X_LAYOUT, Y_LAYOUT, getWidth() - X_LAYOUT, getHeight() - Y_LAYOUT, CORNER_RADIUS, CORNER_RADIUS, paint);
        super.onDraw(canvas);
    }
}

TagLayout 是本篇文章需要介绍的重要内容，先看看具体实现。

class TagLayout : ViewGroup {

    var childLayoutList:ArrayList<Rect> = ArrayList()

    constructor(context: Context, attrs: AttributeSet): super(context, attrs) {

    }


    override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {
        var viewWidth = 0
        var viewHeight = 0

        var widthMode = MeasureSpec.getMode(widthMeasureSpec)
        viewWidth = MeasureSpec.getSize(widthMeasureSpec)

        var lineWidthUsed = 0
        var lineMaxHeight = 0

        var heightUsed = 0


        for (index in 0 until childCount) {
            var child = getChildAt(index)
            measureChildWithMargins(child, widthMeasureSpec, 0, heightMeasureSpec, heightUsed)

            if (widthMode != MeasureSpec.UNSPECIFIED && (lineWidthUsed + child.measuredWidth) > viewWidth) {
                lineWidthUsed = 0
                heightUsed += lineMaxHeight
                lineMaxHeight = 0
                measureChildWithMargins(child, widthMeasureSpec, 0, heightMeasureSpec, heightUsed)
            }

            var childBounds: Rect
            if (childLayoutList.size <= index) {
                childBounds = Rect()
                childLayoutList.add(childBounds)
            } else {
                childBounds = childLayoutList[index]
            }


            childBounds.set(lineWidthUsed, heightUsed, lineWidthUsed + child.measuredWidth, heightUsed + child.measuredHeight)

            lineWidthUsed += child.measuredWidth
            lineMaxHeight = Math.max(lineMaxHeight, child.measuredHeight)
        }

        // 加上最后一行 标签的高度
        viewHeight = heightUsed + lineMaxHeight

        viewWidth = View.resolveSizeAndState(viewWidth, widthMeasureSpec, 0)
        viewHeight = View.resolveSize(viewHeight, heightMeasureSpec)

        setMeasuredDimension(viewWidth, viewHeight)
    }

    override fun onLayout(p0: Boolean, p1: Int, p2: Int, p3: Int, p4: Int) {

        for (index in 0 until childCount) {
            var view = getChildAt(index)
            var bounds = childLayoutList[index]
            view.layout(bounds.left, bounds.top, bounds.right, bounds.bottom)
        }
    }

    // measureChildWithMargins 需要获取到 margins 需要声明这个
    override fun generateLayoutParams(attrs: AttributeSet?): LayoutParams {
        return MarginLayoutParams(context, attrs)
    }
}

结合布局的流程可以看出：
taglayout 主要实现了 onMeasure() 和 onLayout () 两个函数。
onMeasure()： 计算了子View的大小并保存子View的位置， 同时计算出自己想要的尺寸大小
onLayout ()： 比较简单，将之前保存的子View尺寸和大小告诉子view。

tips:
1，View.resolveSizeAndState() 一个修正view 尺寸的方法，自定义view中比较常用
2， setMeasuredDimension(viewWidth, viewHeight) 测量完成后需要调用此方法保存，否则之前测量的就都无效了

END!