约束布局的使用

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。。。

参考链接

约束布局ConstraintLayout看这一篇就够了

一文看懂ConstraintLayout的用法