constraintlayout用子项match_constraint包装其内容宽度 [英] constraintlayout wraps its content width with children match_constraint

问题描述

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

I have a simple side bar with 2 buttons vertical chained and i want my side bar to wrap largest button while smaller button expands to match largest one. Here is a capture where i want "AAA" button to match "VALIDATE" button width

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

Of course what poped my mind is to use match contraint width for both buttons but when using a wrap_content container this leads to:

我的布局:

<?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>

推荐答案

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

If you know which button is going to be wider, then you can make that button wrap_content and constrain the other button to it as follows:

<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>

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

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

Things get a little more complicated if you don't know in advance which button will be wider. (Maybe due to language changes.) In that case, you can check the sizes programmatically and explicitly expand the narrower button. You may consider this less than ideal.

关于在XML中完成此操作，我过去曾研究过这种类型的问题，并且该问题总是减少为某种循环引用问题. (实际上，这是您在wrap_content容器中使用match_constraints小部件时遇到的问题.这些小部件与容器一样宽，而容器与这些小部件一样宽！是什么?)

As for accomplishing this in XML, I have looked at this type of problem in the past and the problem always reduces to some kind of circular reference issue. (In fact, this is the problem that you are having with match_constraints widgets in a wrap_content container. The widgets are as wide as the container and the container is as wide as the widgets! What?)

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

If you don't know which button will be wider, you can create an invisible button that has two lines of text that correspond to the labels of your buttons (assuming single line labels.)

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

Now that there is a dummy button that is the right width, constrain the sides of your buttons to the sides of the dummy button and make their width 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>

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

You would, of course, make the dummy button invisible.

这篇关于constraintlayout用子项match_constraint包装其内容宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！