源代碼地址：（
https://github.com/anyRTC-UseCase/VideoLive）

需求

兩種顯示方式：

1. 主播全屏，其他游客懸浮在右側。下面簡稱大小屏模式。
2. 所有人等分屏幕。下面簡稱等分模式。

分析

• 最多4人連麥，明確這點方便定制坐標算法。
• 自定義的 ViewGroup 最好分別提供等分模式和大小屏模式的邊距設置接口，便于修改。
• SDK 自己管理了 TextureView 的繪制和測量，所以 ViewGroup 需要復寫 onMeasure 方法以通知 TextureView 測量和繪制。
• 一個計算 0.0f ~ 1.0f 逐漸減速的函數，給動畫過程做支撐。
• 一個記錄坐標的數據模型。和一個根據現有 Child View 的數量計算兩種布局模式下，每個 View 擺放位置的函數。

實現

1.定義坐標數據模型

private data class ViewLayoutInfo(
    var originalLeft: Int = 0,// original開頭的為動畫開始前的起始值
    var originalTop: Int = 0,
    var originalRight: Int = 0,
    var originalBottom: Int = 0,
    var left: Float = 0.0f,// 無前綴的為動畫過程中的臨時值
    var top: Float = 0.0f,
    var right: Float = 0.0f,
    var bottom: Float = 0.0f,
    var toLeft: Int = 0,// to開頭的為動畫目標值
    var toTop: Int = 0,
    var toRight: Int = 0,
    var toBottom: Int = 0,
    var progress: Float = 0.0f,// 進度 0.0f ~ 1.0f，用于控制 Alpha 動畫
    var isAlpha: Boolean = false,// 透明動畫，新添加的執行此動畫
    var isConverted: Boolean = false,// 控制 progress 反轉的標記
    var waitingDestroy: Boolean = false,// 結束后銷毀 View 的標記
    var pos: Int = 0// 記錄自己索引，以便銷毀
) {
    init {
        left = originalLeft.toFloat()
        top = originalTop.toFloat()
        right = originalRight.toFloat()
        bottom = originalBottom.toFloat()
    }
}

以上，記錄了執行動畫和銷毀View所需的數據。（于源碼中第352行）

2.計算不同展示模式下View坐標的函數

if (layoutTopicMode) {
    var index = 0
    for (i in 1 until childCount) if (i != position) (getChildAt(i).tag as ViewLayoutInfo).run {
        toLeft = measuredWidth - maxWidgetPadding - smallViewWidth
        toTop = defMultipleVideosTopPadding + index * smallViewHeight + index * maxWidgetPadding
        toRight = measuredWidth - maxWidgetPadding
        toBottom = toTop + smallViewHeight
        index++
    }
} else {
    var posOffset = 0
    var pos = 0
    if (childCount == 4) {
        posOffset = 2
        pos++
                                                                                                               
        (getChildAt(0).tag as ViewLayoutInfo).run {
            toLeft = measuredWidth.shr(1) - multiViewWidth.shr(1)
            toTop = defMultipleVideosTopPadding
            toRight = measuredWidth.shr(1) + multiViewWidth.shr(1)
            toBottom = defMultipleVideosTopPadding + multiViewHeight
        }
    }
                                                                                                               
    for (i in pos until childCount) if (i != position) {
        val topFloor = posOffset / 2
        val leftFloor = posOffset % 2
        (getChildAt(i).tag as ViewLayoutInfo).run {
            toLeft = leftFloor * measuredWidth.shr(1) + leftFloor * multipleWidgetPadding
            toTop = topFloor * multiViewHeight + topFloor * multipleWidgetPadding + defMultipleVideosTopPadding
            toRight = toLeft + multiViewWidth
            toBottom = toTop + multiViewHeight
        }
        posOffset++
    }
}

post(AnimThread(
    (0 until childCount).map { getChildAt(it).tag as ViewLayoutInfo }.toTypedArray()
))

