ConstraintLayout（约束布局）中文文档

ConstraintLayout（约束布局）中文文档

更新了Android Studio2.3 发现官方的模板里面已经开始使用这种布局了，所以去看了一下官方的文档，感觉这种布局可以更好的适配复杂的布局，下面是本人自己翻译的，凑活看，希望对大家有帮助。

本文翻译自谷歌的官方文档→ConstraintLayout

ConstraintLayout 是一种允许你以灵活的方式放置和排列组件的ViewGroup。

注意：ConstraintLayout 可用于API9（2.3）以上的Android系统，官方会在后续不断地完善这个组件，支持更多的功能，文档也会不断地更新。

现在可以使用如下几种constriant（约束）：

Relative positioning 相对布局

Margins 边距

Centering positioning 居中

Visibility behavior 可见性

Dimension constraints 尺寸约束

Chains 链式

Virtual Helpers objects Virtual Helper对象

/*****************************************************************************/

Relative positioning 相对布局

相对定位是在ConstraintLayout创建布局的一种构建方法。这些约束可以给定部件相对于另一个位置。你可以约束一个部件在水平或者垂直轴:

- 水平轴: Left, Right, Start and End sides
- 垂直轴：top, bottom sides and text baseline（文本基线）

一般来说概念是约束给定部件的一个边和另一个其他部件的边。

举个栗子，为了放置按钮B右边的按钮(图1):

你需要这样:

<Button android:id="@+id/buttonA" ... />
         <Button android:id="@+id/buttonB" ...
                 app:layout_constraintLeft_toRightOf="@+id/buttonA" />

这样我们就告诉系统我们想把Button B的左面 约束在 ButoonA 的右面，这样放置约束说明系统会尝试双方共享相同的位置。    

下图是现有的各种约束： 

• layout_constraintLeft_toLeftOf

• layout_constraintLeft_toRightOf

• layout_constraintRight_toLeftOf

• layout_constraintRight_toRightOf

• layout_constraintTop_toTopOf

• layout_constraintTop_toBottomOf

• layout_constraintBottom_toTopOf

• layout_constraintBottom_toBottomOf

• layout_constraintBaseline_toBaselineOf

• layout_constraintStart_toEndOf

• layout_constraintStart_toStartOf

• layout_constraintEnd_toStartOf

• layout_constraintEnd_toEndOf

他们都需要一个参考另一个组件的id,或者父( 引用的父容器,即ConstraintLayout ):

<Button android:id="@+id/buttonB" ...
                 app:layout_constraintLeft_toLeftOf="parent" />

Margins 边距

如果设置了侧边缘,他们将被应用到相应的Constriants（约束）(如果存在的话)(上图),执行margin作为目标和源端之间的空间。通常的布局margin属性可用于这种效果:

• android:layout_marginStart

• android:layout_marginEnd

• android:layout_marginLeft

• android:layout_marginTop

• android:layout_marginRight

• android:layout_marginBottom

注意！margin只能大于等于0

利用Margins连接一个GONE了的组件

当一个约束目标的可见性是View.GONE的时候，你也可以使用以下属性表示不同的margin值:

• layout_goneMarginStart

• layout_goneMarginEnd

• layout_goneMarginLeft

• layout_goneMarginTop

• layout_goneMarginRight

• layout_goneMarginBottom

Centering positioning 居中和偏移

ConstraintLayout的另一个有用的方面是如何处理“不可能”的约束。举个栗子，像这样:

<android.support.constraint.ConstraintLayout ...>
             <Button android:id="@+id/button" ...
                 app:layout_constraintLeft_toLeftOf="parent"
                 app:layout_constraintRight_toRightOf="parent/>
         </>

除非ConstraintLayout恰巧拥有相同大小的Button，所有的constraints（约束）都不能同时满足条件（官方希望他们两边都不能满足条件）。

发生在这种情况下,约束向相反的方向将组件分开同（上图）,这样组件最终会被居中在父容器。这将适用于垂直约束。

bias 偏移

默认时遇到这种相反的约束是居中布局组件;但是你可以调整位置倾向一方使用偏移属性:

• layout_constraintHorizontal_bias
• layout_constraintVertical_bias

举栗说明将左边的偏移量改为30%，而不是默认的50%，左侧会变短,组件将更倾向于左侧:

<android.support.constraint.ConstraintLayout ...>
             <Button android:id="@+id/button" ...
                 app:layout_constraintHorizontal_bias="0.3"
                 app:layout_constraintLeft_toLeftOf="parent"
                 app:layout_constraintRight_toRightOf="parent/>
         </>

使用偏移,您可以更好的适应屏幕大小变化来创建界面。

Visibility behavior 可见性

ConstraintLayout对被标记为View.GONE的组件有特殊的处理。

GONE掉的组件,像往常一样,不会被显示,不布局本身(即实际尺寸不会改变如果标记为GONE)。

但在计算布局方面,组件仍然是它的一部分,一个重要的区别:

• For the layout pass, their dimension will be considered as if zero (basically, they will be resolved to a point)通过布局,他们的尺寸将被视为0(基本上,他们将被视为一个点)
• 如果他们有约束其他的组件，那么他们仍然有效,只不过所有的margin都会变为0

上图是当ButtonA GONE掉的时候B的显示效果

这个特定的behavior允许构建布局,你可以暂时标记组件是GONE掉了,而不是破坏布局
,这样做简单布局动画时特别有用。

注意:margin在B已经定义一个与A的连接时才会生效。在某些情况下,这可能不是你想要的margin(如A有距离他父容器100 dp的margin,B到A只有16 dp,然后A消失掉的时候,B将margin父容器 16 dp)。出于这个原因,当一个组件被标记为GONE的时候，您可以指定一个替代margin值。

Dimensions constraints 尺寸约束

你可以自己定义ConstraintLayout本身的最小尺寸：

• android:minWidth 最小的宽度

• android:minHeight 最小的高度

  这些最小尺寸将被用于ConstraintLayout尺寸设置为WRAP_CONTENT的时候。

组件尺寸约束

组件的尺寸可以通过三种不同方式指定android:layout_width和android:layout_height:
1. 使用指定的尺寸(就像100dp这种具体的尺寸)
2. 使用WRAP_CONTENT,让组件自己计算大小
3. 使用0dp，相当于MATCH_CONSTRAINT

前两个和其他布局类似。最后一个将调整组件的匹配的约束(见图,wrap_content(a),(b)是0 dp)。如果margin,他们将会重新计算（(c)0dp)。

重点！！！:ConstraintLayout 中的组件是不支持MATCH_PARENT 的,如果想要相同的效果要使用MATCH_CONSTRAINT，相应的上下左右要约束在“父容器”上。

Ratio 比

您还可以定义一个组件的尺寸为比值。为了做到这一点,
你需要至少有一个尺寸被设置为0 dp(即。MATCH_CONSTRAINT),
并设置属性layout_constraintDimentionRatio给定比例。例如:

<Button  android:layout_width="wrap_content"
                   android:layout_height="0dp"
                   app:layout_constraintDimensionRatio="1:1" />

 将按钮的高度设置为与宽度相同。这个比例可以表达为:

• 一个float值,代表宽度和高度之间的比率

• 比率的形式“宽:高”

  如果将宽高都设置为MATCH_CONSTRAINT(0 dp)，
  我们还可以使用比例。
  在这种情况下,系统设置最大的尺寸来满足所有约束和维护指定的长宽比。
  以另一个尺寸来约束一个特定的尺寸。
  你可以在前面 加W”或H,分别指定宽度或高度限制。
  举个例子,如果一个尺寸是受制于两个目标(如宽度为0 dp和居中中在父布局)我们可以声明哪一方应该约束,
  通过添加字母W(对于限制宽度)或H(限制高度)的比率,由逗号分开:

 <Button android:layout_width="0dp"
                   android:layout_height="0dp"
                   app:layout_constraintDimensionRatio="H,16:9"
                   app:layout_constraintBottom_toBottomOf="parent"
                   app:layout_constraintTop_toTopOf="parent"/>

这样就设置宽度约束父布局，然后高度以16：9的比例显示这个按钮

Chains 链式

Chains提供在一个轴(横向或纵向)类似group的行为。其他轴可以独立约束。

创建一个链

如果一组组件通过双向连接连接在一起，我们就可以认为是他们是一个链,(如下图,显示最小链,由两个组件组成)。

链头 Chain heads

链是由属性集合的第一个元素控制(链的“头”):

链中的边距

如果在指定的连接上有margin,他们将被参考。在传递链的时候,将扣除mragin来分配空间。

链的样式

当链的第一个元素设置属性layout_constraintHorizontal_chainStyle 或layout_constraintVertical_chainStyle,链的行为会根据指定的样式改变(默认为CHAIN_SPREAD)。

• CHAIN_SPREAD – 元素会被展开 (默认)

• Weighted chain – 在CHAIN_SPREAD模式中,如果有些组件设置为MATCH_CONSTRAINT,他们将分开可用空间

• CHAIN_SPREAD_INSIDE – 相似,但链的端点不会散开

• CHAIN_PACKED – 链的元素将被打包在一起。子元素水平或垂直偏移（bias）属性将影响元素的定位

权重链

链的默认行为是元素伸展相同的可用空间。
如果一个或多个元素使用MATCH_CONSTRAINT,他们将利用剩余的空间(等分)。
属性layout_constraintHorizontal_weight， 
layout_constraintVertical_weight将控制分布在空间的元素如何使用MATCH_CONSTRAINT。
例如，使用MATCH_CONSTRAINT链包含两个元素，
第一个元素使用的权重2，
第二个元素使用权重1，
占用的空间第一个元素将是第二个元素的两倍。

Virtual Helper objects 虚拟的Helper对象

在使用具体的功能之前,您还可以使用特殊的helper对象来帮助你对ConstraintLayout进行布局。目前,guideline象允许您创建水平和垂直位置相对于ConstraintLayout容器的guideline。组件可以定位约束他们这样的guideline。

更多guideline的详情可以参考:

guideline

本文翻译自谷歌的官方文档→ConstraintLayout