以编程方式在 ConstraintLayout 中创建视图

Question

我想创建一个包含 3 行 TextView 元素的简单布局。第一行和最后一行仅包含一个文本视图，中间行包含两个相邻的文本视图。 Link to the Image

这里是 xml 用于生成视图

    <TextView
        android:id="@+id/textView"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:text="TextView"

        app:layout_constraintBottom_toTopOf="@+id/textView2"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/textView2"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:text="TextView"

        app:layout_constraintBottom_toTopOf="@+id/textView4"
        app:layout_constraintEnd_toStartOf="@+id/textView3"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/textView" />

    <TextView
        android:id="@+id/textView3"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:text="TextView"
        app:layout_constraintBottom_toTopOf="@+id/textView4"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@+id/textView2"
        app:layout_constraintTop_toBottomOf="@+id/textView" />

    <TextView
        android:id="@+id/textView4"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:text="TextView"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/textView2" />

我正在尝试使用以下代码以编程方式重新创建相同的视图：

        val layout = findViewById<ConstraintLayout>(R.id.main)
        val cs = ConstraintSet()
        cs.clone(layout)

        val textViews: MutableList<TextView> = ArrayList<TextView>()
        for (i  in 1..4) {
            val t = TextView(this)
            t.id = View.generateViewId()
            t.text = "Text" + i.toString()
            layout.addView(t)
            textViews.add(t)
        }

        //Just make suffixes similar to the layout xml
        val t1 = textViews[0]
        val t2 = textViews[1]
        val t3 = textViews[2]
        val t4 = textViews[3]

//    app:layout_constraintBottom_toTopOf="@+id/textView2"
//    app:layout_constraintEnd_toEndOf="parent"
//    app:layout_constraintStart_toStartOf="parent"
//    app:layout_constraintTop_toTopOf="parent" />
        cs.connect(t1.id, ConstraintSet.BOTTOM, t2.id, ConstraintSet.TOP)
        cs.connect(t1.id, ConstraintSet.END, layout.id, ConstraintSet.END)
        cs.connect(t1.id, ConstraintSet.START, layout.id, ConstraintSet.START)
        cs.connect(t1.id, ConstraintSet.TOP, layout.id, ConstraintSet.TOP)

//    app:layout_constraintBottom_toTopOf="@+id/textView4"
//    app:layout_constraintEnd_toStartOf="@+id/textView3"
//    app:layout_constraintStart_toStartOf="parent"
//    app:layout_constraintTop_toBottomOf="@+id/textView" />
        cs.connect(t2.id, ConstraintSet.BOTTOM, t4.id, ConstraintSet.TOP)
        cs.connect(t2.id, ConstraintSet.END, t3.id, ConstraintSet.START)
        cs.connect(t2.id, ConstraintSet.START, layout.id, ConstraintSet.START)
        cs.connect(t2.id, ConstraintSet.TOP, t1.id, ConstraintSet.BOTTOM)

//    app:layout_constraintBottom_toTopOf="@+id/textView4"
//    app:layout_constraintEnd_toEndOf="parent"
//    app:layout_constraintStart_toEndOf="@+id/textView2"
//    app:layout_constraintTop_toBottomOf="@+id/textView" />
        cs.connect(t3.id, ConstraintSet.BOTTOM, t4.id, ConstraintSet.TOP)
        cs.connect(t3.id, ConstraintSet.END, layout.id, ConstraintSet.END)
        cs.connect(t3.id, ConstraintSet.START, t2.id, ConstraintSet.END)
        cs.connect(t3.id, ConstraintSet.TOP, t1.id, ConstraintSet.BOTTOM)

//    app:layout_constraintBottom_toBottomOf="parent"
//    app:layout_constraintEnd_toEndOf="parent"
//    app:layout_constraintStart_toStartOf="parent"
//    app:layout_constraintTop_toBottomOf="@+id/textView2" />
        cs.connect(t4.id, ConstraintSet.BOTTOM, layout.id, ConstraintSet.BOTTOM)
        cs.connect(t4.id, ConstraintSet.END, layout.id, ConstraintSet.END)
        cs.connect(t4.id, ConstraintSet.START, layout.id, ConstraintSet.START)
        cs.connect(t4.id, ConstraintSet.TOP, t2.id, ConstraintSet.BOTTOM)

但这似乎不起作用，所有文本视图都位于显示屏的左上角。

你能告诉我如何让这段代码工作吗？

Answer 1

仅仅克隆约束并进行更改是不够的。必须使用 ConstraintSet#applyTo().

将更改应用于 ConstraintLayout

以编程方式在 ConstraintLayout 中创建视图

Create Views Within ConstraintLayout programatically

android

android-layout

android-constraintlayout