约束布局的使用
ConstraintLayout 相对于 RelativeLayout来说性能更好，布局上也更加灵活。在最新的Google Android开发文档中是推荐使用 ConstraintLayout的！
具体说一下使用方式，首先需要在 build.gradle中添加依赖
implementation 'androidx.constraintlayout:constraintlayout:1.1.3'
如果新建的项目的话，会发现 moudle 默认的布局就是它，无需在重复添加！
属性说明
//该控件的左边是在某一个控件的左边
layout_constraintLeft_toLeftOf
//该控件的左边是在某一个控件的右边
layout_constraintLeft_toRightOf
//该控件的右边是在某一个控件的左边
layout_constraintRight_toLeftOf
//该控件的右边是在某一个控件的右边
layout_constraintRight_toRightOf
//该控件的顶部是在某一个控件的顶部
layout_constraintTop_toTopOf
//该控件的顶部是在某一个控件的底部
layout_constraintTop_toBottomOf
//该控件的底部是在某一个控件的顶部
layout_constraintBottom_toTopOf
//该控件的底部是在某一个控件的底部
layout_constraintBottom_toBottomOf
//基准线
layout_constraintBaseline_toBaselineOf
layout_constraintStart_toEndOf
layout_constraintStart_toStartOf
layout_constraintEnd_toStartOf
layout_constraintEnd_toEndOf
这些属性介绍完了，怎么用呢？
先看需求，没有需求的讲解都是扯淡。
需求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"
tools:context=".LoginActivity">
<Button
android:id="@+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
最后实现的效果就是这样的
[图片上传失败...(image-c7a4c3-1573130016289)]
还是很简单的！
以上列举的这些属性都是比较通用的，还有一些比较方便的属性
偏斜（Bias）
- app:layout_constraintHorizontal_bias="0.3"
这是什么意思呢？
如下图：
[图片上传失败...(image-553dcd-1573130016289)]
差不多就是这么个意思，表示向button控件的左边施加了偏斜，使得button控件左边距离父控件左边的距离与button控件右边距离父控件右边的距离比为30%：70%
但是要想这个属性生效，单独这一个属性是不够的如下代码：
<?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"
tools:context=".LoginActivity">
<Button
android:id="@+id/button"
android:layout_width="0dp"
app:layout_constraintWidth_percent="0.5"
android:layout_height="wrap_content"
android:text="Button"
app:layout_constraintHorizontal_bias="0.3"
app:layout_constraintLeft_toLeftOf="parent"//需要添加这两条属性
app:layout_constraintRight_toRightOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
同理，如使用app:layout_constraintVertical_bias="0.3"也需要添加app:layout_constraintTop_toTopOf="parent" app:layout_constraintBottom_toBottomOf="parent"
如此使用即可按照比例放置控件的位置！
[图片上传失败...(image-80d15e-1573130016289)]
百分比属性
这个就比较厉害了，可以说是终端适配的法宝，我们可以指定控件的相对parent 的宽高
如下：
<?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"
tools:context=".LoginActivity">
<Button
android:id="@+id/button"
android:layout_width="0dp"//首先指定宽度为0
app:layout_constraintWidth_percent="0.5"//指定宽占parent 的50%
android:layout_height="wrap_content"
android:text="Button"
app:layout_constraintHorizontal_bias="0.3"
app:layout_constraintVertical_bias="0.3"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
效果如下：
[图片上传失败...(image-ad3afe-1573130016289)]
我们旋转屏幕看下：
[图片上传失败...(image-f6b775-1573130016289)]
会发现控件的宽高确实根据屏幕自适应了
弧形定位(Circular positioning)
属性介绍：
layout_constraintCircle : 相对控件的id
layout_constraintCircleRadius : 相对控件中心的距离，也就是圆的半径
layout_constraintCircleAngle : 相对夹角 (从 0 ~ 360度)
image
代码如下：
<?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"
tools:context=".LoginActivity">
<ImageView
android:id="@+id/image_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@mipmap/ic_launcher"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:layout_editor_absoluteX="16dp"
tools:layout_editor_absoluteY="16dp" />
<ImageView
app:layout_constraintCircleRadius="100dp"
app:layout_constraintCircle="@id/image_view"
android:id="@+id/image_view2"
app:layout_constraintCircleAngle="45"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@mipmap/ic_launcher" />
</androidx.constraintlayout.widget.ConstraintLayout>
效果如下：
[图片上传失败...(image-d7e009-1573130016289)]
基准线 baseline
- layout_constraintBaseline_toBaselineOf
两个TextView的高度不一致，但是又希望他们文本对齐，这个时候就可以使用layout_constraintBaseline_toBaselineOf，代码如下：
<?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"
tools:context=".LoginActivity">
<TextView
android:id="@+id/textView"
android:layout_width="wrap_content"
android:layout_height="50dp"
android:text="hello world"
tools:layout_editor_absoluteX="41dp"
tools:layout_editor_absoluteY="74dp" />
<TextView
android:layout_marginLeft="20dp"
android:text="hello world2"
app:layout_constraintBaseline_toBaselineOf="@id/textView"
app:layout_constraintLeft_toRightOf="@id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</androidx.constraintlayout.widget.ConstraintLayout>
效果如下：
[图片上传失败...(image-94afab-1573130016289)]
[图片上传失败...(image-a430a9-1573130016289)]
end。。。
参考链接