Demo源碼中的add、remove、toggle方法重復代碼過多，未來得及優化。這里只附上 addVideoView 中的計算部分（于源代碼中第141行），只需稍微修改即可適用add、remove和toggle。（也可參考 CDNLiveVM 中的 calcPosition 方法，為經過優化的版本）layoutTopicMode = true 時，為大小屏模式。

由于是定制算法，只能適用這一種布局，故不寫注釋。只需明確一點，此方法最終目的是為了計算出每個View當前應該出現的位置，保存到上面定義的數據模型中并開啟動畫（最后一行 post AnimThread 為開啟動畫的代碼，我這里是通過 post 一個線程來更新每一幀）。

可根據不同的需求寫不同的實現，最終符合定義的數據模型即可。

3.逐漸減速的算法，使動畫效果看起來更自然。

private inner class AnimThread(
    private val viewInfoList: Array<ViewLayoutInfo>,
    private var duration: Float = 180.0f,
    private var processing: Float = 0.0f
) : Runnable {
    private val waitingTime = 9L
                                                                                   
    override fun run() {
        var progress = processing / duration
        if (progress > 1.0f) {
            progress = 1.0f
        }
                                                                                   
        for (viewInfo in viewInfoList) {
            if (viewInfo.isAlpha) {
                viewInfo.progress = progress
            } else viewInfo.run {
                val diffLeft = (toLeft - originalLeft) * progress
                val diffTop = (toTop - originalTop) * progress
                val diffRight = (toRight - originalRight) * progress
                val diffBottom = (toBottom - originalBottom) * progress
                                                                                   
                left = originalLeft + diffLeft
                top = originalTop + diffTop
                right = originalRight + diffRight
                bottom = originalBottom + diffBottom
            }
        }
        requestLayout()
                                                                                   
        if (progress < 1.0f) {
            if (progress > 0.8f) {
                var offset = ((progress - 0.7f) / 0.25f)
                if (offset > 1.0f)
                    offset = 1.0f
                processing += waitingTime - waitingTime * progress * 0.95f * offset
            } else {
                processing += waitingTime
            }
            postDelayed(this@AnimThread, waitingTime)
        } else {
            for (viewInfo in viewInfoList) {
                if (viewInfo.waitingDestroy) {
                    removeViewAt(viewInfo.pos)
                } else viewInfo.run {
                    processing = 0.0f
                    duration = 0.0f
                    originalLeft = left.toInt()
                    originalTop = top.toInt()
                    originalRight = right.toInt()
                    originalBottom = bottom.toInt()
                    isAlpha = false
                    isConverted = false
                }
            }
            animRunning = false
            processing = duration
            if (!taskLink.isEmpty()) {
                invokeLinkedTask()// 此方法執行正在等待中的任務，從源碼中能看到，remove、add等函數需要依次執行，前一個動畫未執行完畢就進行下一個動畫可能會導致不可預知的錯誤。
            }
        }
    }
}

上述代碼除了提供減速算法，還一并更新了對應View數據模型的中間值，也就是模型定義種的 left, top, right, bottom 。

通過減速算法提供的進度值，乘以目標坐標與起始坐標的間距，得出中間值。

逐漸減速的算法關鍵代碼為：

if (progress > 0.8f) {
    var offset = ((progress - 0.7f) / 0.25f)
    if (offset > 1.0f)
        offset = 1.0f
    processing += waitingTime - waitingTime * progress * 0.95f * offset
} else {
    processing += waitingTime
}

這個算法實現的有缺陷，因為它直接修改了進度時間，大概率會導致執行完畢的時間與設置的預期時間（如設置200ms執行完畢，實際可能超過200ms）不符。文末我會提供一個優化的減速算法。

變量 waitingTime 表示等待多久執行下一幀動畫。用每秒1000ms計算即可，如果目標為60刷新率的動畫，設置為1000 / 60 = 16.66667即可（近似值）。

計算并存儲每個 View 的中間值后，調用 requestLayout() 通知系統的 onMeasure 和 onLayout 方法，重新擺放 View 。

