Android 自定义View之Layout过程

Posted 2023-04-04

参考技术A

系列文章：

在上篇文章： android 自定义View之Measure过程 ，我们分析了Measure过程，本次将会掀开承上启下的Layout过程神秘面纱，
通过本篇文章，你将了解到：

在上篇文章的比喻里，我们说过：

该ViewGroup 重写了onMeasure(xx)和onLayout(xx)方法：

同时，当layout 执行结束，清除PFLAG_FORCE_LAYOUT标记，该标记会影响Measure过程是否需要执行onMeasure。

该View 重写了onMeasure(xx)和onLayout(xx)方法：

MyViewGroup里添加了MyView、Button两个控件，最终运行的效果如下：

可以看出，MyViewGroup 里子布局的是横向摆放的。我们重点关注Layout过程。实际上，MyViewGroup里我们只重写了onLayout(xx)方法，MyView也是重写了onLayout(xx)方法。
接下来，分析View Layout过程。

与Measure过程类似，连接ViewGroup onLayout(xx)和View onLayout(xx)之间的桥梁是View layout(xx)。

可以看出，最终都调用了setFrame(xx)方法。

对于Measure过程在onMeasure(xx)里记录了尺寸的值，而对于Layout过程则在layout(xx)里记录了坐标值，具体来说是在setFrame(xx)里，该方法两个重点地方：

View.onLayout(xx)是空实现
从layout(xx)和onLayout(xx)声明可知，这两个方法都是可以被重写的，接下来看看ViewGroup是否重写了它们。

ViewGroup.layout(xx)虽然重写了layout(xx)，但是仅仅做了简单判断，最后还是调用了View.layout(xx)。

这重写后将onLayout变为抽象方法，也就是说继承自ViewGroup的类必须重写onLayout(xx)方法。
我们以FrameLayout为例，分析其onLayout(xx)做了什么。

FrameLayout.onLayout(xx)为子布局Layout的时候，起始坐标都是以FrameLayout为基准，并没有记录上一个子布局占了哪块位置，因此子布局的摆放位置可能会重叠，这也是FrameLayout布局特性的由来。而我们之前的Demo在水平方向上记录了上一个子布局的摆放位置，下一个摆放时只能在它之后，因此就形成了水平摆放的功能。
由此类推，我们常说的某个子布局在父布局里的哪个位置，决定这个位置的即是ViewGroup.onLayout(xx)。

上边我们分析了View.layout(xx)、View.onLayout(xx)、ViewGroup.layout(xx)、ViewGroup.onLayout(xx)，这四者什么关系呢？
View.layout(xx)

View.onLayout(xx)

ViewGroup.layout(xx)

ViewGroup.onLayout(xx)

View/ViewGroup 子类需要重写哪些方法：

用图表示：

通过上述的描述，我们发现Measure过程和Layout过程里定义的方法比较类似：

它俩的套路比较类似：measure(xx)、layout(xx)一般不需要我们重写，measure(xx)里调用onMeasure(xx)，layout(xx)为调用者设置坐标值。
若是ViewGroup：onMeasure(xx)里遍历子布局，并测量每个子布局，最后将结果汇总，设置自己测量的尺寸；onLayout(xx)里遍历子布局，并设置每个子布局的坐标。
若是View：onMeasure(xx)则测量自身，并存储测量尺寸；onLayout(xx)不需要做什么。

Measure过程虽然比Layout过程复杂，但仔细分析后就会发现其本质就是为了设置两个成员变量：

而Layout过程虽然比较简单，其本质是为了设置坐标值

将Measure设置的变量和Layout设置的变量联系起来：

此外，Measure过程通过设置PFLAG_LAYOUT_REQUIRED 标记来告诉需要进行onLayout，而Layout过程通过清除 PFLAG_FORCE_LAYOUT来告诉Measure过程不需要执行onMeasure了。
这就是Layout的承上作用

我们知道View的绘制需要依靠Canvas绘制，而Canvas是有作用区域限制的。例如我们使用：

Cavas绘制的起点是哪呢？
对于硬件绘制加速来说：正是通过Layout过程中设置的RenderNode坐标。
而对于软件绘制来说：

关于硬件绘制加速/软件绘制 后续文章会分析。

这就是Layout的启下作用
以上即是Measure、Layout、Draw三者的内在联系。
当然Layout的"承上"还需要考虑margin、gravity等参数的影响。具体用法参见最开始的Demo。

getMeasuredWidth()/getMeasuredHeight 与 getWidth/getHeight区别
我们以获取width为例，分别来看看其方法：

getMeasuredWidth()：获取测量的宽，属于"临时值"
getWidth()：获取View真实的宽
在Layout过程之前，getWidth() 默认为0
何时可以获取真实的宽、高

下篇将分析Draw()过程，我们将分析"一切都是draw出来的"道理

本篇基于 Android 10.0

Android 自定义View之展开收起的Layout

效果

分析

效果图来看，点击事件触发view的展开收起，并在收起状态下保留了第一个子view显示，这个展开收起其实就是view的高度变化，所以只要控制好高度，就能很简单的实现这个效果。

步骤

• 1.初始化参数 设置方向等
• 2.根据动画执行进度计算高度

初始化

class ExpandLinearLayout : LinearLayout 

    //是否展开，默认展开
    private var isOpen = true

    //第一个子view的高度，即收起保留高度
    private var firstChildHeight = 0

    //所有子view高度，即总高度
    private var allChildHeight = 0

    /**
     * 动画值改变的时候 请求重新布局
     */
    private var animPercent: Float = 0f
    
    constructor(context: Context) : super(context) 
        initView()
    

    constructor(context: Context, attributeSet: AttributeSet) : super(context, attributeSet) 
        initView()
    

    constructor(context: Context, attributeSet: AttributeSet, defStyleAttr: Int) : super(
        context,
        attributeSet,
        defStyleAttr
    ) 
        initView()
    

    private fun initView() 
        //横向的话 稍加修改计算宽度即可
        orientation = VERTICAL

        animPercent = 1f
        isOpen = true
    

