约束布局 - 宽度最大的两个视图

Question

我想创建一个布局（使用约束布局），如下所示：

在不同的语言中，Button1 可能比 button2 大。我怎样才能做到这一点？

我只能在包含两个按钮的约束中使用 LinearLayout 来实现这一点，但我试图只使用一个布局。

谢谢

Answer 1

更新

我想提一下，Remq 的答案有效并解决了我在下面提到的自引用问题，其中视图的宽度由使用与引用 ID 相同的视图的屏障的位置决定。关键似乎是app:layout_constraintWidth_min="wrap"两种视图的规范。我不清楚为什么这会起作用，或者它会继续起作用，但我想记下它

更新 #2

我又看了看为什么 Remq 的答案有效。我的经验是，如果没有指定app:layout_constraintWidth_min="wrap"视图，两个视图都会折叠为零宽度。一旦视图测量为零宽度，app:layout_constraintWidth_min="wrap"再次增长它们以便包装内容。这只是我的猜测，没有证据表明这是正在发生的事情，但这是有道理的。

我在 Stack Overflow 上多次看到类似这个问题的问题。这些问题从来没有令人满意的答案 IMO（包括我已经回答过的问题）。困难在于存在依赖性问题，因为一个视图取决于另一个视图的宽度，而另一个视图取决于第一个视图的宽度。我们陷入了参考的窘境。（以编程方式强制宽度始终是一种选择，但似乎不可取。）

另一种可能更好的方法是使用自定义的ConstraintHelper，它将检查引用视图的大小并将所有视图的宽度调整为最大的宽度。

自定义ConstraintHelper放置在布局的 XML 中，并引用受影响的视图，如下面的示例布局所示：

活动主

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

    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="8dp"
        android:gravity="center"
        android:text="Button1"
        app:layout_constraintBottom_toTopOf="@+id/button2"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_chainStyle="packed" />

    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:text="Button2 may be larger"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.498"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/button1" />

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

</androidx.constraintlayout.widget.ConstraintLayout>

自定义ConstraintHelper如下所示：

最大宽度助手

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

    override fun updatePostMeasure(container: ConstraintLayout) {
        var maxWidth = 0

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

        // Set the width of all referenced view to the width of the view with the greatest width.
        for (i in 0 until this.mCount) {
            val id = this.mIds[i]
            val child = container.getViewById(id)
            val widget = container.getViewWidget(child)
            if (widget.width != maxWidth) {
                widget.width = maxWidth

                // Fix the gravity.
                if (child is TextView && child.gravity != Gravity.NO_GRAVITY) {
                    // Just toggle the gravity to make it right.
                    child.gravity = child.gravity.let { gravity ->
                        child.gravity = Gravity.NO_GRAVITY
                        gravity
                    }
                }
            }
        }
    }
}

布局显示如下。

Answer 2

我偶然发现了这个问题，并能够解决它，这是在约束布局中androidx.constraintlayout.widget.Barrier引入的。1.1.0-beta1所以我认为与遇到同样问题的人分享是件好事：

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

    <Button
        android:id="@+id/button1"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginBottom="8dp"
        android:gravity="center"
        android:text="Button1"
        app:layout_constraintBottom_toTopOf="@+id/button2"
        app:layout_constraintEnd_toEndOf="@id/barrierEnd"
        app:layout_constraintHorizontal_bias="1.0"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_chainStyle="packed"
        app:layout_constraintWidth_min="wrap" />

    <Button
        android:id="@+id/button2"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:text="Button2 may be larger"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="@id/barrierEnd"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/button1"
        app:layout_constraintWidth_min="wrap" />

    <androidx.constraintlayout.widget.Barrier
        android:id="@+id/barrierEnd"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:barrierDirection="end"
        app:constraint_referenced_ids="button1,button2"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

无法将它们水平居中，所以如果有人发现了这一点，我将更新此示例。