ConstraintLayout 使用入门（一）

最近几个月终于有大把时间总结这两年来所学，荣幸之至
2019.5.19

前言

• 在ConstraintLayout之前，布局通常使用LinearLayout和RelativeLayout比较多，用熟悉了也感觉还比较不错。但是如果你的UI太复杂，使用相对布局会有大量的嵌套，会造成大量的性能浪费和维护成本。
• ConstraintLayout 的使用逻辑非常简单，可以完全替代RelativeLayout布局，不包含层层嵌套，写布局文件时可能也没那么痛苦。痛苦？！

对应内容的练手项目

目录

本文包含1.1-1.5的内容
2.1-2.6在：ConstraintLayout 使用入门（二）

---

• 1 基本操作
• 1.1 相对位置布局
• 1.2 整体位置布局
• 1.3 约束比例
• 1.4 文字基准线对齐
• 1.5 圆心布局（原文叫 Circular positioning)
• 2 进阶操作
• 2.1 View的内容约束 constrainedWidth
• 2.2 约束偏移量 Bias
• 2.3 约束链 Chain Style
• 2.4 宽高比
• 2.5 百分比布局
• 2.6 参考线
• 3.Helper类
• 3.1 Group
• 3.2 Layer

1.基本操作

详细介绍View基本的放置，包括放置的上下左右(top,bottom,start,end,left,right)，间距(margin)这两个约束类型

1.1 相对位置布局

1. 先来一个最简单的实现。
   实现居中于整个root View的布局，核心使用下面四行即可

app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"

效果是这个样子（那个蓝色弹簧一样的四根线是studio给的效果渲染）

挑其中一行来理解一下意义，其他的类比。
比如：app:layout_constraintStart_toStartOf="parent"
需要关注的重点参数有三个，如下图，画了红圈

第一个Start表示自己的start；
第二个Start 表示约束对象(也就是parent)的start；
parent表示约束对象id。