定义一个类ExpandLinearLayout ，继承自LinearLayout，当然也可以是其他的view。

然后重写构造方法，并在构造方法里面调用initView方法。

在initView方法中，我们对一些参数进行初始化操作，比如方向、默认展开。

计算高度

ok，这个就是重点了。

因为只是view本身高度的变化，我们只需要重写onMeasure去计算高度即可。

来看onMeasure：

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

        //重置高度
        allChildHeight = 0
        firstChildHeight = 0

        if (childCount > 0) 

            //遍历计算高度
            for (index in 0 until childCount) 
                //这个地方实际使用中除了measuredHeight，以及margin等，也要计算在内
                if (index == 0) 
                    firstChildHeight = getChildAt(index).measuredHeight
                    +getChildAt(index).marginTop + getChildAt(index).marginBottom
                    +this.paddingTop + this.paddingBottom
                
                //实际使用时或包括padding等
                allChildHeight += getChildAt(index).measuredHeight + getChildAt(index).marginTop + getChildAt(index).marginBottom

                //最后一条的时候 加上当前view自身的padding
                if (index == childCount - 1) 
                    allChildHeight += this.paddingTop + this.paddingBottom
                
            

            // 根据是否展开设置高度
            if (isOpen) 
                setMeasuredDimension(
                    widthMeasureSpec,
                    firstChildHeight + ((allChildHeight - firstChildHeight) * animPercent).toInt()
                )
             else 
                setMeasuredDimension(
                    widthMeasureSpec,
                    allChildHeight - ((allChildHeight - firstChildHeight) * animPercent).toInt()
                )
            
        
    

onMeasure里面也是分了两个步骤的：

• 遍历计算高度

//遍历计算高度
for (index in 0 until childCount) 
    //这个地方实际使用中除了measuredHeight，以及margin等，也要计算在内
    if (index == 0) 
        firstChildHeight = getChildAt(index).measuredHeight
        +getChildAt(index).marginTop + getChildAt(index).marginBottom
        +this.paddingTop + this.paddingBottom
    
    //实际使用时或包括padding等
    allChildHeight += getChildAt(index).measuredHeight + getChildAt(index).marginTop + getChildAt(index).marginBottom
    //最后一条的时候 加上当前view自身的padding
    if (index == childCount - 1) 
        allChildHeight += this.paddingTop + this.paddingBottom
    

来看第一个if判断，记录了第一个子view的高度，这里需要注意，除了measuredHeight，margin也要算上，而且父view的内边距padding也要加上，因为如果父view的padding很大的话，收起时view可能会显示不出来的。

然后就是总高度的计算，道理同上。

来看最后一个if判断，同样总高度计算完之后也要加上父view的上下padding，才是完整的高度。

第一个判断可以理解为收起状态的高度，第二个判断可以理解为展开状态的高度。

• 展开收起逻辑

// 根据是否展开设置高度
if (isOpen) 
    setMeasuredDimension(
        widthMeasureSpec,
        firstChildHeight + ((allChildHeight - firstChildHeight) * animPercent).toInt()
    )
 else 
    setMeasuredDimension(
        widthMeasureSpec,
        allChildHeight - ((allChildHeight - firstChildHeight) * animPercent).toInt()
    )

因为第一个子view是保留显示的，所以在计算的时候都需要减去第一个子view的高度，就是剩余高度。

剩余高度可以很简单的计算出来，但是如何在显示的时候不突兀呢。

这里加一个动画，根据动画的执行进度来计算。

展开：第一个子view的高度 + 剩余高度 × 0到1的Float动画值
收起：总高度 - 剩余高度 × 0到1的Float动画值

author：yechaoa

动画

写一个方法控制展开收起，并在展开收起的时候执行动画。

    fun toggle(): Boolean 
        isOpen = !isOpen
        startAnim()
        return isOpen
    
    
    /**
     * 执行动画的时候 更改 animPercent 属性的值 即从0-1
     */
    @SuppressLint("AnimatorKeep")
    private fun startAnim() 
        //ofFloat，of xxxX 根据参数类型来确定
        //1，动画对象，即当前view。2.动画属性名。3，起始值。4，目标值。
        val animator = ObjectAnimator.ofFloat(this, "animPercent", 0f, 1f)
        animator.duration = 500
        animator.start()
    

并修改我们的动画参数：

    /**
     * 动画值改变的时候 请求重新布局
     */
    private var animPercent: Float = 0f
        set(value) 
            field = value
            requestLayout()
        

set value的时候调用requestLayout()，重新执行onMeasure。

调用

• xml

    <com.yechaoa.customviews.expand.ExpandLinearLayout
        android:id="@+id/ell"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#f5f5f5"
        android:orientation="vertical"
        android:padding="10dp">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:padding="10dp"
            android:text="@string/app_name"
            android:textColor="@android:color/holo_red_dark"
            android:textSize="20sp" />

        ...

    </com.yechaoa.customviews.expand.ExpandLinearLayout>

• 代码

        ll_btn.setOnClickListener 
            val toggle = ell.toggle()
            tv_tip.text = if (toggle) "收起" else "展开"
        

扩展

• 横向：计算高度变成计算宽度即可
• 高度：可以根据xml自定义属性来控制保留高度

总结

总的来说，效果还是比较实用的，难度系数也不高，可以根据扩展自己去进一步完善。

如果对你有一点点帮助，点个赞呗 ^ _ ^

Github

https://github.com/yechaoa/CustomViews