Question

LinearLayout的一个常见用途是均匀地分隔（权重）视图，例如：

如何使用新的ConstraintLayout？

实现均匀分布的视图

ConstraintLayout链接供参考：blog post，I/O session video

Answer 1

使用ConstraintLayout：Chains和Guidelines有两种方法可以实现此目的。要使用链接，请确保您使用的是ConstraintLayout Beta 3或更高版本，如果要在Android Studio中使用可视化布局编辑器，请确保使用的是Android Studio 2.3 Beta 1或更高版本。

方法1 - 使用链

打开布局编辑器并正常添加小部件，根据需要添加父级约束。在这种情况下，我添加了两个带有约束的按钮到父级的底部和父级的一侧（左侧为“保存”按钮，右侧为“共享”按钮）：

请注意，在此状态下，如果我翻转到横向视图，视图不会填充父级，而是锚定到角落：

通过Ctrl / Cmd点击或在视图周围拖动一个框来突出显示两个视图：

然后右键单击视图并选择＆＃34;水平居中＆＃34;：

这将在视图之间建立双向连接（这是链的定义方式）。默认情况下，链样式是＆＃34; spread＆＃34;，即使没有包含XML属性也会应用它。坚持使用此链样式，但将视图宽度设置为0dp可让视图填充可用空间，并在父级中均匀分布：

这在横向视图中更明显：

如果您希望跳过布局编辑器，生成的XML将如下所示：

<android.support.constraint.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/button_save"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:text="@string/button_save_text"
    android:layout_marginStart="8dp"
    android:layout_marginBottom="8dp"
    android:layout_marginEnd="4dp"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintRight_toLeftOf="@+id/button_share"
    app:layout_constraintHorizontal_chainStyle="spread" />

<Button
    android:id="@+id/button_share"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:text="@string/button_share_text"
    android:layout_marginStart="4dp"
    android:layout_marginEnd="8dp"
    android:layout_marginBottom="8dp"
    app:layout_constraintLeft_toRightOf="@+id/button_save"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintBottom_toBottomOf="parent" />

</android.support.constraint.ConstraintLayout>

详细说明：

将每个项目的宽度设置为0dp或MATCH_CONSTRAINT，让视图填充父级（可选）
视图必须双向链接（保存按钮链接到共享按钮，共享按钮链接左侧保存按钮），这将在选择＆＃34;水平居中＆＃34; <时自动通过布局编辑器发生/ LI>
链中的第一个视图可以通过layout_constraintHorizontal_chainStyle指定链样式，请参阅documentation了解各种链样式，如果省略链样式，则默认为＆＃34; spread＆＃34 ;
可以通过layout_constraintHorizontal_weight
此示例适用于水平链，垂直链具有相应的属性

方法2 - 使用指南

在编辑器中打开布局，然后单击指南按钮：

然后选择＆＃34;添加垂直指南＆＃34;：

将出现一个新的指南，默认情况下，可能会以相对值（左侧箭头表示）锚定在左侧：

单击向左箭头将其切换为百分比值，然后将指南拖动到50％标记：

该指南现在可以用作其他视图的锚点。在我的示例中，我将保存按钮的右侧和共享按钮的左侧附加到指南：

如果您希望视图填满可用空间，则约束应设置为＆＃34; Any Size＆＃34; （水平横行的波浪线）：

（这与将layout_width设置为0dp）相同。

也可以使用XML轻松创建指南，而不是使用布局编辑器：

<android.support.constraint.Guideline
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/guideline"
    android:orientation="vertical"
    app:layout_constraintGuide_percent="0.5" />

Answer 2

好吧，如果它可以帮助某人

键在这里app:layout_constraintHorizontal_weight="1"和
关于约束布局的最好的事情是它支持循环依赖，这就是我用它完成的。

第一个孩子
app:layout_constraintEnd_toStartOf="@+id/textInputSecondChild"

第二个孩子

app:layout_constraintLeft_toRightOf="@+id/textInputFirstChild"

这是完整的演示

<android.support.design.widget.TextInputLayout
    android:id="@+id/textInputParent"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent">

    <EditText
        android:id="@+id/editTextParent"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="@string/state" />
</android.support.design.widget.TextInputLayout>

<android.support.design.widget.TextInputLayout
    android:id="@+id/textInputFirstChild"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    app:layout_constraintEnd_toStartOf="@+id/textInputSecondChild"
    app:layout_constraintHorizontal_weight="1"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/textInputParent">

    <EditText
        android:id="@+id/editTextChildOne"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="@string/pin_code" />
