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:将链中的视图紧紧的放在一起(可以提供边距让其分开),然后让其居中在可用空间内
Chains 还能对链中单独的视图控件设置 Weiget,使用和 LinearLayout 的 Weiget 一致。
视图大小控制
- wrap_content
- 指定宽度
- Match Constraints:尽可能扩展以满足各方的约束(在考虑视图边界之后)
- layout_constraintDimensionRatio:设置控件宽高比,"h, 3:1"表示高度就只有宽度的三分之一,至少需要有一个尺寸约束设置未Match Constraints(0dp)
一些实战的技巧
让两个不同尺寸的View,中心对齐居中
使View于某一个View的一条边中心对齐