Android-第二节ConstraintLayout（约束布局）

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

1.为什么要使用ConstraintLayout（约束布局）？

1.ConstraintLayout还有一个优点，它可以有效地解决布局嵌套过多的问题。
2.实现的布局效果类似于相对布局但比相对布局性能更高。

性能比较结果表明：ConstraintLayout 在测量/布局阶段的性能比 RelativeLayout大约高 40%：

这些结果表明：
ConstraintLayout 很可能比传统布局的性能更出色。不仅如此，ConstraintLayout 还具备其他一些功能，能够帮助您构建复杂的高性能布局。

2.ConstraintLayout（约束布局）简介

约束布局ConstraintLayout 是一个ViewGroup，可以在Api9以上的Android系统使用它，它的出现主要是为了解决布局嵌套过多的问题，以灵活的方式定位和调整小部件。从 Android Studio 2.3 起，官方的模板默认使用 ConstraintLayout。

3.ConstraintLayout（约束布局）优点

在开发过程中经常能遇到一些复杂的UI，可能会出现布局嵌套过多的问题，嵌套得越多，设备绘制视图所需的时间和计算功耗也就越多，ConstraintLayout使用起来比RelativeLayout更灵活，可以按照比例约束控件位置和尺寸。

4.ConstraintLayout（约束布局）的基本属性

layout_constraintTop_toTopOf       // 将所需视图的顶部与另一个视图的顶部对齐。 

layout_constraintTop_toBottomOf    // 将所需视图的顶部与另一个视图的底部对齐。 

layout_constraintBottom_toTopOf    // 将所需视图的底部与另一个视图的顶部对齐。 

layout_constraintBottom_toBottomOf // 将所需视图的底部与另一个视图的底部对齐。 

layout_constraintLeft_toTopOf      // 将所需视图的左侧与另一个视图的顶部对齐。 

layout_constraintLeft_toBottomOf   // 将所需视图的左侧与另一个视图的底部对齐。 

layout_constraintLeft_toLeftOf     // 将所需视图的左边与另一个视图的左边对齐。 

layout_constraintLeft_toRightOf    // 将所需视图的左边与另一个视图的右边对齐。 

layout_constraintRight_toTopOf     // 将所需视图的右对齐到另一个视图的顶部。

layout_constraintRight_toBottomOf  // 将所需视图的右对齐到另一个视图的底部。

layout_constraintRight_toLeftOf    // 将所需视图的右边与另一个视图的左边对齐。

layout_constraintRight_toRightOf   // 将所需视图的右边与另一个视图的右边对齐。

4.1控件内宽高比

在ConstraintLayout中，还可以将宽定义成高的一个比例或者高定义成宽的比率。首先，需要将宽或者高设置为0dp（即MATCH_CONSTRAINT），即要适应约束条件。然后通过layout_constraintDimensionRatio属性设置一个比率即可。这个比率可以是一个浮点数，表示宽度和高度之间的比率；也可以是“宽度：高度”形式的比率。比如：

<?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=".MainActivity">


    <Button
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        android:text="-------------------宽高比1:1-------------------"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintDimensionRatio="1:1"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />


</androidx.constraintlayout.widget.ConstraintLayout>

4.1.1app:layout_constraintDimensionRatio=“h,?:?”

设置该属性时，确保android:layout_height=“0dp”
即表示高度随着宽度在变化，例如：
app:layout_constraintDimensionRatio=“h,2:1” //高度是宽度的1/2

<Button
        android:layout_width="200dp"
        android:layout_height="0dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintDimensionRatio="h,2:1"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

4.1.2app:layout_constraintDimensionRatio=“w,?:?”

设置该属性时，确保android:layout_width=“0dp”
即表示宽度随着高度在变化，例如：
app:layout_constraintDimensionRatio=“w,1:2” //宽度是高度的1/2

<Button
        android:layout_width="0dp"
        android:layout_height="200dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintDimensionRatio="w,1:2"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

4.2权重

LinearLayout中可以设置权重，ConstraintLayout同样也有这玩意。
通过设置以下两个属性：

app:layout_constraintHorizontal_weight //水平权重
app:layout_constraintVertical_weight //竖直权重

例如：

<?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=".MainActivity">


    <Button
        android:id="@+id/btn_1"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="权重为1"
        app:layout_constraintHorizontal_weight="1"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toLeftOf="@id/btn_2"
        app:layout_constraintTop_toTopOf="parent" />

    <Button
        android:id="@+id/btn_2"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="权重为1"
        app:layout_constraintHorizontal_weight="1"
        app:layout_constraintLeft_toRightOf="@id/btn_1"
        app:layout_constraintRight_toLeftOf="@id/btn_3"
        app:layout_constraintTop_toTopOf="parent" />

    <Button
        android:id="@+id/btn_3"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="权重为2"
        app:layout_constraintHorizontal_weight="2"
        app:layout_constraintLeft_toRightOf="@id/btn_2"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />



