Android技术分享| 开源Demo any自习室布局架构

矫情吗；* 2022-09-10 10:20 157阅读 0赞

### 需求 ###

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAYW55UlRD_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center]

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAYW55UlRD_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center 1]

### 分析 ###

*  布局分为横竖屏
 *  涉及到视频窗口的大小、位置切换

通过观察需求原型图可得知，横竖屏切换可以简单分成7块区域

*  4个视频窗口
 *  1个title，显示「XX号房间」
 *  1个ViewGroup，放置「头像，头像，头像，N个观众」
 *  另1个ViewGroup，放置聊天窗口相关

横竖屏切一开始我的思路是完全不使用系统的横竖屏切换，使用rotation来切换横竖屏，切换过程添加一个转换动画，如下图所示：

![在这里插入图片描述][fc76a2a068ab4ad1836de9a05cb80359.GIF_pic_center]

(请无视中间那个小眼睛)

但因为横屏之后依然有聊天功能，不调用系统的旋转，输入法依然还是竖屏的形式弹出来的。暂时没有查到解决办法。无奈改为使用系统的横竖屏切换，切换时通知ViewGroup重新计算测量、布局子View。

### 实现 ###

首先我们复写`onMeasure`方法，遍历子View测量，指定为我们计算后的宽高，Mode设置为EXACTLY。

override fun onMeasure(widthSpace: Int, heightSpace: Int) {
        val width = MeasureSpec.getSize(widthMeasureSpec)
        val height = MeasureSpec.getSize(heightMeasureSpec)
    
        isVertical = height > width
    
        if (!isVertical) {
            videosWidth = (width * 0.548f).toInt()
            horizontalSmallVideoWidth = (videosWidth / 3.0f).toInt()
            horizontalSmallVideoHeight = (horizontalSmallVideoWidth * 0.6803f).toInt()
            topicViewHeight = height - horizontalSmallVideoHeight - videoViewSpacing
        }
    
        for (i in 0 until childCount) {
            val child = getChildAt(i)
    
            val location = if (child.tag == null) {
                val location = createAndCalcCoordinates(child, i, width, height)
                if (location.fromLeft == 0 && location.fromRight == 0) location.run {
                    fromLeft = toLeft
                    fromTop = toTop
                    fromRight = toRight
                    fromBottom = toBottom
                }
                location
            } else {
                child.tag as ViewLocation
            }
    
            child.tag = location
            child.measure(
                MeasureSpec.makeMeasureSpec(location.right - location.left, MeasureSpec.EXACTLY),
                MeasureSpec.makeMeasureSpec(location.bottom - location.top, MeasureSpec.EXACTLY)
            )
        }
    
        setMeasuredDimension(
            MeasureSpec.makeMeasureSpec(width, MeasureSpec.EXACTLY),
            MeasureSpec.makeMeasureSpec(height, MeasureSpec.EXACTLY)
        )
    }

其中ViewLocalion对象存储了View四个边的位置（left、top、right、bottom）。  
首次加载时创建ViewLocation对象，并根据横竖屏计算每个View的坐标，最终对象会存储到View的tag中。再次触发`onMeasure`时不会重新计算布局，而是沿用之前的坐标数据。

计算子View位置的函数只会在横竖屏切换、用户点击切换视频位置或大小时调用。

在`onLayout`中遍历子View，通知布局并传入对应的四边位置即可。

override fun onLayout(changed: Boolean, l: Int, t: Int, r: Int, b: Int) {
        for (i in 0 until childCount) {
            val child = getChildAt(i)
            val location = child.tag as ViewLocation
    
            child.layout(location.left, location.top, location.right, location.bottom)
        }
    }

计算子View位置的算法可以[点击这里][Link 1]查看，就不贴出来了。有一个需要注意的细节是：更新View坐标（除横竖屏切换）时，**实际更改的是目标坐标，而非当前坐标**，这样做的目的是为了实现动画效果。

当前坐标指的是在`onMeasure`和`onLayout`中使用的变量：left、top、right、bottom。  
目标坐标表示动画执行完毕后View的位置。

执行动画与坐标计算充分解耦，无论想新增怎样的动画（平移、缩放），只需要根据需求计算好左、上、右、下的位置，发送给动画执行的Runnable即可。

如切换大屏View的计算：

fun toEquallyDividedVideos() {
        if (isAnimRunning) {
            return
        }
        if (!isVertical/* || !isSmallMode*/) {
            return
        }
        isAnimRunning = true
        isSmallMode = false
        topicIndex = -1
    
        val videoWidth = measuredWidth.shr(1)
        val videoHeight = (videoWidth.toFloat() * 0.6882f).toInt()
    
        val arr = arrayOfNulls<ViewLocation>(childCount)
        for (i in 0 until childCount) {
            val location = getChildLocationAndResetFromLocations(i)
            arr[i] = location
    
            val remainder = (i % 2)
            when (i) {
                in 0..3 -> location.run {
                    toLeft = remainder * videoWidth + remainder * videoViewSpacing.shr(1)
                    toTop = (if (i >= 2) i / 2 else 0) * (videoViewSpacing + videoHeight) + titleHeight
                    toRight = toLeft + videoWidth - ((i + 1) % 2) * videoViewSpacing.shr(1)
                    toBottom = toTop + videoHeight
                }
                5 -> location.run {
                    toTop = titleHeight + videoHeight.shl(1) + videoViewSpacing
                    toBottom = toTop + titleHeight
                }
                6 -> location.run {
                    toTop = titleHeight.shl(1) + videoHeight.shl(1) + videoViewSpacing
                }
            }
        }
    
        post(AnimRunnable(arr.map { it!! }.toTypedArray(), mDuration = 200L, isRotation = false))
    }

### 最终效果 ###

![在这里插入图片描述][221861a5ec9f48cd8f76fbc6e9a5d217.GIF_pic_center]

[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAYW55UlRD_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center]: /images/20220829/0e479ea423624fc8b44a39cfccbc6eb8.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAYW55UlRD_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center 1]: /images/20220829/6f973983b9dd472fa30446e852914dae.png
[fc76a2a068ab4ad1836de9a05cb80359.GIF_pic_center]: /images/20220829/3195f087b99540719b5c916f4b09c2d3.png
[Link 1]: https://github.com/anyRTC-UseCase/StudyLive/blob/master/StudyLive-Android/app/src/main/java/io/anyrtc/studyroom/layout/VideosLayout.kt
[221861a5ec9f48cd8f76fbc6e9a5d217.GIF_pic_center]: /images/20220829/88d28f4cf7094d4085a3f062a45ac63b.png