Android修行手册 - ConstraintLayout全属性

👉关于作者

众所周知，人生是一个漫长的流程，不断克服困难，不断反思前进的过程。在这个过程中会产生很多对于人生的质疑和思考，于是我决定将自己的思考，经验和故事全部分享出来，以此寻找共鸣！！！

专注于Android/Unity和各种游戏开发技巧，以及各种资源分享（网站、工具、素材、源码、游戏等）

欢迎关注公众号【空名先生】获取更多资源和交流！

👉前提

这是小空坚持写的Android新手向系列，欢迎品尝。

新手（√√√）

大佬（√）

👉实践过程

Hello，大家好啊，今天带大家学习截止到现在最最最重要的ViewGroup：ConstraintLayout。

她是约束布局，就是控件与控件之间形成的约束条件来决定在界面上的显示位置，可一让我们扁平化的层次结构开发出复杂的布局。说的形象点就像拼图游戏一样，每个图块的边缘都是特定的都是已经和其他块约束好的，这样能很好很快的组成一幅完整的图。

总结概括是：其他布局能实现的，它能搞定。其他布局不能实现的，它也能搞定。

😜为什么用她？优缺点

优点

写过几次布局就知道了，要绘制一个页面，就需要先找到叶子（最内层View），然后逐级向上遍历，递归查找，所以越复杂的布局可能嵌套RelativeLayout或LinearLayout等控件层级就越多，这会影响性能，造成掉帧或卡顿。而ConstraintLayout就是用来解决这个问题的，我们要特别留意，当布局简单的时候ConstraintLayout耗时甚至比RelativeLayout或LinearLayout等耗时要高，在复杂布局嵌套层级多的时候ConstraintLayout才会显出明显优势，所以我们的根布局建议选择性使用。

（关于ConstraintLayout为什么可以复杂布局做优化可自行查阅资料）

缺点

• 属性变的多了起来，消耗大脑，哈哈
• 因为约束需要目标，所以控件的id变多了
• 因为是参照物约束，如果没选择好锚点，动一个控件可能造成布局全部变化
• 如果是简单布局，性能上不如以前的布局类型

😜属性

