Question

我有一个简单的侧栏，上面有2个垂直链接的按钮，我希望侧栏可以包裹最大的按钮，而较小的按钮可以扩展以匹配最大的按钮。这是我希望“ AAA”按钮与“ VALIDATE”按钮宽度相匹配的截图

当然，我突然想到对两个按钮都使用匹配约束宽度，但是当使用wrap_content容器时，会导致：

我的布局：

<?xml version="1.0" encoding="utf-8"?>
<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:id="@+id/container"
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:layout_gravity="bottom"
    android:background="?attr/colorSurface"
    android:padding="@dimen/screen_padding">

    <com.google.android.material.button.MaterialButton
        android:id="@+id/redo_button"
        style="@style/AppStyle.Button.OutlinedButton.SecondaryVariantStroke"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginBottom="@dimen/spacing_normal"
        android:text="aaa"
        app:layout_constrainedWidth="false"
        app:layout_constraintBottom_toTopOf="@+id/validate_button"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_chainStyle="packed" />

    <ImageView
        android:layout_width="32dp"
        android:layout_height="0dp"
        android:layout_marginStart="8dp"
        android:background="@drawable/shape_circle_secondary_variant"
        android:padding="7dp"
        android:src="@drawable/ic_camera"
        android:tint="@android:color/white"
        app:layout_constraintBottom_toBottomOf="@+id/redo_button"
        app:layout_constraintDimensionRatio="h,1:1"
        app:layout_constraintEnd_toEndOf="@+id/redo_button"
        app:layout_constraintStart_toEndOf="@+id/redo_button"
        app:layout_constraintTop_toTopOf="@+id/redo_button"
        tools:ignore="ContentDescription" />

    <com.google.android.material.button.MaterialButton
        android:id="@+id/validate_button"
        style="@style/AppStyle.Button.OutlinedButton"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="@string/global_valid"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/redo_button" />

</androidx.constraintlayout.widget.ConstraintLayout>

Answer 1

如果您知道哪个按钮将变宽，则可以使该按钮wrap_content并将另一个按钮约束到该按钮，如下所示：

<androidx.constraintlayout.widget.ConstraintLayout 
    android:id="@+id/container"
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:layout_gravity="bottom"
    android:background="@android:color/darker_gray"
    android:padding="16dp">

    <Button
        android:id="@+id/redo_button"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="aaa"
        app:layout_constrainedWidth="false"
        app:layout_constraintBottom_toTopOf="@+id/validate_button"
        app:layout_constraintEnd_toEndOf="@+id/validate_button"
        app:layout_constraintStart_toStartOf="@+id/validate_button"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_chainStyle="packed" />

    <Button
        android:id="@+id/validate_button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="16dp"
        android:text="Validate"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/redo_button" />


</androidx.constraintlayout.widget.ConstraintLayout>

如果这可以解决您的问题，请在此处停止。

如果您事先不知道哪个按钮会更宽，情况会变得有些复杂。（可能是由于语言更改所致。）在这种情况下，您可以以编程方式检查大小并显式展开较窄的按钮。您可能认为这不理想。

关于在XML中完成此操作，我过去曾研究过这种类型的问题，并且该问题总是减少为某种循环参考问题。（实际上，这是match_constraints容器中的wrap_content小部件所遇到的问题。这些小部件与容器一样宽，而容器与小部件一样宽！什么？）<？ / p>

如果您不知道哪个按钮会更宽，则可以创建一个不可见按钮，该按钮具有两行与按钮标签相对应的文本（假定为单行标签）。

现在有一个宽度合适的虚拟按钮，将按钮的侧面限制为虚拟按钮的侧面，并使其宽度为match_constraints。

<androidx.constraintlayout.widget.ConstraintLayout 
    android:id="@+id/container"
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:layout_gravity="bottom"
    android:background="@android:color/darker_gray"
    android:padding="16dp">

    <Button
        android:id="@+id/dummyForSizing"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="aaa\nValidate"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <Button
        android:id="@+id/redo_button"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="aaa"
        app:layout_constrainedWidth="false"
        app:layout_constraintBottom_toTopOf="@+id/validate_button"
        app:layout_constraintEnd_toEndOf="@+id/dummyForSizing"
        app:layout_constraintStart_toStartOf="@+id/dummyForSizing"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_chainStyle="packed" />

    <Button
        android:id="@+id/validate_button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="16dp"
        android:text="Validate"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="@+id/dummyForSizing"
        app:layout_constraintStart_toStartOf="@+id/dummyForSizing"
        app:layout_constraintTop_toBottomOf="@+id/redo_button" />


</androidx.constraintlayout.widget.ConstraintLayout>

您当然要使虚拟按钮不可见。

constraintlayout用子项match_constraint包装其内容宽度

1 个答案: