android - 使用 ConstraintLayout 均匀分布 View

Question

LinearLayout 的常见用法是平均空间(权重) View ，例如:

如何使用新的 ConstraintLayout 实现这样的等间距 View ？

ConstraintLayout 引用链接:blog post , I/O session video

Answer 1

使用 ConstraintLayout 有两种方法可以完成此操作:Chains和 Guidelines .要使用 Chains，请确保您使用的是 ConstraintLayout Beta 3 或更高版本，如果您想在 Android Studio 中使用可视化布局编辑器，请确保您使用的是 Android Studio 2.3 Beta 1 或更高版本。

方法 1 - 使用链

打开布局编辑器并照常添加小部件，并根据需要添加父约束。在这种情况下，我在父项的底部和父项的一侧添加了两个带有约束的按钮(左侧为保存按钮，右侧为共享按钮):

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

通过 Ctrl/Cmd 单击或拖动 View 周围的框来突出显示两个 View :

然后右键单击 View 并选择“水平居中”:

这会在 View 之间建立双向连接(这就是链的定义方式)。默认情况下，链样式是“spread”，即使没有包含 XML 属性，也会应用这种样式。坚持这种链式风格，但将 View 的宽度设置为 0dp 让 View 填充可用空间，均匀分布在父级中:

这在横向 View 中更明显:

如果您喜欢跳过布局编辑器，生成的 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 让 View 填充父 View (可选)
• the views must be linked together bidirectionally (right of save button links to share button, left of share button links to save button), this will happen automatically via the layout editor when choosing "Center Horizo​​ntally"
• 链中的第一个 View 可以通过layout_constraintHorizo​​ntal_chainStyle指定链样式，见documentation对于各种链样式，如果省略链样式，则默认为“spread”
• 可以通过layout_constraintHorizo​​ntal_weight
调整链的权重
• 这个例子是针对水平链的，垂直链有对应的属性

方法 2 - 使用指南

在编辑器中打开您的布局并单击指南按钮:

然后选择“添加垂直引用线”:

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

单击左向箭头将其切换为百分比值，然后将引用线拖动到 50% 标记处:

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

如果您希望 View 填满可用空间，则应将约束设置为“任意大小”(水平方向的波浪线):

(这与将 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" />