以编程方式重新约束约束布局中的视图

Question

我有一个包含多个视图的约束布局，我想以编程方式对它们进行排序。我尝试使用ConstraintSet，但它没有按预期工作。

我创建了一个示例应用程序来演示该问题 这是activity_main.xml 文件。

<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/grid"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingTop="5dp"
    android:theme="@style/Theme.MaterialComponents.DayNight">
    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/leftGuide"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:orientation="vertical"
        app:layout_constraintGuide_percent="0.02" />
    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/rightGuide"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:orientation="vertical"
        app:layout_constraintGuide_percent="0.98" />
    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/topGuide"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:orientation="horizontal"
        app:layout_constraintGuide_percent="0.02" />
    <com.google.android.material.card.MaterialCardView
        android:id="@+id/myApp"
        android:layout_width="0dp"
        android:layout_height="117dp"
        app:cardBackgroundColor="#FFFDE7"
        app:cardCornerRadius="22dp"
        app:cardElevation="3dp"
        app:layout_constraintEnd_toStartOf="@id/cat"
        app:layout_constraintHorizontal_chainStyle="spread_inside"
        app:layout_constraintStart_toEndOf="@id/leftGuide"
        app:layout_constraintTop_toBottomOf="@id/topGuide"
        app:layout_constraintWidth_percent="0.3">
        <ImageView
            android:layout_width="60dp"
            android:layout_height="60dp"
            android:layout_gravity="center"
            android:layout_marginBottom="8dp"
            android:contentDescription="@string/app_name"
            android:src="@drawable/ic_launcher_background" />
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom|center"
            android:layout_marginBottom="3dp"
            android:maxWidth="100dp"
            android:maxHeight="60dp"
            android:text="@string/app_name"
            android:textAppearance="@style/TextAppearance.AppCompat.Medium"
            android:textColor="#EB2B2313"
            android:textSize="14sp" />
    </com.google.android.material.card.MaterialCardView>
    <com.google.android.material.card.MaterialCardView
        android:id="@+id/cat"
        android:layout_width="0dp"
        android:layout_height="117dp"
        app:cardBackgroundColor="#FFFDE7"
        app:cardCornerRadius="22dp"
        app:cardElevation="3dp"
        app:layout_constraintEnd_toStartOf="@id/kicks"
        app:layout_constraintStart_toEndOf="@id/myApp"
        app:layout_constraintTop_toTopOf="@id/topGuide"
        app:layout_constraintWidth_percent="0.3">

        <ImageView
            android:layout_width="57dp"
            android:layout_height="57dp"
            android:layout_gravity="center"
            android:layout_marginBottom="6dp"
            android:contentDescription="@string/app_name"
            android:src="@drawable/ic_launcher_foreground" />
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom|center"
            android:layout_marginBottom="3dp"
            android:maxWidth="100dp"
            android:maxHeight="60dp"
            android:text="cat"
            android:textAppearance="@style/TextAppearance.AppCompat.Medium"
            android:textColor="#EB2B2313"
            android:textSize="14sp" />
    </com.google.android.material.card.MaterialCardView>
    <com.google.android.material.card.MaterialCardView
        android:id="@+id/kicks"
        android:layout_width="0dp"
        android:layout_height="117dp"
        app:cardBackgroundColor="#FFFDE7"
        app:cardCornerRadius="22dp"
        app:cardElevation="3dp"
        app:layout_constraintEnd_toStartOf="@id/rightGuide"
        app:layout_constraintStart_toEndOf="@id/cat"
        app:layout_constraintTop_toTopOf="@id/topGuide"
        app:layout_constraintWidth_percent="0.3">
        <ImageView
            android:layout_width="60dp"
            android:layout_height="60dp"
            android:layout_gravity="center"
            android:layout_marginBottom="6dp"
            android:contentDescription="@string/app_name"
            android:src="@drawable/ic_launcher_foreground" />
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom|center"
            android:layout_marginBottom="3dp"
            android:maxWidth="100dp"
            android:maxHeight="60dp"
            android:text="kicks"
            android:textAppearance="@style/TextAppearance.AppCompat.Medium"
            android:textColor="#EB2B2313"
            android:textSize="14sp" />
    </com.google.android.material.card.MaterialCardView>
</androidx.constraintlayout.widget.ConstraintLayout>

这是like的外观。

但我想以编程方式更改约束，使其看起来像 this

这是我尝试过的

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        myApp.setOnClickListener {
           val constrain = ConstraintSet()
           constrain.apply {
               clone(this@MainActivity,R.layout.activity_main)
               connect(myApp.id,ConstraintSet.END,rightGuide.id,ConstraintSet.START,0)
               connect(myApp.id,ConstraintSet.START,kicks.id,ConstraintSet.END,0)
               connect(cat.id,ConstraintSet.START,leftGuide.id,ConstraintSet.END,0)
               connect(cat.id,ConstraintSet.END,kicks.id,ConstraintSet.START,0)
               connect(kicks.id,ConstraintSet.END,myApp.id,ConstraintSet.START,0)
               connect(kicks.id,ConstraintSet.START,cat.id,ConstraintSet.END,0)

               applyTo(grid)
            }
        }
    }
}

但这就是我get

Answer 1

这似乎是约束布局 2.0.0.beta2 的错误。 升级到 beta 4（目前是最新版本）后，它会产生预期的结果。