ConstraintLayout Flow布局问题：如何隐藏部分渲染的子元素（不缩放）

优先方案：ConstraintLayout Flow 原生配置解决 #

1. 彻底排除G、H元素 #

直接从Flow的引用列表中移除G、H，同时通过自定义排序确保渲染顺序符合箭头指向：

<androidx.constraintlayout.widget.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:clipChildren="true"
    android:clipToPadding="true"> <!-- 核心：裁剪超出父容器的内容 -->

    <androidx.constraintlayout.helper.widget.Flow
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:flow_wrapMode="chain"
        app:flow_ordering="custom"
        app:flow_customOrder="@array/element_render_order"
        app:constraint_referenced_ids="A,B,C,D,E,F,I,J,K,L,M,N,O" /> <!-- 直接剔除G、H -->

    <!-- 你的子元素A、B、C...G、H...O -->
</androidx.constraintlayout.widget.ConstraintLayout>

在res/values/arrays.xml中定义符合箭头指向的渲染顺序：

<array name="element_render_order">
    <item>A</item>
    <item>B</item>
    <item>C</item>
    <!-- 按箭头要求的顺序依次排列，跳过G、H -->
</array>

2. 额外保障：隐藏G、H视图 #

如果需要保留G、H在布局结构中（比如后续可能复用），直接给这两个视图设置visibility="gone"，Flow会自动忽略已标记为GONE的元素，不会为其分配布局空间：

<View
    android:id="@+id/G"
    android:layout_width="xxdp"
    android:layout_height="xxdp"
    android:visibility="gone" />

<View
    android:id="@+id/H"
    android:layout_width="xxdp"
    android:layout_height="xxdp"
    android:visibility="gone" />

备选方案：自定义ViewGroup布局 #

如果Flow方案仍有异常，可通过自定义ViewGroup实现精准控制：

class FixedElementLayout @JvmOverloads constructor(
    context: Context, attrs: AttributeSet? = null, defStyleAttr: Int = 0
) : ViewGroup(context, attrs, defStyleAttr) {

    // 按箭头指向定义需要显示的元素ID顺序
    private val targetViewIds = listOf(R.id.A, R.id.B, R.id.C, R.id.D, R.id.E, R.id.F, R.id.I, ...)
    private val displayViews = mutableListOf<View>()

    override fun onFinishInflate() {
        super.onFinishInflate()
        // 筛选出需要显示的视图，自动排除G、H
        targetViewIds.forEach { id ->
            findViewById<View>(id)?.let(displayViews::add)
        }
    }

    override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {
        val parentWidth = MeasureSpec.getSize(widthMeasureSpec)
        var currentLineWidth = 0
        var totalHeight = 0
        var currentLineHeight = 0

        displayViews.forEach { view ->
            measureChild(view, widthMeasureSpec, heightMeasureSpec)
            val viewWidth = view.measuredWidth
            val viewHeight = view.measuredHeight

            // 超出父容器宽度则换行
            if (currentLineWidth + viewWidth > parentWidth) {
                totalHeight += currentLineHeight
                currentLineHeight = viewHeight
                currentLineWidth = viewWidth
            } else {
                currentLineWidth += viewWidth
                currentLineHeight = maxOf(currentLineHeight, viewHeight)
            }
        }
        totalHeight += currentLineHeight

        // 强制使用父容器宽度，不允许滚动
        setMeasuredDimension(parentWidth, totalHeight)
    }

    override fun onLayout(changed: Boolean, l: Int, t: Int, r: Int, b: Int) {
        val parentWidth = r - l
        var currentLeft = 0
        var currentTop = 0
        var currentLineHeight = 0

        displayViews.forEach { view ->
            val viewWidth = view.measuredWidth
            val viewHeight = view.measuredHeight

            if (currentLeft + viewWidth > parentWidth) {
                currentTop += currentLineHeight
                currentLineHeight = viewHeight
                currentLeft = 0
            }

            view.layout(currentLeft, currentTop, currentLeft + viewWidth, currentTop + viewHeight)
            currentLeft += viewWidth
            currentLineHeight = maxOf(currentLineHeight, viewHeight)
        }
    }

    // 强制裁剪超出父容器的内容
    override fun dispatchDraw(canvas: Canvas) {
        canvas.save()
        canvas.clipRect(0, 0, width, height)
        super.dispatchDraw(canvas)
        canvas.restore()
    }
}

布局中直接使用该自定义ViewGroup包裹所有子元素即可，它会自动按指定顺序渲染并裁剪超出内容。

内容的提问来源于stack exchange，提问作者LiTTle