</androidx.constraintlayout.widget.ConstraintLayout>

4.3链

官网上一共有5种样式的链：

有三种可选参数：

• spread：将可用空间以均匀分布的方式将视图放置在链中（默认模式）：
  
• spread_inside：将链中最外面的视图对齐到外边缘，然后在可用空间内均匀的放置链中视图：
  
• packed：将链中的视图紧紧的放在一起（可以提供边距让其分开），然后让其居中在可用空间内：
  

4.4.GuideLines辅助线的应用

Guideline是只能用在ConstraintLayout布局里面的一个工具类，用于辅助布局，类似为辅助线，可以设置android:orientation属性来确定是横向的还是纵向的。

• 设置为vertical的时候，Guideline的宽度为0，高度是parent也就是ConstraintLayout的高度
• 设置为horizontal的时候，Guideline的高度为0，宽度是parent的宽度

Guideline的属性：

• layout_constraintGuide_begin，指定左侧（方向为vertical）或顶部（方向为horizontal）的固定距离，如10dp，在距离左侧或者顶部10dp的位置会出现一条辅助线
• layout_constraintGuide_end，指定右侧（方向为vertical）或底部（方向为horizontal）的固定距离，如50dp，在距离右侧或底部50dp的位置会出现一条辅助线
• layout_constraintGuide_percent，指定在父控件中的宽度或高度的百分比，如0.5，表示距离顶部或者左侧的50%的距离。

举例：

<?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=".MainActivity">


    <Button
        android:id="@+id/button4"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="权重为1"
        app:layout_constraintHorizontal_weight="1"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toLeftOf="@id/button5"
        app:layout_constraintTop_toTopOf="parent" />

    <Button
        android:id="@+id/button5"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginTop="340dp"
        android:text="权重为2"
        app:layout_constraintHorizontal_weight="2"
        app:layout_constraintLeft_toRightOf="@id/button4"
        app:layout_constraintRight_toLeftOf="@id/button6"
        app:layout_constraintTop_toTopOf="parent" />

    <Button
        android:id="@+id/button6"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="权重为1"
        app:layout_constraintHorizontal_weight="1"
        app:layout_constraintLeft_toRightOf="@id/button5"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/guideline"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_percent="0.5" />

    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/guideline2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintGuide_percent="0.5" />
</androidx.constraintlayout.widget.ConstraintLayout>

4.5自动添加约束

无约束：

点击箭头所指：

4.6Group组

visibility可选值：

• invisible：不可见（但是位置还占着）
• visible：可见
• gone：不可见（无占位）

6.示例（微信界面）

