如何从JSON或数组在ConstraintLayout中动态创建带TextView的按钮布局

嘿，很高兴帮你搞定ConstraintLayout动态生成布局的问题！我之前也做过类似的需求，给你梳理一下完整的步骤，保证能轻松实现～

首先你需要一个清晰的JSON结构来存储每个按钮和对应文本的内容，用数组格式最方便，每个元素包含按钮文本和下方TextView的文本：

[
  {"btnText": "按钮A", "tvText": "这是按钮A的描述"},
  {"btnText": "按钮B", "tvText": "这是按钮B的描述"},
  {"btnText": "按钮C", "tvText": "这是按钮C的描述"},
  {"btnText": "按钮D", "tvText": "这是按钮D的描述"},
  {"btnText": "按钮E", "tvText": "这是按钮E的描述"},
  {"btnText": "按钮F", "tvText": "这是按钮F的描述"}
]

先在XML里放一个空的ConstraintLayout作为动态添加控件的容器，记得给它设置id：

<androidx.constraintlayout.widget.ConstraintLayout
    android:id="@+id/parent_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="16dp"/>

接下来是核心代码，我们会解析JSON，循环创建每个按钮和TextView，再用ConstraintSet设置约束条件，实现每行3个的布局效果。

首先定义一个数据类来映射JSON结构，方便解析：

data class LayoutItem(val btnText: String, val tvText: String)

然后编写主逻辑：

// 获取父布局实例
val parentLayout = findViewById<ConstraintLayout>(R.id.parent_layout)
val constraintSet = ConstraintSet()
constraintSet.clone(parentLayout)

// 解析JSON（这里假设你已经拿到了JSON字符串，比如从本地文件或网络接口获取）
val jsonString = """[你的JSON内容]"""
val gson = Gson()
val items = gson.fromJson(jsonString, Array<LayoutItem>::class.java)

// 配置布局参数：每行数量、间距、控件尺寸
val itemsPerRow = 3
val margin = 16.dpToPx()
val btnHeight = 60.dpToPx()
val tvHeight = 40.dpToPx()
val rowSpacing = 16.dpToPx()
val btnTvSpacing = 8.dpToPx()

// 存储已创建的按钮和TextView的ID，方便后续设置约束
val btnIds = mutableListOf<Int>()
val tvIds = mutableListOf<Int>()

for ((index, item) in items.withIndex()) {
    // 计算当前控件所在的行和列
    val row = index / itemsPerRow
    val column = index % itemsPerRow

    // 创建按钮控件
    val button = Button(this).apply {
        id = View.generateViewId()
        text = item.btnText
        background = ContextCompat.getDrawable(this@MainActivity, R.drawable.your_btn_bg) // 可选：自定义按钮样式
        layoutParams = ConstraintLayout.LayoutParams(0, btnHeight) // 宽度由约束控制，高度固定
    }

    // 创建TextView控件
    val textView = TextView(this).apply {
        id = View.generateViewId()
        text = item.tvText
        gravity = Gravity.CENTER
        layoutParams = ConstraintLayout.LayoutParams(0, tvHeight)
    }

    // 添加控件到父布局
    parentLayout.addView(button)
    parentLayout.addView(textView)
    btnIds.add(button.id)
    tvIds.add(textView.id)

    // -------------------------- 设置按钮的约束 --------------------------
    // 水平方向用约束链让每行按钮均分宽度
    if (column == 0) {
        // 确定当前行的最后一个元素索引（处理最后一行不足3个的情况）
        val rowEndIndex = min(index + itemsPerRow - 1, items.size - 1)
        // 构建当前行的按钮ID数组
        val rowBtnIds = (index..rowEndIndex).map { btnIds[it] }.toIntArray()
        // 创建水平约束链
        constraintSet.createHorizontalChain(
            ConstraintSet.PARENT_ID, ConstraintSet.LEFT,
            ConstraintSet.PARENT_ID, ConstraintSet.RIGHT,
            rowBtnIds, null,
            ConstraintSet.CHAIN_SPREAD
        )
    }

    // 垂直方向：第一行按钮贴父布局顶部，其他行按钮贴上行TextView底部
    if (row == 0) {
        constraintSet.connect(button.id, ConstraintSet.TOP, ConstraintSet.PARENT_ID, ConstraintSet.TOP, margin)
    } else {
        // 找到上一行最后一个TextView的ID
        val prevRowLastTvId = tvIds[(row - 1) * itemsPerRow + (itemsPerRow - 1)]
        constraintSet.connect(button.id, ConstraintSet.TOP, prevRowLastTvId, ConstraintSet.BOTTOM, rowSpacing)
    }

    // -------------------------- 设置TextView的约束 --------------------------
    // 和上方按钮水平对齐，顶部贴按钮底部
    constraintSet.connect(textView.id, ConstraintSet.TOP, button.id, ConstraintSet.BOTTOM, btnTvSpacing)
    constraintSet.connect(textView.id, ConstraintSet.LEFT, button.id, ConstraintSet.LEFT)
    constraintSet.connect(textView.id, ConstraintSet.RIGHT, button.id, ConstraintSet.RIGHT)
}

// 把所有约束应用到父布局
constraintSet.applyTo(parentLayout)

最后别忘了加一个dp转px的扩展函数，方便处理尺寸单位：

fun Int.dpToPx(): Int {
    return (this * Resources.getSystem().displayMetrics.density).toInt()
}

• 如果用Java开发，逻辑完全一致，只需要调整语法（比如用View.generateViewId()生成ID，解析JSON时用TypeToken）。
• 可以根据需求自由调整按钮、TextView的样式、尺寸、间距等参数。
• 如果JSON来自网络，记得在子线程解析，再切换到主线程更新UI哦。

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