diff --git a/README.md b/README.md index f89d8d5..9e1bd8d 100644 --- a/README.md +++ b/README.md @@ -21,6 +21,7 @@ Android Notes 1. [WebView](https://github.com/Omooo/Android-Notes/blob/master/blogs/Android/WebView.md) 2. [RecyclerView](https://github.com/Omooo/Android-Notes/blob/master/blogs/Android/RecyclerView.md) 3. [ViewPager](https://github.com/Omooo/Android-Notes/blob/master/blogs/Android/ViewPager.md) +4. [ConstraintLayout](https://github.com/Omooo/Android-Notes/blob/master/blogs/Android/ConstraintLayout.md) ##### 其他 diff --git a/blogs/Android/ConstraintLayout.md b/blogs/Android/ConstraintLayout.md new file mode 100644 index 0000000..bd28519 --- /dev/null +++ b/blogs/Android/ConstraintLayout.md @@ -0,0 +1,234 @@ +--- +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 + +