使用ConstraintLayout均匀间隔视图

问题描述

LinearLayout 的常见用法是均匀分布(权重)视图例子:

A common use for LinearLayout is to evenly space (weight) views, for example:

如何使用新的ConstraintLayout来实现这样均匀分布的视图?

How do you implement evenly spaced views like this using the new ConstraintLayout?

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

推荐答案

使用ConstraintLayout有两种方法可以实现此目的:链和指南.要使用Chains，请确保您使用的是ConstraintLayout Beta 3或更高版本，并且如果要在Android Studio中使用视觉布局编辑器，请确保您使用的是Android Studio 2.3 Beta 1或更高版本.

There are two ways to accomplish this using ConstraintLayout: Chains and Guidelines. To use Chains, make sure you are using ConstraintLayout Beta 3 or newer and if you want to use the visual layout editor in Android Studio, make sure you are using Android Studio 2.3 Beta 1 or newer.

方法1-使用链条

打开布局编辑器，然后正常添加小部件，并根据需要添加父约束.在这种情况下，我在父级底部和父级侧面添加了两个具有约束的按钮(左侧为保存"按钮，右侧为共享"按钮):

Open the layout editor and add your widgets as normal, adding parent constraints as needed. In this case, I have added two buttons with constraints to the bottom of the parent and side of the parent (left side for Save button and right side for Share button):

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

Note that in this state, if I flip to landscape view, the views do not fill the parent but are anchored to the corners:

通过按住Ctrl/Cmd或在视图周围拖动一个框来突出显示两个视图:

Highlight both views, either by Ctrl/Cmd clicking or by dragging a box around the views:

然后右键单击视图，然后选择水平居中":

Then right-click on the views and choose "Center Horizontally":

这将在视图之间建立双向连接(这是链的定义方式).默认情况下，链式为"spread"，即使不包含XML属性也将应用.坚持这种链式风格，但将视图的宽度设置为0dp可使视图填充可用空间，并在整个父对象上均匀分布:

This sets up a bi-directional connection between the views (which is how a Chain is defined). By default the chain style is "spread", which is applied even when no XML attribute is included. Sticking with this chain style but setting the width of our views to 0dp lets the views fill the available space, spreading evenly across the parent:

这在横向视图中更明显:

This is more noticeable in landscape view:

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

If you prefer to skip the layout editor, the resulting XML will look like:

<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
调整链的权重
• 此示例针对水平链，垂直链具有相应的属性

• setting the width of each item to 0dp or MATCH_CONSTRAINT lets the views fill the parent (optional)
• 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 Horizontally"
• the first view in the chain can specify the chain style via layout_constraintHorizontal_chainStyle, see the documentation for various chain styles, if the chain style is omitted, the default is "spread"
• the weighting of the chain can be adjusted via layout_constraintHorizontal_weight
• this example is for a horizontal chain, there are corresponding attributes for vertical chains

方法2-使用准则

在编辑器中打开布局，然后单击准则按钮:

Open your layout in the editor and click the guideline button:

然后选择添加垂直指南":

Then select "Add Vertical Guideline":

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

A new guideline will appear, that by default, will likely be anchored to the left in relative values (denoted by left-facing arrow):

单击左箭头将其切换为百分比值，然后将参考线拖动到50％标记:

Click the left-facing arrow to switch it to a percentage value, then drag the guideline to the 50% mark:

该准则现在可以用作其他视图的锚点.在我的示例中，我将保存按钮的右侧和共享按钮的左侧附加到了准则:

The guideline can now be used as an anchor for other views. In my example, I attached the right of the save button and the left of the share button to the guideline:

如果您希望视图填充可用空间，则应将约束设置为任意大小"(水平弯曲的线条):

If you want the views to fill up the available space then the constraint should be set to "Any Size" (the squiggly lines running horizontally):

(与将layout_width设置为0dp相同).

使用XML而不是使用布局编辑器也可以很容易地创建准则:

A guideline can also be created in XML quite easily rather than using the layout editor:

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

这篇关于使用ConstraintLayout均匀间隔视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！