使用 ConstraintLayout 均匀分布视图

Question

LinearLayout 的常见用途是平均空间（权重）视图，例如：

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

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

原文由 AdamK 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

使用 ConstraintLayout 有两种方法可以做到这一点： 链 和 指南。要使用 Chains，请确保您使用的是 ConstraintLayout Beta 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_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" />

原文由 AdamK 发布，翻译遵循 CC BY-SA 3.0 许可协议

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 width = 2 * View2 width 使用 权重

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

结果

原文由 Linh 发布，翻译遵循 CC BY-SA 4.0 许可协议