Android约束布局解析

UI布局常见问题

• UI设计有时毫无规律且复杂，使用基础布局十分困难复杂，需要多层嵌套

• 有时设计师的标注不够科学，往往简单标注元素之间距离。缺少对齐方式和布局空间的概念，往往需要自己推敲实现，效率难以保证。

解决方案：

2016的 Google I/O 大会上推出的全新的布局控件 ConstraintLayout并得到官方的大力推广。ConstraintLayout 中文直译就是约束布局，顾名思义就是通过对控件进行约束布局，简单理解就可以认为它是RelativeLayout的超级加强升级版本。可以有效解决布局嵌套的性能问题和复杂布局的快速实现，性能大约提高40% 。ConstraintLayout实现布局的方法也十分简单，可以通过Android Studio 提供的编辑器，简单拖拽就可以快速实现布局，就好像UI设计师操作PhotoShop一样，熟练掌握以后，安装UI标注就可以直接还原设计效果。

基本属性

13个基本约束属性用来控制子View的相对位置，layout_constraintXXX_ 表示View的4个位置属性，后面的_toXXof和RelativeLayout类似，指定View的某个位置属性 约束的对象和方位。

• layout_constraintBottom_toBottomOf
• layout_constraintBottom_toTopOf
• layout_constraintStart_toEndOf
• layout_constraintStart_toStartOf
• layout_constraintVertical_bias
• layout_constraintHorizontal_bias ：
• layout_constraintBaseline_toBaselineOf：基线对齐，将视图的文本基线与另一个视图的文本基线对齐

Guideline (引导线) 是用来进行辅助定位的不可见元素，分为vertical 和 horizontal 两种，在一些没有规律的UI对齐 定位时，十分有用。

Chains（链）

一种特定的约束，一个链包含了多个视图，它允许链中的视图共享空间，并控制可用空间在它们之间如何分配。该效果与 LinearLayout 的 Weiget 类似，但是链的作用远远超过它。Chains包括Horizontal、Vertical两种。

Cycle Chain Mode（链式模式）

• layout_constraintHorizontal_chainStyle
• layout_constraintVertical_chainStyle

参数：
spread：将可用空间以均匀分布的方式将视图放置在链中（默认模式）
spread_inside：将链中最外面的视图对齐到外边缘，然后在可用空间内均匀的放置链中的其他视图
packed：将链中的视图紧紧的放在一起（可以提供边距让其分开），然后让其居中在可用空间内

image

Chains 还能对链中单独的视图控件设置 Weiget，使用和 LinearLayout 的 Weiget 一致。

视图大小控制

• wrap_content
• 指定宽度
• Match Constraints：尽可能扩展以满足各方的约束（在考虑视图边界之后）
• layout_constraintDimensionRatio：设置控件宽高比，"h, 3:1"表示高度就只有宽度的三分之一,至少需要有一个尺寸约束设置未Match Constraints（0dp）

一些实战的技巧

1. 让两个不同尺寸的View，中心对齐居中

2. 使View于某一个View的一条边中心对齐