ConstraintLayout实践分析

ConstraintLayout自studio2.3开始google就已经开始推广了，虽然也了接一些但一直也没仔细分析过用法，最近在做性能优化相关的东西，遇到一些ui嵌套层级，顺便用ConstraintLayout重新实现了一下。

下面会简单介绍一些ConstraintLayout的基本属性和重新实践的布局以及ConstraintLayout一些坑和注意事项

参考文章 https://www.jianshu.com/p/a74557359882

ConstraintLayout属性

1.基础属性，只用其中的几个举例

• layout_constraintLeft_toLeftOf = "@id/B" 当前的控件的左侧位于控件b的左侧
• layout_constraintLeft_toRightOf = "@id/B" 当前的控件的左侧位于控件b的右侧

2.圆形定位

这个属性可以实现一些特殊的布局，比如钟表～

2258857-f656aa5f06160889.png

3.百分比

ConstraintLayout可以设置控件的百分比，但前提是你要设置约束，也就是你如果使用constraintHorizontal，你就要说明你的left，right是相对于哪些控件而言
app:layout_constraintHorizontal_weight="1"
app:layout_constraintVertical_weight="1"

那么现在给你一个最常见的需求布局你会怎么实现？比如下面这个

屏幕快照 2018-11-24 下午3.03.55.png

以前可能会是一个linearLayout配合四个releativelayout，因为需要weight权重来实现四个tab的比例，但现在一层嵌套都不需要有, 注意下边只保留了一些关键代码

    

    

   

    

        。。。

4.权重position

这个属性你可以直接指定你的控件位于布局大概百分之多少的位置，但是前提也要设置相应的约束
app:layout_constraintHorizontal_bias="0.1"
app:layout_constraintVertical_bias="0.9"

5.chains

2258857-5803cbea741358a4.png

个人觉得官方文档上的解释有点难理解，我的理解是几个控件可以组成的一个链，这个链会根据布局或本身产生整体变化

比如实现这个页面

屏幕快照 2018-11-24 下午3.18.01.png

虽然用linearlayout也可以较好的实现，不过既然google建议，那么我们还是使用ConstraintLayout，而为什么要在ConstraintLayout使用chains呢？
为了整体居中，注意下面也只是关键代码，去掉了一些部分

6.goneMargin（隐藏边距)

当约束目标的可见性为View.GONE时，还可以通过以下属性设置不同的边距值

7. 填充父窗体

• layout_constraintWidth_min and layout_constraintHeight_min //设置最小尺寸
• layout_constraintWidth_max and layout_constraintHeight_max //设置最大尺寸
• layout_constraintWidth_percent and layout_constraintHeight_percent //设置相对于父类的百分比

比如开发中有这样一个需求，位于父控件的中间且宽度为父控件的一半，那么我们可以这么去实现

2258857-cb75df6c9177df5d.png

8. 约束之百分比布局

app:layout_constraintDimensionRatio="H,16:9"
app:layout_constraintDimensionRatio="W16:9"
比如我们的头部viewpager要实现宽和高的比例为16:9，那么就可以使用这个属性

9 .坑一

ConstraintLayout如果不是根布局，不能设置parent要设置父类的id

理论上ConstraintLayout可以实现大部分布局，不需要层级嵌套