</android.support.design.widget.TextInputLayout>

<android.support.design.widget.TextInputLayout
    android:id="@+id/textInputSecondChild"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    app:layout_constraintHorizontal_weight="1"
    app:layout_constraintLeft_toRightOf="@+id/textInputFirstChild"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/textInputParent">

    <EditText
        android:id="@+id/editTextChildSecond"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="@string/country" />
</android.support.design.widget.TextInputLayout>

Answer 3

要在同一行中创建两个等宽的视图，只需定义

<android.support.constraint.ConstraintLayout
    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:text="Button 1"
        app:layout_constraintEnd_toStartOf="@+id/button2"
        app:layout_constraintStart_toStartOf="parent" />

    <Button
        android:id="@+id/button2"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="Button 2"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@+id/button1" />

</android.support.constraint.ConstraintLayout>

注意

宽度= 0dp（MATCH_CONSTRAINT）
button1和button2的约束必须像上面一样

结果

更多
如果您希望View1大于View2，则可以使用weight或percent。
例如，View1宽度= 2 * View2宽度使用 weight

<android.support.constraint.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    >

    <Button
        android:id="@+id/button3"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="Button 3"
        app:layout_constraintEnd_toStartOf="@+id/button4"
        app:layout_constraintHorizontal_weight="2"
        app:layout_constraintStart_toStartOf="parent"
        />

    <Button
        android:id="@+id/button4"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="Button 4"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_weight="1"
        app:layout_constraintStart_toEndOf="@+id/button3"
        />

</android.support.constraint.ConstraintLayout>

结果

例如，View1宽度= 2 * View2宽度使用百分比

<android.support.constraint.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    >

    <Button
        android:id="@+id/button5"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="Button 5"
        app:layout_constraintEnd_toStartOf="@+id/button6"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintWidth_percent="0.667"
        />

    <Button
        android:id="@+id/button6"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="Button 6"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@+id/button5"
        app:layout_constraintWidth_percent="0.333"
        />

</android.support.constraint.ConstraintLayout>

结果

Answer 4

您应该阅读有关加权链的信息。代码示例在这里。

<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="wrap_content"
    >

    <TextView
        android:id="@+id/figure_1"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginEnd="8dp"
        android:layout_marginRight="8dp"
        app:layout_constraintEnd_toStartOf="@id/figure_2"
        app:layout_constraintHorizontal_weight="1"
        app:layout_constraintStart_toStartOf="parent"
        tools:text="1"
        />

    <TextView
        android:id="@+id/figure_2"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginLeft="8dp"
        android:layout_marginEnd="8dp"
        android:layout_marginRight="8dp"
        app:layout_constraintEnd_toStartOf="@id/figure_3"
        app:layout_constraintHorizontal_weight="1"
        app:layout_constraintStart_toEndOf="@id/figure_1"
        tools:text="2"
        />

    <TextView
        android:id="@+id/figure_3"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginLeft="8dp"
        android:layout_marginEnd="8dp"
        android:layout_marginRight="8dp"
        app:layout_constraintEnd_toStartOf="@id/figure_4"
        app:layout_constraintHorizontal_weight="1"
        app:layout_constraintStart_toEndOf="@id/figure_2"
        tools:text="3"
        />

    <TextView
        android:id="@+id/figure_4"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginLeft="8dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_weight="1"
        app:layout_constraintStart_toEndOf="@id/figure_3"
        tools:text="4"
        />
</android.support.constraint.ConstraintLayout>

因此，设置android:layout_width="0dp"，app:layout_constraintHorizontal_weight="1"并将每个视图与以下邻居链接：

app:layout_constraintStart_toEndOf="@id/figure_2"
app:layout_constraintEnd_toStartOf="@id/figure_4"

Answer 5

一旦有了链式物品，您仍然可以像相对布局一样在它们上使用配重，以使它们保持均匀的间距。下面的示例显示了如何使它们与不同大小的textView保持均匀的间距。

<TextView1
     app:layout_constraintHorizontal_weight="1" />
 <TextView2
     app:layout_constraintHorizontal_weight="1" />
 <TextView3
     app:layout_constraintHorizontal_weight="1" />
 <TextView4
     app:layout_constraintHorizontal_weight="1" />

使用ConstraintLayout均匀地间隔视图

5 个答案: