- ConstraintLayout约束布局中文文档
-
- Relative positioning 相对布局
- Margins 边距
- 利用Margins连接一个GONE了的组件
- Centering positioning 居中和偏移
- bias 偏移
- Visibility behavior 可见性
- Dimensions constraints 尺寸约束
- 组件尺寸约束
- Ratio 比
- Chains 链式
- 创建一个链
- 链头 Chain heads
- 链中的边距
- 链的样式
- 权重链
- Virtual Helper objects 虚拟的Helper对象
-
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