--- ConstraintLayout 一篇就够了~ --- #### 目录 1. 基本使用 1. 相对位置 2. 设置边距 3. 水平/垂直偏移量 4. 按比例设置 5. 链 6. GuideLine 2. 代码设置约束以及动画 3. 优势 4. 注意事项 1. 可见性 2. margin 负值问题 3. 区分 0dp 、match_parent、warp_content 5. 参考 #### 前言 对于 ConstraintLayout,最开始看的郭大叔的 [Android新特性介绍,ConstraintLayout完全解析](https://blog.csdn.net/guolin_blog/article/details/53122387),但是由于自身原因更倾向于直接在 xml 里面写。之后又看了鸿洋的 [ConstraintLayout 完全解析 快来优化你的布局吧](https://blog.csdn.net/lmj623565791/article/details/78011599?utm_source=tuicool&utm_medium=referral),还不错,但是有些知识的遗漏。 如果你一点没接触过约束布局,以上两篇是不错的选择。 本文把 ConstraintLayout 的使用细分了一下,**对于控件的学习,一定要自己动手写!** 看完自己动手敲一遍,基本上就可以在项目中尝试用了~ 本文偏总结,想要看每个属性的预览图,可以参考:[ConstraintLayout在项目中实践与总结](https://www.jianshu.com/p/f110b4fcfe93) 我也是看了这篇文章受益匪浅,在这里诚谢作者的无私奉献~ 最后,直接 fork [https://github.com/googlesamples/android-ConstraintLayoutExamples](https://github.com/googlesamples/android-ConstraintLayoutExamples) #### 基本使用 ##### 相对位置 ```java layout_constraintLeft_toLeftOf layout_constraintLeft_toRightOf ... layout_constraintBaseline_toBaselineOf //文字的 baseline 对齐 ``` 这一部分的使用和 RelativeLayout 使用一致,设置控件的相对位置。 ##### 设置边距 边距分为普通边距和依赖控件被 Gone 掉后的边距属性: ```java //普通边距 android:layout_marginStart android:layout_marginLeft ... //依赖控件被 GONE 掉后的边距属性 android:layout_goneMarginStart android:layout_goneMarginLeft ``` ##### 水平/垂直偏移 ```java //值为 0~1 之间 layout_constraintHorizontal_bais //水平偏移 layout_constraintVertical_bais //垂直偏移 ``` ##### 按比例设置 ```java //设置控件宽高比,前提是至少有一个尺寸是 0dp //值可以是 float,比如 0.5,表示宽高比 //也可以是形如:5:3,表示宽高比 layout_constraintDimentionRatio ``` 如果宽高都设置了 0dp,那么控件会在满足比例的情况下尽可能填满父布局。 ##### 链 ```java //链提供了在一个维度上管理一组控件的方式,链的属性由链头控制 //它有三个值: spread、spread_inside、packed,默认值是 spread layout_constraintHorizontal_chainStyle layout_constraintVertical_chainStyle ``` 至于不同的样式会是什么效果,这里直接盗官网图说明: ![](https://i.loli.net/2019/02/16/5c68174a11cd1.png) ##### Guideline Guideline 可以理解为布局辅助线。 ```java ``` 它有垂直和水平两个方向,垂直宽度为 0,高度为父容器;水平高度为 0,宽度为父容器。 放置 Guideline 的三种方式: 1. layout_constraintGuide_begin 给定左边或顶部一个固定距离 2. layout_constraintGuide_end 给定距离右边或底部一个固定距离 3. layout_constraintGuide_percent 给定宽高一个百分比距离 #### 代码设置约束 用代码设置约束着实是一个坑! 通过 ConatraintSet,允许在代码中进行设置约束,进行布局变换。 这里,可以直接看前言给的官方示例了,效果如下: ![](https://i.loli.net/2019/02/17/5c690298ad70f.gif) 代码两三行就完了,就是两个布局,布局里面的 View id 一致,添加过渡效果只需要一行代码: ```java TransitionManager.beginDelayedTransition(mConstraintLayout); ``` 就不多说了,直接 fork Simples 吧。 #### 优势 约束布局减少了布局嵌套,在绘制渲染上提供了更好的性能。根据 Google 提供的数据表明,ConstraintLayout 在测量/布局阶段的性能比 RelativeLayout 大约高 40%。 同时,由于各种百分比的属性,适配性比传统布局好。 #### 注意事项 1. 可见性 约束布局中的可见性和其他布局相比不太一样,当控件设为 gone 时,被认为尺寸为 0,可以理解为布局上的一个点。若 gone 的控件对其它控件有约束,约束保留并生效,但是所有边距会清零。 2. margin 负值问题 在其他布局中,可以设置 margin 负值来达到布局重叠的效果,而在约束布局中设置 margin 负值不生效,那如何才能实现布局重叠的效果呢? 可以通过辅助线和 1dp View 来实现,内在思想都是一样的。 ```java