• app:layout_constraintRight_toRightOf和app:layout_constraintEnd_toEndOf：constraintRight或constraintEnd表示的是本控件的右边，而toRightOf或toEndOf表示目标控件的左边，这句话的意思就是本控件的右边位于目标控件的右边。要注意如果使用了Right，想要左边就得有Left，如果使用了Start，想要右边就得有End，Right和Start不能混用，Left和End不能混用。推荐使用Start和End。
• app:layout_constraintLeft_toLeftOf和app:layout_constraintStart_toStartOf：constraintLeft或constraintStart表示是本控件的左边，而toLeftOf或toStartOf表示目标控件的左边，这句话的意思就是本控件的左边位于目标控件的左边。混用规则同上最后一句。推荐使用Start和End。
• app:layout_constraintTop_toTopOf：表示本控件的顶部位于目标控件的顶部
• app:layout_constraintBottom_toBottomOf：表示本控件的底部位于目标控件的底部
• app:layout_constraintStart_toEndOf：表示该控件左侧位于目标控件的右侧
• app:layout_constraintEnd_toStartOf：表示该控件的右侧位于目标控件的左侧
• app:layout_constraintBottom_toTopOf：表示该控件的底部位于目标控件的顶部
• app:layout_constraintTop_toBottomOf：表示该控件的顶部位于目标控件的底部
• app:layout_constraintCircle：该控件相对目标控件实现角度定位，layout_constraintCircle和layout_constraintCircleAngle和layout_constraintCircleRadius同时使用。
• app:layout_constraintCircleAngle：角度定位的度数是多少取值0-360度，layout_constraintCircle和layout_constraintCircleAngle和layout_constraintCircleRadius同时使用。
• app:layout_constraintCircleRadius：该目标相对目标控件相差多少距离，layout_constraintCircle和layout_constraintCircleAngle和layout_constraintCircleRadius同时使用。
• padding：内边距属性照常生效，无特殊处理
• margin：所有外边距属性有了应用条件，margin的位置受到了约束条件，需要和layout_constraint的值一样，比如B在A的右边，B拥有layout_constraintStart_toEndOf属性，B设置marginStart有效果，A如果设置marginEnd是无效果的。而在RelativeLayout中是都可以的。
• app:layout_goneMarginStart和app:layout_goneMarginTop和app:layout_goneMarginEnd和app:layout_goneMarginBottom：挺有意思的属性，表示的是当目标约束控件Gone隐藏的时候外边距，goneMargin使用条件个margin一致。比如左上角有个A，B在A的下方且间隔20dp，使用RelativeLayout的话，我们通常是A加上marginBottom20dp，当A进行GONE隐藏的时候B自然就上移顶部了，而ConstraintLayout中不会，因为约束条件的存在，B有layout_constraintTop_toBottomOf属性且有marginTop的20dp，当A进行Gone的时候，B还是有top的20dp外边距，这时候就需要用到该属性layout_goneMarginTop,我们设置为0，表示目标约束对象隐藏了该控件外部顶边距为0dp。
• app:layout_constraintWidth_max和app:layout_constraintHeight_max：表示的是最大宽度或最大高度，如果使用固定值则对应的layout_width或layout_height使用wrap_content，和android:maxWidth属性类似。可如果和app:layout_constraintWidth_percent或app:layout_constraintHeight_percent结合使用就需要注意了，请看下方。
• app:layout_constraintWidth_percent或app:layout_constraintHeight_percent：表示占用父View的宽度或高度的百分比，0-1取值，1代表铺满。可单独使用也可和app:layout_constraintWidth_max或app:layout_constraintHeight_max结合使用，则需要max里面值为wrap，对应的layout_width或layout_height使用0dp，表示最大宽度或高度占用多少父View的多少，宽度或高度变化增加到最大宽度后不再增加。
• app:layout_constrainedWidth：表示当前宽度受目标约束控件的宽影响，比如A宽度是100dp，B使用layout_constraintStart_toStartOf和layout_constraintEnd_toEndOf和A对齐，如果B的宽度是wrap_content，则B的宽度随内容变化，但是不会超过A的100dp宽度，也就是从另一个层次限制了最大宽度，如果B是0dp，则直接是一直保持和A的同等宽度。
• app:layout_constrainedHeight：表示当前控件高度受目标约束控件的高影响，比如A高度是100dp，B使用layout_constraintTop_toTopOf和layout_constraintBottom_toBottomOf和A对齐，如果B的高度是wrap_content，则B的高度随内容变化，但是不会超过A的100dp高度，也就是从另一个层次限制了最大高度，如果B是0dp，则直接是一直保持和A的同等高度。
• app:layout_constraintDimensionRatio：表示宽高比，比如layout_width是0dp，layout_height是100dp，如果该属性是1:1,则layout_width实际值为100dp；如果layout_height是100dp，该属性是3:2，则layout_width是150dp。使用该属性不建议宽高为wrap_content，效果不对劲。
• app:layout_constraintHorizontal_chainStyle：如果多个控件是横向约束，比如C在B的左边，B在A的左边，可以使用该属性且只能用在链头上，也就是A，有三个值，spread为默认，spread_inside为摊开，packed为拥挤紧挨。
• app:layout_constraintVertical_chainStyle：如果多个控件是纵向约束，比如C在B的底部，B在A的底部，可以使用该属性且只能用在链头上，也就是A，有三个值，spread为默认，spread_inside为摊开，packed为拥挤紧挨。
• app:layout_constraintVertical_weight：表示垂直比重，和LinearLayout一样，但是前提是这几个控件相互约束，比如需要有一下约束：A和父顶部，A底部和B顶部，B顶部和A底部，B底部和C顶部，C顶部和B底部，C底部和父底部，才会有效果。
• app:layout_constraintHorizontal_weight：表示水平比重，和LinearLayout一样，但是前提是这几个控件相互约束，比如需要有一下约束：A和父左部，A右部和B左部，B左部和A右部，B右部和C左部，C左部和B右部，C右部和父右部，才会有效果。
• app:layout_constraintHorizontal_bias：表示水平方向便宜，如需使用该属性需同时指定对应轴向的两条边才会生效，例如使用app:layout_constraintHorizontal_bias="0.5"属性时需要同时指定当前控件的start边和end约束才能生效。该值默认为0.5居中位置，取值范围在0~1之间。
• app:layout_constraintVertical_bias：表示垂直方向偏移，如需使用该属性需同时指定对应轴向的两条边才会生效，例如使用app:layout_constraintVertical_bias="0.5"属性时需要同时指定当前控件的top边和bottom约束才能生效。该值默认为0.5居中位置，取值范围在0~1之间。
  注意属性中Left和Right的有可能失效，虽然可以用代码重新建立约束规则，但没必要，推荐使用Start和End，官方也推荐使用。

👉其他

📢作者：小空和小芝中的小空

📢转载说明-务必注明来源：芝麻粒儿 的个人主页 - 专栏 - 掘金 (juejin.cn)

📢这位道友请留步☁️，我观你气度不凡，谈吐间隐隐有王者霸气💚，日后定有一番大作为📝！！！旁边有点赞👍收藏🌟今日传你，点了吧，未来你成功☀️，我分文不取，若不成功⚡️，也好回来找我。