Android：动态视图约束自定义View内部子视图及重叠实现问题

修复原ConstraintLayout方案：暴露自定义View内部图标引用 #

自定义View的内部子View默认对外不可见，所以ConstraintLayout无法直接创建约束。解决办法是在RecordView中添加方法，暴露内部图标的引用：

1. 修改自定义RecordView #

class RecordView @JvmOverloads constructor(
    context: Context, attrs: AttributeSet? = null, defStyleAttr: Int = 0
) : FrameLayout(context, attrs, defStyleAttr) {
    private lateinit var iconView: ImageView

    init {
        inflate(context, R.layout.layout_record_view, this)
        iconView = findViewById(R.id.record_icon)
        // 确保图标ID全局唯一（如果布局中未设置唯一ID，可动态生成）
        if (iconView.id == View.NO_ID) iconView.id = View.generateViewId()
    }

    // 对外提供内部图标View的引用
    fun getIconView(): ImageView = iconView
}

2. 动态创建约束连线 #

拿到每个RecordView的内部图标后，用ConstraintSet创建精准约束：

val rootLayout = findViewById<ConstraintLayout>(R.id.root_constraint_layout)
val recordView1 = findViewById<RecordView>(R.id.record_view_1)
val recordView2 = findViewById<RecordView>(R.id.record_view_2)

// 创建连线View
val connectingLine = View(context).apply {
    id = View.generateViewId()
    setBackgroundColor(Color.parseColor("#FF0000"))
    layoutParams = ConstraintLayout.LayoutParams(
        2.dpToPx(context), // 线宽
        ConstraintLayout.LayoutParams.WRAP_CONTENT
    )
}
rootLayout.addView(connectingLine)

// 构建约束
val constraintSet = ConstraintSet()
constraintSet.clone(rootLayout)

// 约束连线顶部到上一个图标底部
constraintSet.connect(
    connectingLine.id, ConstraintSet.TOP,
    recordView1.getIconView().id, ConstraintSet.BOTTOM,
    4.dpToPx(context) // 图标与连线的间距
)

// 约束连线底部到下一个图标顶部
constraintSet.connect(
    connectingLine.id, ConstraintSet.BOTTOM,
    recordView2.getIconView().id, ConstraintSet.TOP,
    4.dpToPx(context)
)

// 水平方向与图标居中对齐
constraintSet.centerHorizontally(connectingLine.id, recordView1.getIconView().id)

// 应用约束
constraintSet.applyTo(rootLayout)

// 扩展函数：dp转px
fun Int.dpToPx(context: Context): Int {
    return (this * context.resources.displayMetrics.density).toInt()
}

替代布局方案：自定义ViewGroup统一管理RecordView与连线 #

如果不想修改RecordView的源码，可自定义容器ViewGroup，自动计算图标位置并添加连线：

自定义RecordContainer #

class RecordContainer @JvmOverloads constructor(
    context: Context, attrs: AttributeSet? = null, defStyleAttr: Int = 0
) : LinearLayout(context, attrs, defStyleAttr) {
    init {
        orientation = VERTICAL
        setPadding(16.dpToPx(), 16.dpToPx(), 16.dpToPx(), 16.dpToPx())
    }

    override fun onLayout(changed: Boolean, l: Int, t: Int, r: Int, b: Int) {
        super.onLayout(changed, l, t, r, b)
        manageConnectingLines()
    }

    private fun manageConnectingLines() {
        // 遍历相邻的RecordView，添加/更新连线
        for (i in 0 until childCount - 1) {
            val current = getChildAt(i)
            val next = getChildAt(i + 1)
            if (current is RecordView && next is RecordView) {
                val lineTag = "line_$i"
                var lineView = findViewWithTag<View>(lineTag)

                if (lineView == null) {
                    lineView = View(context).apply {
                        tag = lineTag
                        setBackgroundColor(Color.parseColor("#FF0000"))
                        addView(this, i + 1)
                    }
                }

                // 获取两个图标View
                val topIcon = current.getIconView()
                val bottomIcon = next.getIconView()

                // 计算连线的位置和尺寸
                val lineWidth = 2.dpToPx()
                val centerX = topIcon.left + topIcon.width / 2
                val lineTop = topIcon.bottom + 4.dpToPx()
                val lineBottom = bottomIcon.top - 4.dpToPx()

                // 设置连线布局
                lineView.layout(
                    centerX - lineWidth / 2,
                    lineTop,
                    centerX + lineWidth / 2,
                    lineBottom
                )
            }
        }
    }

    private fun Int.dpToPx(): Int {
        return (this * resources.displayMetrics.density).toInt()
    }
}

使用方式 #

在布局中直接使用RecordContainer，添加RecordView即可自动生成连线：

<com.yourpackage.RecordContainer
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <com.yourpackage.RecordView
        android:id="@+id/record_view_1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>

    <com.yourpackage.RecordView
        android:id="@+id/record_view_2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>

</com.yourpackage.RecordContainer>

效果说明 #

预期效果：连线精准连接上下RecordView内图标的底部与顶部，水平居中于图标
修复前实际效果：连线只能约束到RecordView的边缘，位置与图标偏移
修复后实际效果：完全匹配预期布局

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