android - 使用 ConstraintLayout 均匀分布视图

Question

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

如何使用 new 实现像这样的等间距视图ConstraintLayout？

ConstraintLayout参考链接：博客文章、I/O 会议视频

Answer 1

有两种方法可以做到这一点ConstraintLayout：链和指南。要使用 Chains，请确保您使用的是ConstraintLayoutBeta 3 或更高版本，如果您想在 Android Studio 中使用可视化布局编辑器，请确保您使用的是 Android Studio 2.3 Beta 1 或更高版本。

方法 1 - 使用链

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

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

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

然后右键单击视图并选择“水平居中”：

这在视图之间建立了双向连接（这是定义链的方式）。默认情况下，链样式是“spread”，即使没有包含 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让视图填充父项（可选）
• 视图必须双向链接在一起（保存按钮链接到共享按钮的右侧，共享按钮链接的左侧按钮链接到保存按钮），选择“水平中心”时，这将通过布局编辑器自动发生。
• 链中的第一个视图可以通过 指定链样式layout_constraintHorizontal_chainStyle，各种链样式见文档，如果省略链样式，默认为“spread”
• 链条的重量可以通过以下方式调整layout_constraintHorizontal_weight
• 这个例子是针对水平链的，垂直链有对应的属性

方法 2 - 使用指南

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

然后选择“添加垂直指南”：

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

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

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

如果您希望视图填满可用空间，则应将约束设置为“任何大小”（水平运行的波浪线）：

（这与设置layout_widthto相同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

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

<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宽度使用重量

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

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

关键就在这里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 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" />