使用ConstraintLayout

Question

为LinearLayout一个常见的用途是均匀的空间（重量）的意见，例如均匀间隔的观点：

你如何使用新ConstraintLayout实现这样的均匀分布的看法？参考

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 - 使用链条

打开布局编辑器，并添加小部件正常，根据需要增加父母的约束。在这种情况下，我增加了两个按钮与约束父的家长和侧（左侧为保存按钮，右侧为分享按钮）的底部：

注意，在这种状态如果我不停地翻转到横向视图，该视图不填父，但锚定在角落：

高亮两种观点，无论是按Ctrl/Cmd的点击或拖动周围的景色框：

然后在视图上单击鼠标右键，选择“水平居中”：

这将把视图之间的双向连接（这是一个链条是如何定义的） 。默认情况下，链式是“传播”，即使在没有包含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指定链式，请参阅documentation获取各种链式样链式被省略，默认为“传播”
• 链的加权可以通过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" /> 

Answer 2

那么，如果它可以帮助别人

的关键在这里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>