override fun onLayout(changed: Boolean, l: Int, t: Int, r: Int, b: Int) {
    if (childCount == 0)
        return
                                                                         
    for (i in 0 until childCount) {
        val child = getChildAt(i)
        val layoutInfo = child.tag as ViewLayoutInfo
        child.layout(
            layoutInfo.left.toInt(),
            layoutInfo.top.toInt(),
            layoutInfo.right.toInt(),
            layoutInfo.bottom.toInt()
        )
        if (layoutInfo.isAlpha) {
            val progress = if (layoutInfo.isConverted)
                1.0f - layoutInfo.progress
            else
                layoutInfo.progress
                                                                         
            child.alpha = progress
        }
    }
}

4.定義邊距相關的變量，供簡單的定制修改

/**
 * @param multipleWidgetPadding : 等分模式讀取
 * @param maxWidgetPadding : 大小屏布局讀取
 * @param defMultipleVideosTopPadding : 距離頂部變距
 */
private var multipleWidgetPadding = 0
private var maxWidgetPadding = 0
private var defMultipleVideosTopPadding = 0
                                                                                  
init {
    viewTreeObserver.addOnGlobalLayoutListener(this)
    attrs?.let {
        val typedArray = resources.obtainAttributes(it, R.styleable.AnyVideoGroup)
        multipleWidgetPadding = typedArray.getDimensionPixelOffset(
            R.styleable.AnyVideoGroup_between23viewsPadding, 0
        )
        maxWidgetPadding = typedArray.getDimensionPixelOffset(
            R.styleable.AnyVideoGroup_at4smallViewsPadding, 0
        )
        defMultipleVideosTopPadding = typedArray.getDimensionPixelOffset(
            R.styleable.AnyVideoGroup_defMultipleVideosTopPadding, 0
        )
        layoutTopicMode = typedArray.getBoolean(
            R.styleable.AnyVideoGroup_initTopicMode, layoutTopicMode
        )
        typedArray.recycle()
    }
}

取名時對這三個變量的職責定義，與編寫邏輯時的定義有出入，所以有點詞不達意，需參考注釋。

由于這只是定制化的變量，并不重要，可根據業務邏輯自行隨意修改。

5.復寫 onMeasure 方法，這里主要是通知 TextureView 更新大小。

override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {
    val widthSize = MeasureSpec.getSize(widthMeasureSpec)
    val heightSize = MeasureSpec.getSize(heightMeasureSpec)
                                                                                               
    multiViewWidth = widthSize.shr(1)
    multiViewHeight = (multiViewWidth.toFloat() * 1.33334f).toInt()
    smallViewWidth = (widthSize * 0.3125f).toInt()
    smallViewHeight = (smallViewWidth.toFloat() * 1.33334f).toInt()
                                                                                               
    for (i in 0 until childCount) {
        val child = getChildAt(i)
        val info = child.tag as ViewLayoutInfo
        child.measure(
            MeasureSpec.makeMeasureSpec((info.right - info.left).toInt(), MeasureSpec.EXACTLY),
            MeasureSpec.makeMeasureSpec((info.bottom - info.top).toInt(), MeasureSpec.EXACTLY)
        )
    }
                                                                                               
    setMeasuredDimension(
        MeasureSpec.makeMeasureSpec(widthSize, MeasureSpec.EXACTLY),
        MeasureSpec.makeMeasureSpec(heightSize, MeasureSpec.EXACTLY)
    )
}

總結

1.明確數據模型，一般情況下記錄起始上下左右坐標、目標上下左右坐標、和進度百分比就足夠了。

2.根據需求明確動畫算法，這里補充一下優化的減速算法：

factor = 1.0
if (factor == 1.0)
    (1.0 - (1.0 - x) * (1.0 - x))
else
    (1.0 - pow((1.0 - x), 2 * factor))
// x = time.

3.根據算法計算出來的值更新 layout 布局即可。

此類 ViewGroup 實現簡單方便，只涉及到幾個基本系統API。如不想寫 onMeasure 方法可繼承 FrameLayout 等已寫好 onMeasure 實現的 ViewGroup 。