使用 ConstraintLayout 均匀间隔视图 [英] Evenly spacing views using ConstraintLayout

问题描述

如何使用新的 ConstraintLayout 实现这样的均匀间隔视图?

ConstraintLayout 链接供参考:

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

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

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

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

这在横向视图中更明显:

如果您更喜欢跳过布局编辑器，生成的 XML 将如下所示:

然后选择添加垂直参考线":
将出现一个新的指南，默认情况下，它可能会以相对值的形式锚定在左侧(由向左的箭头表示):
单击向左的箭头将其切换为百分比值，然后将参考线拖动到 50% 标记处:
该指南现在可以用作其他视图的锚点.在我的示例中，我将保存按钮的右侧和共享按钮的左侧附加到指南:
如果您希望视图填满可用空间，则应将约束设置为任意大小"(水平运行的波浪线):
(这与设置layout_width为0dp相同).
也可以很容易地在 XML 中创建指南，而不是使用布局编辑器:
A common use for LinearLayout is to evenly space (weight) views, for example:


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

ConstraintLayout links for reference: blog post, I/O session video
解决方案
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.

Method 1 - Using Chains

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:



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



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:



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


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


Method 2 - Using a Guideline

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



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



(This is the same as setting the layout_width to 0dp).

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 均匀间隔视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！