Question

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>

Answer 1

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

PrimBin.Value

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

希望这会有所帮助！

Answer 2

这是使用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>

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

2 个答案: