在 ConstraintLayout 中强制统一按钮大小

Question

我有一个 ConstraintLayout 包含许多元素，包括网格布局中的几个按钮。这是布局的简化版本（实际布局包括其他元素）：

<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <androidx.appcompat.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="0dp"
        android:layout_height="?attr/actionBarSize"
        android:background="?attr/colorPrimary"
        android:minHeight="?attr/actionBarSize"
        android:theme="?attr/actionBarTheme"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <Button
        android:id="@+id/button1"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="Button 1"
        app:layout_constraintBottom_toTopOf="@+id/button3"
        app:layout_constraintEnd_toStartOf="@+id/button2"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/toolbar" />

    <Button
        android:id="@+id/button2"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="Button 2"
        app:layout_constraintBottom_toTopOf="@+id/button4"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toEndOf="@+id/button1"
        app:layout_constraintTop_toBottomOf="@+id/toolbar" />

    <Button
        android:id="@+id/button3"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="Button 3"
        app:layout_constraintBottom_toTopOf="@id/guideline"
        app:layout_constraintEnd_toStartOf="@+id/button4"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/button1" />

    <Button
        android:id="@+id/button4"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="Button 4"
        app:layout_constraintBottom_toTopOf="@id/guideline"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toEndOf="@+id/button3"
        app:layout_constraintTop_toBottomOf="@+id/button2" />

    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/guideline"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_percent="0.5" />

</androidx.constraintlayout.widget.ConstraintLayout>

我希望按钮的大小满足两个条件：

1. 每个按钮都应包含其所有文本，没有任何内容被截断或省略
2. 所有按钮的大小应该相同

   换句话说，每个按钮的大小应该等于任何按钮的最大文本的大小。是否可以在 ConstraintLayout 中执行此操作？

   我可以通过将按钮宽度和高度分别设置为 odp 和 wrap_content 来满足第一个条件（如在上面的 XML 中），这适用于所有按钮文本大小相同的特定情况（如在 XML 之上，并且在我的应用程序的原始（英文）版本中），但是当它们不是时（例如，Button 4 plus several extra words 被替换为 Button 4，并且至少出现在我的应用程序的一个翻译中应用程序），然后按钮大小和对齐方式会失去对称性和均匀性。

   我想坚持使用ConstraintLayout，最好不要在其中嵌套另一个布局，因为这似乎是今天推荐的做事方式，但我想如果必须的话我可以切换。我已经尝试了 here 的一些想法，但我无法让它们在我的案例中起作用，正如我所说，如果可能的话，我真的宁愿坚持使用纯粹的 ConstraintLayout。

Answer 1

如果按钮一个接一个或并排堆叠，如here所述，则有解决方案。然而，尚不清楚此类解决方案是否公开了受支持的行为，或者只是事情发生的方式随着实施约束布局.无论如何，您面临的问题是如何在网格中将所有按钮的大小设置为最宽。

您需要对布局中的按钮进行显式调整。您可以使用 layout change listener 在您的代码中以编程方式执行此操作。

另一种方法是使用派生自 ConstraintHelper 类的类来调整按钮大小。这个类是一些的基础约束布局小部件，例如障碍.派生的小部件可以直接放入布局 XML 中。

这是一个示例：

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

    override fun updatePostLayout(container: ConstraintLayout) {
        var maxWidth = 0
        val referencedViews = mutableListOf<View>()

        // Find the greatest width of the referenced widgets.
        for (i in 0 until this.mCount) {
            val id = this.mIds[i]
            val view = container.getViewById(id)
            if (view.width > maxWidth) {
                maxWidth = view.width
            }
            referencedViews.add(view)
        }

        // Set the width of all referenced view to the width of the view with the greatest width.
        for(view in referencedViews) {
            if (view.width != maxWidth) {
                view.layoutParams.width = maxWidth
                view.requestLayout()
            }
        }
    }
}

我已将此小部件放入您的 XML 中并进行了一些其他调整。

<androidx.constraintlayout.widget.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <androidx.appcompat.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="0dp"
        android:layout_height="?attr/actionBarSize"
        android:background="?attr/colorPrimary"
        android:minHeight="?attr/actionBarSize"
        android:theme="?attr/actionBarTheme"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginEnd="8dp"
        android:text="Button 1"
        app:layout_constrainedWidth="true"
        app:layout_constraintBottom_toTopOf="@+id/button3"
        app:layout_constraintEnd_toStartOf="@+id/centerGuideline"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/toolbar" />

    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginEnd="8dp"
        android:text="Button 2"
        app:layout_constrainedWidth="true"
        app:layout_constraintBottom_toTopOf="@+id/button4"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@+id/centerGuideline"
        app:layout_constraintTop_toBottomOf="@+id/toolbar" />

    <Button
        android:id="@+id/button3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginEnd="8dp"
        android:text="Button 3"
        app:layout_constrainedWidth="true"
        app:layout_constraintBottom_toTopOf="@id/guideline"
        app:layout_constraintEnd_toStartOf="@+id/centerGuideline"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/button1" />

    <Button
        android:id="@+id/button4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginEnd="8dp"
        android:text="Button 4 Longer"
        app:layout_constrainedWidth="true"
        app:layout_constraintBottom_toTopOf="@id/guideline"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@+id/centerGuideline"
        app:layout_constraintTop_toBottomOf="@+id/button2" />

    <com.example.starterapp.GreatestWidthHelper
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:constraint_referenced_ids="button1,button2,button3,button4"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/guideline"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_percent="0.5" />

    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/centerGuideline"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintGuide_percent="0.5" />

</androidx.constraintlayout.widget.ConstraintLayout>

该小部件将能够在 Android Studio 设计器中进行调整。

但它在模拟器中看起来不错。

如果按钮的文本被强制换行，它将表现出来。