<?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=".MainActivity">


    <ImageView
        android:id="@+id/imageView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="28dp"
        android:layout_marginTop="32dp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:srcCompat="@drawable/touxiang" />

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="20dp"
        android:layout_marginTop="40dp"
        android:text="老实人兰奥"
        android:textColor="@color/black"
        app:layout_constraintStart_toEndOf="@+id/imageView"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:text="微信号：lanaolaoshiren"
        app:layout_constraintStart_toStartOf="@+id/textView"
        app:layout_constraintTop_toBottomOf="@+id/textView" />

    <ImageView
        android:id="@+id/imageView3"
        android:layout_width="48dp"
        android:layout_height="44dp"
        android:layout_marginStart="28dp"
        android:layout_marginTop="40dp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/imageView"
        app:srcCompat="@drawable/zhifu" />

    <TextView
        android:id="@+id/textView5"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="10dp"
        android:layout_marginTop="10dp"
        android:text="支付"
        android:textColor="@color/black"
        android:textSize="20dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.034"
        app:layout_constraintStart_toEndOf="@+id/imageView3"
        app:layout_constraintTop_toTopOf="@+id/imageView3" />

    <ImageView
        android:id="@+id/imageView4"
        android:layout_width="48dp"
        android:layout_height="44dp"
        android:layout_marginTop="30dp"
        app:layout_constraintStart_toStartOf="@+id/imageView3"
        app:layout_constraintTop_toBottomOf="@+id/imageView3"
        app:srcCompat="@drawable/shoucang" />

    <TextView
        android:id="@+id/textView6"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:text="收藏"
        android:textColor="@color/black"
        android:textSize="20dp"
        app:layout_constraintStart_toStartOf="@+id/textView5"
        app:layout_constraintTop_toTopOf="@+id/imageView4" />

    <ImageView
        android:id="@+id/imageView5"
        android:layout_width="48dp"
        android:layout_height="44dp"
        android:layout_marginTop="30dp"
        app:layout_constraintStart_toStartOf="@+id/imageView4"
        app:layout_constraintTop_toBottomOf="@+id/imageView4"
        app:srcCompat="@drawable/pyq" />

    <TextView
        android:id="@+id/textView7"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:text="朋友圈"
        android:textColor="@color/black"
        android:textSize="20dp"
        app:layout_constraintStart_toStartOf="@+id/textView6"
        app:layout_constraintTop_toTopOf="@+id/imageView5" />

    <ImageView
        android:id="@+id/imageView6"
        android:layout_width="48dp"
        android:layout_height="44dp"
        android:layout_marginTop="30dp"
        app:layout_constraintStart_toStartOf="@+id/imageView5"
        app:layout_constraintTop_toBottomOf="@+id/imageView5"
        app:srcCompat="@drawable/kabao" />

    <TextView
        android:id="@+id/textView8"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:text="卡包"
        android:textColor="@color/black"
        android:textSize="20dp"
        app:layout_constraintStart_toStartOf="@+id/textView7"
        app:layout_constraintTop_toTopOf="@+id/imageView6" />

    <ImageView
        android:id="@+id/imageView7"
        android:layout_width="48dp"
        android:layout_height="44dp"
        android:layout_marginTop="30dp"
        app:layout_constraintStart_toStartOf="@+id/imageView6"
        app:layout_constraintTop_toBottomOf="@+id/imageView6"
        app:srcCompat="@drawable/biaoqing" />

    <TextView
        android:id="@+id/textView9"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:text="表情"
        android:textColor="@color/black"
        android:textSize="20dp"
        app:layout_constraintStart_toStartOf="@+id/textView8"
        app:layout_constraintTop_toTopOf="@+id/imageView7" />

    <ImageView
        android:id="@+id/imageView8"
        android:layout_width="48dp"
        android:layout_height="44dp"
        android:layout_marginTop="30dp"
        app:layout_constraintStart_toStartOf="@+id/imageView7"
        app:layout_constraintTop_toBottomOf="@+id/imageView7"
        app:srcCompat="@drawable/shezhi" />

    <TextView
        android:id="@+id/textView10"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:text="设置"
        android:textColor="@color/black"
        android:textSize="20dp"
        app:layout_constraintStart_toStartOf="@+id/textView9"
        app:layout_constraintTop_toTopOf="@+id/imageView8" />

    <ImageView
        android:id="@+id/imageView9"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:srcCompat="@drawable/dibulan" />

    <ImageView
        android:id="@+id/imageView10"
        android:layout_width="24dp"
        android:layout_height="24dp"
        android:layout_marginStart="220dp"
        android:layout_marginTop="10dp"
        app:layout_constraintStart_toEndOf="@+id/textView5"
        app:layout_constraintTop_toTopOf="@+id/imageView3"
        app:srcCompat="@drawable/sanjiao" />

    <ImageView
        android:id="@+id/imageView11"
        android:layout_width="24dp"
        android:layout_height="24dp"
        android:layout_marginStart="220dp"
        android:layout_marginTop="10dp"
        app:layout_constraintStart_toEndOf="@+id/textView6"
        app:layout_constraintTop_toTopOf="@+id/imageView4"
        app:srcCompat="@drawable/sanjiao" />

    <ImageView
        android:id="@+id/imageView12"
        android:layout_width="24dp"
        android:layout_height="24dp"
        android:layout_marginStart="200dp"
        android:layout_marginTop="10dp"
        app:layout_constraintStart_toEndOf="@+id/textView7"
        app:layout_constraintTop_toTopOf="@+id/imageView5"
        app:srcCompat="@drawable/sanjiao" />

    <ImageView
        android:id="@+id/imageView13"
        android:layout_width="24dp"
        android:layout_height="24dp"
        android:layout_marginStart="220dp"
        android:layout_marginTop="10dp"
        app:layout_constraintStart_toEndOf="@+id/textView8"
        app:layout_constraintTop_toTopOf="@+id/imageView6"
        app:srcCompat="@drawable/sanjiao" />

    <ImageView
        android:id="@+id/imageView14"
        android:layout_width="24dp"
        android:layout_height="24dp"
        android:layout_marginStart="220dp"
        android:layout_marginTop="10dp"
        app:layout_constraintStart_toEndOf="@+id/textView9"
        app:layout_constraintTop_toTopOf="@+id/imageView7"
        app:srcCompat="@drawable/sanjiao" />

    <ImageView
        android:id="@+id/imageView15"
        android:layout_width="24dp"
        android:layout_height="24dp"
        android:layout_marginStart="220dp"
        android:layout_marginTop="10dp"
        app:layout_constraintStart_toEndOf="@+id/textView10"
        app:layout_constraintTop_toTopOf="@+id/imageView8"
        app:srcCompat="@drawable/sanjiao" />

</androidx.constraintlayout.widget.ConstraintLayout>

7.小结

本节基本把ConstraintLayout的常用属性都介绍了一遍了。通过使用ConstraintLayout能够减少布局嵌套等，可以有效的提升性能。