将ConstraintLayout中的所有子项宽度匹配为最宽的子项宽度,其中width = wrap content

时间:2018-08-17 19:42:51

标签: android android-layout android-constraintlayout

ConstraintLayout功能强大,但有时很棘手。

我想用ConstraintLayout实现布局,而使用LinearLayout可以轻松实现。

  • 蓝色区域是父约束。红色部分是LinearLayout。我想通过保持以下条件将此LinearLayout转换为ConstraintLayout

    1. 所有子项(按钮)的宽度应与最宽的子项匹配。
    2. 最大的孩子并没有固定。它将在运行时更改。
    3. 应该保留红色框以保持wrap_content

我尝试过障碍,准则和约束布局的其他属性,但没有成功。

以下是带有LinearLayout的代码:

<android.support.constraint.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"
android:background="#476dce"
android:padding="16dp">

  <LinearLayout
    android:orientation="vertical"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    android:background="#f5aaaa">


    <Button
        android:id="@+id/button1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Button"
        tools:text="Small" />

    <Button
        android:id="@+id/button2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Button"
        tools:text="Bigggggeer" />


    <Button
        android:id="@+id/button3"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Button"
        tools:text="Even Bigggggggggeer" />

  </LinearLayout>
</android.support.constraint.ConstraintLayout>

2 个答案:

答案 0 :(得分:0)

当前的1.1稳定版本允许基于屏障和单独背景的棘手解决方案。

enter image description here

PrimBin.Value

我们可以将文本与按钮分开,并在每一端设置两个障碍,以跟踪三个TextView之间最大的文本。
因此,现在,按钮仅充当背景和单击区域,并且它们被设置为匹配两个障碍之间的约束。
您可能需要注意与文本相关的高程,因为Button默认具有高程。 当然,如果您不喜欢Buttons的动画高程,请将其更改为视图。
最后,ConstraintLayout具有链功能,可以更灵活地模拟LinearLayout的行为。

希望这会有所帮助!

答案 1 :(得分:-1)

这是使用ConstraintLayout

的修改后的布局
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.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"
    android:background="#476dce"
    android:padding="16dp">

    <android.support.constraint.ConstraintLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#f5aaaa"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">


        <Button
            android:id="@+id/button1"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="Button"
            tools:text="Small" />

        <Button
            android:id="@+id/button2"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="Button"
            app:layout_constraintTop_toBottomOf="@id/button1"
            tools:text="Bigggggeer" />


        <Button
            android:id="@+id/button3"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="Button"
            app:layout_constraintTop_toBottomOf="@id/button2"
            tools:text="Even Bigggggggggeer" />

    </android.support.constraint.ConstraintLayout>
</android.support.constraint.ConstraintLayout>