截屏2020-03-03上午12.02.29.png
起点：坐标点的约束：从iOS的坐标体系说起
iOS坐标体系中任何View都必须有一个frame才能显示，frame=(x,y,width,height),可以这么理解：(x，y)决定了view的坐标点，(width，height)决定了view的尺寸。
给红色View添加约束：
- 相对于父布局左边(leading)对齐，间距50 (x = 父布局leading+50)
- 相对于父布局上部(top)对齐，间距50 (y = 父布局top+50)
-
宽度width = 100， 高度 height = 100
截屏2020-03-03上午9.50.25.png
截屏2020-03-03上午9.50.39.png
ConstraintLayout正是完美复刻这一坐标体系和view显示方式
我们创建一个TextView,设置宽高为100dp,代码如下
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="@+id/mTvRed"
android:layout_width="100dp"
android:layout_height="100dp"
android:background="@color/colorAccent"
android:gravity="center"
android:text="中间"
android:textColor="#fff"
android:textSize="20dp" />
</androidx.constraintlayout.widget.ConstraintLayout>
截屏2020-03-03上午12.33.22.png
意思就是缺少水平约束和垂直约束，这就像frame，view只有宽高，没有xy就找不到view的坐标点。
于是，来给TextView设置x,y吧
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
这2句的意思是view的左边与父布局的左边对齐(x=0)，顶部与父布局的顶部对齐(y=0)，这样就可以确定TextView的坐标点(x=0,y=0)了，
截屏2020-03-03上午12.38.25.png
这时的代码就相当于frame:(x=0,y=0,width=100,height=100),如果让(x,y)=(100,100)呢？
android:layout_marginStart="100dp"
android:layout_marginTop="100dp"
截屏2020-03-03上午12.41.43.png
总结：
1.约束布局的坐标体系类似于iOS，其中view的显示也与iOS的frame类似，都需要确定坐标点(x,y)和尺寸(width,height)才能显示view
2.layout_constraintXXX_toXXXOf 语句可以确定view的坐标点：
layout_constraintRight_toLeftOf : 当前view的右边与目标view的左边对齐
layout_constraintRight_toRightOf : 当前view的右边与目标view的右边对齐
layout_constraintTop_toTopOf
layout_constraintTop_toBottomOf
layout_constraintBottom_toTopOf
layout_constraintBottom_toBottomOf
layout_constraintBaseline_toBaselineOf
练一练:在红色TextView的右(10dp)下(10dp)角创建一个宽高为100dp的绿色TextView（关键点：如何确定绿色Tv的坐标点）
iOS 实现：
截屏2020-03-03上午10.16.12.png
1.确定绿色View的宽高为100，
2.确定绿色View的坐标点为：top与红色View的bottom对齐间距50，leading(左边)与红色View的trailing(右边)对齐间距50
左下角.top = iOS中间.bottom + 50
左下角.leading = iOS中间.trailing + 50
截屏2020-03-03上午10.13.05.png
Android实现: 同样也是确定绿色View的坐标点
截屏2020-03-03上午12.59.44.png
<TextView
android:id="@+id/mTvGreen"
android:layout_width="100dp"
android:layout_height="100dp"
android:background="@color/colorPrimary"
android:gravity="center"
android:text="左下角"
android:textColor="#fff"
android:textSize="20dp"
app:layout_constraintStart_toEndOf="@+id/textView5" //mTvGreen的start与mTvRed的end对齐
app:layout_constraintTop_toBottomOf="@+id/textView5" //mTvGreen的top与mTvRed的bottom对齐
android:layout_marginStart="10dp"
android:layout_marginTop="10dp"/>
后四行代码确定了绿色View的坐标点：
- 绿色View的start(左边)与红色View的end(右边)对齐，间距为10dp，(绿色View的start = 红色View的end+10dp)，
- 绿色View的top与红色View的bottom对齐，间距为10dp，（绿色View的top = 红色View的bottom+10dp）
案例:设置View2相对于View1居中
iOS：
截屏2020-03-03下午12.35.23.png
Center Vertically 即刻解决
Android：
app:layout_constraintBaseline_toBaselineOf ？是不行滴。
这样写就ok
app:layout_constraintBottom_toBottomOf="@+id/textView5"
app:layout_constraintStart_toEndOf="@+id/textView5"
app:layout_constraintTop_toTopOf="@+id/textView5"
截屏2020-03-03下午12.37.26.png
2.尺寸的约束
Android
1.固定尺寸
2.wrap_content:根据内容伸缩
-
MATCH_CONSTRAINT 相当于match_parent，它的值为0dp
截屏2020-03-03上午10.59.47.png
<TextView
android:id="@+id/textView"
android:layout_width="0dp"
android:layout_height="50dp"
android:background="#ffa"
android:text="Macth_Parent（0dp）"
android:textAppearance="@style/TextAppearance.AppCompat.Large"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
<TextView
android:id="@+id/textView7"
android:layout_width="wrap_content"
android:layout_height="50dp"
android:background="#03A9F4"
android:text="Wrap_Content"
android:textAppearance="@style/TextAppearance.AppCompat.Large"
app:layout_constraintBottom_toTopOf="@+id/textView"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
<TextView
android:id="@+id/textView8"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:background="#FFEB3B"
android:text="固定长度"
android:textAppearance="@style/TextAppearance.AppCompat.Large"
app:layout_constraintBottom_toTopOf="@+id/textView7"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
iOS ：没有Warp_content，其他一样
3.比例：约束布局的最大特点就是不用把宽高写死，根据尺寸比例达到各种机型的屏幕适配。
其中iOS和Android的不同在于:
iOS可以相对于其他View进行比例设置，Android只能相对于父布局进行比例设置
Android：
1.1View的宽度与父布局宽度的比例
android:layout_width="0dp"
app:layout_constraintWidth_default="percent" //设置宽为百分比
app:layout_constraintWidth_percent="0.5"
1.2View的高度与父布局高度的比例
android: layout_height ="0dp"
app:layout_constraintHeight_default="percent" //设置高为百分比
app:layout_constraintHeight_percent="0.5"
注意:View没有与其他View进行宽高比例的设置方法，只有与父布局的
2.View自己的宽高比例
app:layout_constraintDimensionRatio="2:1"
iOS:脱线即刻
案例：View的宽高比例1:1,View与父布局高度比例1:5
步骤:
截屏2020-03-03上午11.51.09.png
01.gif
2.设置View与父布局高度比例
02.gif
截屏2020-03-03上午11.34.24.png
Android实现：
1.设置View的高度与父控件高度比例为1:5
android:layout_height="0dp"
app:layout_constraintHeight_percent="0.2"
2.设置View的宽高比例为1:1
android:layout_height="0dp"
app:layout_constraintDimensionRatio="1:1"
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="@+id/textView5"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintDimensionRatio="1:1"
app:layout_constraintHeight_percent="0.2"
android:background="@color/colorAccent"
android:gravity="center"
android:text="中间"
android:textColor="#fff"
android:textSize="20dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
3.Android特有
3.1辅助线Guideline：
3.2位置偏向 :把他理解成margin的比例版就ok，margin只能设置数值
layout_constraintHorizontal_bias //水平偏向
layout_constraintVertical_bias //竖直偏向
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:background="@color/colorAccent"
android:gravity="center"
android:textColor="#fff"
android:textSize="20dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="左边偏向30%"
app:layout_constraintHorizontal_bias="0.3"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
/>
</androidx.constraintlayout.widget.ConstraintLayout>
截屏2020-03-03下午12.31.05.png
3.2Group用于控制多个控件的可见性
参考：
Android新特性介绍，ConstraintLayout完全解析
实战篇ConstraintLayout的崛起之路
带你了解Android约束布局ConstraintLayout
ConstraintLayout 完全解析 快来优化你的布局吧
