使用 ConstraintLayout

已于 2023-06-15 21:59:07 修改
阅读量468 收藏
点赞数
分类专栏： 基本技能提升 文章标签： android
于 2023-06-06 23:45:04 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/heishuai123/article/details/131077373
版权

ConstraintLayout解析

1.前言

你是不是一直不敢用ConstraintLayout，是以为属性太多太复杂？你心理上的惰性，畏惧它。它其实很好用很强大，如果要用就需要一个入门的敲门砖

2.了解ConstraintLayout

特点：简化操作、解决布局嵌套、自适应布局、可百分比布局、可同时替代线性布局LinearLayout和相对布局RelativeLayout的强大功能

3.基本用法

ConstraintLayout的位置约束属性如下，属性值可以是parent或者@+id/兄弟组件的id：
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_constraintStart_toEndOf
layout_constraintStart_toStartOf
layout_constraintEnd_toStartOf
Layout_constraintEnd_toEndOf
怎么这么多12个属性，相对布局你都会，这个就不用害怕理解一下就明白了，相对布局不就是top，bottom，left，right四个属性吗，看单词只不过多了start和end（为了支持阿拉伯国家），这里你也可以当成left和right，效果一样。推荐使用start和end.下面就解析一下这些属性。

3.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">
    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="24sp"
        android:text="Button"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

在这里插入图片描述
先理解一下这个button控件，它使用了layout_constraintStart_toStartOf、layout_constraintBottom_toBottomOf和
layout_constraintTop_toTopOf
意思：parent表示父布局，而且使用约束布局必须在水平和垂直都添加约束，不然不完整。
button的左边和父布局的左边对齐，
button的下面边和父布局的下面边对齐，
button的上面的边和父布局的上面边对齐
从显示效果图可以看到第一个左对左效果有了，又由于要求控件上对上和下对下就会出现在中间的效果。

3.2再看一个布局

<?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">

    <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_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button1"
        app:layout_constraintStart_toEndOf="@+id/button"
        app:layout_constraintTop_toTopOf="@+id/button"
     />

</androidx.constraintlayout.widget.ConstraintLayout>

在这里插入图片描述
它使用了layout_constraintStart_toEndOf和
layout_constraintTop_toTopOf
意思："@+id/button表示兄弟布局
button1的左边和兄弟布局的右边对齐，
button1的上面边和兄弟布局的上面边对齐，
从显示效果图可以看到效果都有了，真的好强大，下面再讲布局的时候不用详细讲了，不用死记硬背，理解了这个就基本的会了。

3.3 想要button1在button的下面又在右边怎么做呢

很简单，只要知道button1最终的效果是button1的左边在button右边（layout_constraintStart_toEndOf）和button1的上面在button下面（layout_constraintTop_toBottomOf）就可以了。效果
在这里插入图片描述
如果改成button1在button的上面和右边呢，及垂直方向上button1的下面在button的上边（layout_constraintBottom_toTopOf）和水平方向上button1的左边在button的右边（layout_constraintStart_toEndOf），简单吧，你悟了吧

<?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">

    <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_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button1"
        app:layout_constraintStart_toEndOf="@+id/button"
        app:layout_constraintBottom_toTopOf="@+id/button"
     />

</androidx.constraintlayout.widget.ConstraintLayout>

3.3 下一个效果走起

在这里插入图片描述
这种效果怎么实现呢，就是水平方向上让button1的位置处在button剩余宽度的中心。分析一下：刚才让button1在button的右下已经分析过，及button1上对button下，button1左对button右，还记不记得最前面button垂直居中怎么做的就是button和父布局，上对上，下对下，它居中了。现在也一样，button1想居中的宽度的左边界已经有了，右边界就是父布局的最右边，及实现效果需要button1使用这三个合起来就行了。layout_constraintStart_toEndOf，layout_constraintTop_toBottomOf，layout_constraintEnd_toEndOf，完美。但是注意一个细节是推荐你用start和end，在一个控件中你如果用了left和right那一定是成套用，别这用一个那用一个用乱了，效果也没出来。比如就难咱这个布局来说你先用了layout_constraintStart_toEndOf和layout_constraintTop_toBottomOf，最后一个你突然用layout_constraintRight_toRightOf，效果就不会出来。

3.4 下一个效果

如果想让button1永远在button的中间位置怎么做呢，你可以利用上面的用到的约束左右边界达到居中的效果。这里居中的左右边界就是button的左右边界。

<?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">

    <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_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button1"
        app:layout_constraintStart_toStartOf="@+id/button"
        app:layout_constraintTop_toBottomOf="@+id/button"
        app:layout_constraintEnd_toEndOf="@id/button"
     />

</androidx.constraintlayout.widget.ConstraintLayout>

效果
在这里插入图片描述
如果button1相对于兄弟布局button约束布局写成下面这三个会是什么效果呢
app:layout_constraintStart_toEndOf=“@+id/button”
app:layout_constraintTop_toBottomOf=“@+id/button”
app:layout_constraintEnd_toEndOf=“@id/button”
没错，就是你想的那样button1永远会在button右边为中心点的位置，即
在这里插入图片描述

3.4 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">

    <TextView
        android:id="@+id/textview"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="56sp"
        android:text="textview"
        android:background="#097"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
    <TextView
        android:id="@+id/textview1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="36sp"
        android:text="textview1"
        android:background="#876"
        app:layout_constraintStart_toEndOf="@+id/textview"
        app:layout_constraintBottom_toBottomOf="@+id/textview"
        />

</androidx.constraintlayout.widget.ConstraintLayout>

下面是效果，可以看出，这两个textview并不是真的对齐而是底边对齐了
在这里插入图片描述
这个时候textview1加上 属性app:layout_constraintBaseline_toBaselineOf=“@+id/textview”
看下效果
在这里插入图片描述
学到这里相对布局RelativeLayout的功能都能用约束布局搞定了，加上baseline一共13个属性，强大了很多倍。

3.5 margin 和 goneMargin

ConstraintLayout 中子组件的使用和普通布局是一样的,唯一有区别的地方是，必须存在约束margin才会生效:
android:layout_margin
android:layout_marginStart
android:layout_marginLeft
android:layout_marginTop
android:layout_marginEnd
android:layout_marginRight
android:layout_marginBottom
注意一定要有约束，比如

<?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/textview"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="48sp"
        android:text="textview"
        android:background="#097"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        />
    <TextView
        android:id="@+id/textview1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="36sp"
        android:text="textview1"
        android:background="#876"
        app:layout_constraintStart_toEndOf="@+id/textview"
        app:layout_constraintTop_toTopOf="@+id/textview"
        android:layout_marginStart="16dp"
         />

</androidx.constraintlayout.widget.ConstraintLayout>

在这里插入图片描述
要实现这种效果如果你在textview控件上设置 android:layout_marginEnd="16dp"不会有任何效果，因为没有对textview的右边的约束，在textview1上加上android:layout_marginStart="16dp"就出现了上图的效果。

除了普通的margin外，还有goneMargin，当 当前组件对应边的约束组件隐藏时会生效，显示时不生效。例如下面

<?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/textview"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="48sp"
        android:text="textview"
        android:background="#097"
        android:visibility="gone"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        />
    <TextView
        android:id="@+id/textview1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="36sp"
        android:text="textview1"
        android:background="#876"
        app:layout_goneMarginStart="100dp"
        app:layout_constraintStart_toEndOf="@+id/textview"
        app:layout_constraintTop_toTopOf="@+id/textview"
         />

</androidx.constraintlayout.widget.ConstraintLayout>

在这里插入图片描述
当textview 显示的时候layout_goneMarginStart就会无效。

3.6 水平和垂直方向的百分比布局

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

    <Button
        android:id="@+id/textview"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="button"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintHorizontal_bias="0.3"
        app:layout_constraintVertical_bias="0.4"
        />

</androidx.constraintlayout.widget.ConstraintLayout>

效果
在这里插入图片描述
为了更好理解在加一个button1按钮

<?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">

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="button11111111111111111111111"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintHorizontal_bias="0.3"
        app:layout_constraintVertical_bias="0.4"
        />
    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="button1"
        app:layout_constraintStart_toEndOf="@+id/button"
        app:layout_constraintEnd_toStartOf="@+id/button"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintHorizontal_bias="0.8"
        />

</androidx.constraintlayout.widget.ConstraintLayout>

在这里插入图片描述

3.7 角度约束

ConstraintLayout可以让我们轻松的实现一个控件在另一个控件的某个角度的某个位置。
你需要用到下面这些属性
layout_constraintCircle 角度中心组件的id
layout_constraintCircleAngle 角度(0-360)
layout_constraintCircleRadius 到中心的距离

<?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/tv0"
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:text="0"
        android:textSize="32sp"
        android:textColor="@color/white"
        android:gravity="center"
        android:background="#097"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        />
    <TextView
        android:id="@+id/tv1"
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:textSize="32sp"
        android:textColor="@color/white"
        android:text="1"
        android:gravity="center"
        android:background="#097"
        app:layout_constraintCircle="@id/tv0"
        app:layout_constraintCircleAngle="0"
        app:layout_constraintCircleRadius="100dp"
        />
    <TextView
        android:id="@+id/tv2"
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:textSize="32sp"
        android:textColor="@color/white"
        android:text="2"
        android:gravity="center"
        android:background="#097"
        app:layout_constraintCircle="@id/tv0"
        app:layout_constraintCircleAngle="30"
        app:layout_constraintCircleRadius="100dp"
        />
    <TextView
        android:id="@+id/tv3"
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:textSize="32sp"
        android:textColor="@color/white"
        android:text="3"
        android:gravity="center"
        android:background="#097"
        app:layout_constraintCircle="@id/tv0"
        app:layout_constraintCircleAngle="60"
        app:layout_constraintCircleRadius="100dp"
        />
    <TextView
        android:id="@+id/tv4"
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:textSize="32sp"
        android:textColor="@color/white"
        android:text="4"
        android:gravity="center"
        android:background="#097"
        app:layout_constraintCircle="@id/tv0"
        app:layout_constraintCircleAngle="90"
        app:layout_constraintCircleRadius="100dp"
        />

</androidx.constraintlayout.widget.ConstraintLayout>

在这里插入图片描述

3.8 0dp(MATCH_CONSTRAINT)与组件大小

设置view的大小我们可以使用wrap_content、指定尺寸、match_parent，ConstraintLayout还可以设置为0dp（MATCH_CONSTRAINT），
odp并不会使组件大小变为0，而是会因为不同的属性产生不同的效果，属性为：。
layout_constraintWidth_default
Layout_constraintHeight_default
要想使这两个属性生效，我们需要设置组件的layout_width=“0dp”或者layout_height=“0dp”
属性的取值可以是：
spread（默认值，占据所有可以占据的空间）
percent（父布局的百分比，代表是当前组件的大小是父布局大小的一定比例，需要配合layout_constraintWidth_percent使用，取值是0-1的小数，当设置layout_constraintWidth_percent后，layout_constraintWidth_default="percent"会被默认，即使我们已经设置了spread或者wrap）
wrap（大小自适应）
例如布局

<?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">

    <Button
        android:id="@+id/button"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="Button"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"/>

</androidx.constraintlayout.widget.ConstraintLayout>

效果
在这里插入图片描述
如果设置 app:layout_constraintWidth_default=“percent”
app:layout_constraintWidth_percent=“0.7”，效果
在这里插入图片描述

如果设置app:layout_constraintWidth_default=“wrap”，效果
在这里插入图片描述
在这里插入图片描述

3.9 Chains(约束链)

在水平或者垂直方向的全部控件，相邻的组件两两之间首尾互相约束（任何一个组件都要有两边的约束，少了一个都不能形成链），这样就可以形成一条链。

我们可以使用layout_constraintHorizontal_chainStyle、layout_constraintVertical_chainStyle分别对水平和垂直链设置模式，
模式值有：
spread（默认、所有的组件均分剩余空间）
Packed（所有组件贴紧居中）
spread_inside（两侧的控件在两边，中间的组件均分剩余空间）

layout_constraintHorizontal_chainStyle和layout_constraintVertical_chainStyle只有对水平链或者竖直链上的第一个组件设置有效。
收尾相互约束的效果如下所示

<?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">

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toStartOf="@id/button1"
        app:layout_constraintTop_toTopOf="parent" />
    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button1"
        app:layout_constraintStart_toEndOf="@+id/button"
        app:layout_constraintEnd_toStartOf="@+id/button2"
        app:layout_constraintTop_toTopOf="parent" />
    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button2"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@+id/button1"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

在这里插入图片描述
在button按钮设置 app:layout_constraintHorizontal_chainStyle="spread"就是图片效果，默认就是spread。
如果我们设置app:layout_constraintHorizontal_chainStyle=“packed”，效果如下：
在这里插入图片描述

如果我们设置app:layout_constraintHorizontal_chainStyle=“spread_inside”，效果如下：
在这里插入图片描述
当一条链中的组件使用layout_constraintWidth_default=“spread”，我们可以使用layout_constraintHorizontal_weight 和layout_constraintHorizontal_weight来设置组件在链中的权重，也就是占比。
要注意的是，如果设置的这两个属性，链的组件将会占满整条链的空间，weight和percent 是不同的。示例如下：

<?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">

    <Button
        android:id="@+id/button"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="Button"
        app:layout_constraintHorizontal_weight="1"
        app:layout_constraintHorizontal_chainStyle="spread_inside"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toStartOf="@id/button1"
        app:layout_constraintTop_toTopOf="parent" />
    <Button
        android:id="@+id/button1"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="Button1"
        app:layout_constraintHorizontal_weight="2"
        app:layout_constraintStart_toEndOf="@+id/button"
        app:layout_constraintEnd_toStartOf="@+id/button2"
        app:layout_constraintTop_toTopOf="parent" />
    <Button
        android:id="@+id/button2"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        app:layout_constraintHorizontal_weight="3"
        android:text="Button2"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@+id/button1"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

在这里插入图片描述

3.10 0dp与宽高比例

这个属性很有用，以后不用自定义布局，也不用代码中实现图片变形计算啥的了

 <androidx.constraintlayout.widget.Guideline
          android:id="@+id/guideline"
          android:layout_width="wrap_content"
          android:layout_height="0dp"
          app:layout_constraintGuide_percent="0.4"
          android:orientation="vertical"/>

这个控件可能很多不熟悉的就是辅助线，看效果
在这里插入图片描述
给textview添加一个 app:layout_constraintEnd_toEndOf=“@id/guideline”，看效果
在这里插入图片描述
ConstraintLayout中可以很简单的对宽高设置比例，使用的属性为layout_constraintDimensionRatio

1.要使用layout_constraintDimensionRatio属性要求layout_width、layout_height至少有一个设置为0dp。
2. 建议layout_width、layout_height至少有一个设置为0dp ，另外一个属性是具有明确的大小，包括match_parent、具体的尺寸值、0dp。这是因为我们有了宽高之间的比例，我们需要一个明确的宽度值或者高度值，去计算另一个值，如果我们设置成为wrap_content，会出现很多异常的情况，这是我们不愿看到的。
3. layout_constraintDimensionRatio属性的类型是一个字符串，属性值是
radio比例，就是m;n形式的字符串，是宽高比或者高宽比的意思。
除了直接写radio比例以外,我们还可以写成 ，前缀wh对我们计算会产生影响。
w,radio比例。
h,radio比例。

<?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/textview"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintDimensionRatio="h,16:9"
        android:text="A"
        android:gravity="center"
        android:textSize="48sp"
        android:background="#097"
        app:layout_constraintEnd_toEndOf="@id/guideline"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"/>
      <androidx.constraintlayout.widget.Guideline
          android:id="@+id/guideline"
          android:layout_width="wrap_content"
          android:layout_height="0dp"
          app:layout_constraintGuide_percent="0.8"
          android:orientation="vertical"/>

    </androidx.constraintlayout.widget.ConstraintLayout>

在这里插入图片描述

3.11 Barrier（屏障）

和Guideline一样，也不会实际出现在布局中，作用是分隔布局。
想象一个场景：竖着两个文本框12，文本框12的长度未知，与两个文本框水平并行一个文本框3，文本框3要在文本框12的右边，此时正常的位置约束就有些尴尬。

它有两个属性：
app:constraint_referenced_ids=“id,id”
一组控件的id，id之间用逗号分隔，Barrier将会使用id中最大的一个的宽/高作为自己的位置
app:barrierDirection=“top|bottom|left|right|start|end”
用于控制Barrier相对于给定id的组件的位置
示例代码如下：

<?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/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textColor="@color/white"
        android:textSize="18sp"
        android:text="数据1数据"
        android:background="@color/purple_200"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textColor="@color/white"
        android:textSize="18sp"
        android:background="@color/purple_500"
        android:text="数据2数据2数据2"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/textView1" />

    <androidx.constraintlayout.widget.Barrier
        android:id="@+id/barrier"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:barrierDirection="end"
        app:constraint_referenced_ids="textView2,textView1" />

    <TextView
        android:id="@+id/textView3"
        android:layout_width="0dp"
        android:background="@color/purple_700"
        android:layout_height="wrap_content"
        android:text="数据3数据3数据3数据3数据3数据3数据3数据3数据3数据3数据3"
        app:layout_constraintLeft_toRightOf="@+id/barrier"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

在这里插入图片描述

3.12 Placeholder（占位符）

Placeholder可以在布局中事先占据一个位置，在代码中使用Placeholder.setContentId(布局id)，就可以让某个控件移动到此占位符中。
示例代码如下，效果可自行尝试：

<TextView
    android:id="@+id/tvUserName"
    android:layout_width="100dp"
    android:layout_height="100dp"
    android:background="@color/purple_200"
    android:text="用户姓名"
    android:textColor="@color/white"
    android:textSize="18sp"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

<androidx.constraintlayout.widget.Placeholder
    android:layout_width="100dp"
    android:id="@+id/placeholder"
    android:layout_height="100dp"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

3.13 Flow流式布局

流式布局使我们经常用到的布局，广泛的用在列表（尤其是图片列表）、标签、分类展示等场景中，传统的流式布局 我们可以使用 RecyclerView重写LayoutManager实现、也可以使用Google比较经典的流式布局FlexboxLayout
实现，功能都很强大。
ConstraintLayout也提供了流式布局的实现。
Flow组件，他同样有一个constraint_referenced_ids属性，属性值也是组件的id，id之间用逗号分割，表示纳入流式布局的管理。
控制流式布局的样式：
flow_wrapMode设置排列方式
none（默认值）：所有的组件并排，超出屏幕两侧的组件不可见
示例代码如下：

<TextView
    android:id="@+id/tvA"
    android:layout_width="100dp"
    android:layout_height="100dp"
    android:background="@color/purple_200"
    android:text="用户姓名"
    android:textColor="@color/white"
    android:textSize="18sp" />


<TextView
    android:id="@+id/tvB"
    android:layout_width="100dp"
    android:layout_height="100dp"
    android:background="@color/purple_500"
    android:text="男"
    android:textColor="@color/white"
    android:textSize="18sp" />

<TextView
    android:id="@+id/tvC"
    android:layout_width="100dp"
    android:layout_height="100dp"
    android:background="@color/purple_200"
    android:text="用户姓名"
    android:textColor="@color/white"
    android:textSize="18sp" />


<TextView
    android:id="@+id/tvD"
    android:layout_width="100dp"
    android:layout_height="100dp"
    android:background="@color/purple_500"
    android:text="男"
    android:textColor="@color/white"
    android:textSize="18sp" />
<TextView
    android:id="@+id/tvE"
    android:layout_width="100dp"
    android:layout_height="100dp"
    android:background="@color/purple_200"
    android:text="用户姓名"
    android:textColor="@color/white"
    android:textSize="18sp" />


<TextView
    android:id="@+id/tvF"
    android:layout_width="100dp"
    android:layout_height="100dp"
    android:background="@color/purple_500"
    android:text="男"
    android:textColor="@color/white"
    android:textSize="18sp" />
<androidx.constraintlayout.helper.widget.Flow
    android:id="@+id/group"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:constraint_referenced_ids="tvA,tvB,tvC,tvD,tvE,tvF"

    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintTop_toTopOf="parent">

</androidx.constraintlayout.helper.widget.Flow>

效果
在这里插入图片描述
chian：超出范围的组件会自动换行，不满一行的组件会平分宽度。
在这里插入图片描述
aligned：超出范围的组件会自动换行， 换行后从头排列。
其他的属性flow_horizontalGap 水平间隔flow_verticalGap 竖直间隔
上面的示例使用aligned并且增加app:flow_horizontalGap="2dp"app:flow_verticalGap=“5dp” 后效果：
在这里插入图片描述
当flow_wrapMode=“chain” 的时候，我们可以设置样式，样式和我们前面讲到的链是一样的。
app:flow_horizontalStyle=“packed｜spread｜spread_inside” 所有水平链的配置
app:flow_verticalStyle=“packed｜spread｜spread_inside” 所有垂直链的配置

app:flow_firstHorizontalStyle=“packed｜spread｜spread_inside” 第一条水平链的配置，其他条不生效
app:flow_firstVerticalStyle=“packed｜spread｜spread_inside” 第一条垂直链的配置，其他条不生效
app:flow_lastHorizontalStyle=“packed｜spread｜spread_inside” 最后一条水平链的配置，其他条不生效
app:flow_lastVerticalStyle=“packed｜spread｜spread_inside” 最后一条垂直链的配置，其他条不生效

我们分别添加app:flow_horizontalStyle=“packed｜spread｜spread_inside” 效果如下：
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
low_maxElementsWrap可以设置每行可布局组件最大的数量，当我们设置
app:flow_maxElementsWrap="3"的时候可以看到：
在这里插入图片描述
ConstraintLayout的用法实在太多，尤其是2.0以后，这里暂时整理这么多，后续慢慢补充。
本文参考了bilibi视频地址：【阿里P7进阶学习】使用 ConstraintLayout 构建自适应界面
参考其他csdn博客地址：Android ConstraintLayout用法全解析

heishuai123
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
constraintlayout嵌套_使用ConstraintLayout优化布局该怎么做？
weixin_39805924的博客
12-20 374
ConstraintLayout(约束布局)是 Android Studio 推荐的布局方式，能够实现灵活的布局，减少控件之间的嵌套，从而优化界面的渲染性能。官方文档：以前我们用 LinearLayout、RelativeLayout 等实现的布局，现在用 ConstraintLayout 都可以实现，而且布局更轻巧，更扁平。举个例子，要实现下面的布局，一个图标和一段文字两者居中对齐，而且文本长度...
android 布局之ConstraintLayout的使用
08-27
一、使用ConstraintLayout的必要性 ConstraintLayout是Android Studio中的一个重要组件，对于android布局的设计和实现具有重要作用。虽然Android Studio的可视化编辑个人不推荐使用，但是ConstraintLayout布局的...
如何使用ConstraintLayout
wiseyue的博客
01-22 208
  API28文档中的ConstraintLayout相关介绍 1.在多层LinearLayout嵌套（超过三层）之后，视图的渲染会拖累应用的性能，以往我们会选择使用RelativeLayout，但是如果视图层复杂的话RelativeLayout里面还需要嵌套其他视图，对视图的位置控制起来很麻烦，也不容易进行屏幕适配。所以我们使用ConstraintLayout。因为ConstraintLay...
Android Notification通知RemoteView布局使用ConstraintLayout报错
刘颖聪的博客
11-12 764
Android Notification通知RemoteView布局使用ConstraintLayout报错：inflate error ？ Notification的自定义布局是RemoteViews，和其他RemoteViews一样，在自定义视图布局文件中，仅支持FrameLayout、LinearLayout、RelativeLayout三种布局和AnalogClock、Chronometer、Button、ImageButton、ImageView、ProgressBar、TextView、.
快速使用ConstraintLayout
wangjiang
10-16 737
ConstraintLayout是在2016年Google I/O 大会上发布的，使用它可以减少布局的层级结构关系，从而达到在绘制视图过程中减少measure,layout,draw的时间损耗，最后加快界面渲染时间，防止丢帧导致卡顿不流畅现象。 Android系统每隔16ms发出VSYNC信号，触发对UI进行渲染，如果每次渲染都成功，这样就能够达到流畅的画面所需要的60fps，为了能够实现60f
为什么要使用ConstraintLayout?
Android技术之家
06-21 507
一、优势：     1、ConstraintLayout 允许您构建复杂的布局，而不必嵌套 View 和 ViewGroup 元素，ConstraintLayout则是使...
Android Dialog 使用 ConstraintLayout 约束布局宽度异常原因
小强开学前的博客
01-18 889
主题设置： <item name="android:windowNoTitle">true</item> <item name="android:windowMinWidthMinor">80%</item> <item name="android:windowBackground">@android:color/transparent</item> 测试结果： View控件设置了android:layout_width=".
使用ConstraintLayout遇到的些许问题
zhouaijia8的专栏
05-29 4296
1、控件的宽、高都不可设置为match_parent，否则所有的约束失效 2、欲使设置的margin生效，须指定控件的约束对象。例如，欲使marginTop生效，须设定layout_constraintTop_toTopOf 3、被Group持有的所有控件，其visiblity只能由Group决定 4、以当前布局中不能准确知道高度的View为标准，例如：在一个布局中，左边TextView的...
Android屏幕适配（使用ConstraintLayout）
最新发布
2401_84538278的博客
04-27 842
总而言之，Android开发行业变化太快，作为技术人员就要保持终生学习的态度，让学习力成为核心竞争力，所谓“活到老学到老”只有不断的学习，不断的提升自己，才能跟紧行业的步伐，才能不被时代所淘汰。在这里我分享一份自己收录整理上述技术体系图相关的几十套腾讯、头条、阿里、美团等公司20年的面试题，把技术点整理成了视频和PDF（实际上比预期多花了不少精力），包含知识脉络 + 诸多细节，由于篇幅有限，这里以图片的形式给大家展示一部分。
ConstraintLayout的使用
deeny的博客
07-19 856
ConstraintLayout的使用 ConstraintLayout的字面意思，约束布局。2016 年 Google I/O 推出。扁平式的布局方式，无任何嵌套，减少布局的层级，优化渲染性能。总之都是他的好，但是到底好在哪？先来学习一下看看。本篇文章是按照我的学习历程下来的。 属性介绍 layout_constraintLeft_toLeftOf layout_constraintLe...
android-cards：使用ConstraintLayout进行材质设计的CardView
02-03
在“android-cards”项目中，我们看到它结合了Material Design的规范和ConstraintLayout的强大布局管理能力，使得UI设计更加灵活且美观。下面我们将详细探讨这些知识点。 1. **Material Design**： Material ...
使用Constraintlayout开发的带动画效果，清除功能的EditText
07-05
在这个项目中，我们看到一个特定的应用场景，即“使用`ConstraintLayout`开发的带动画效果，具有清除功能的`EditText`”。 `EditText`是Android系统中用于用户输入文本的基本组件，它通常用于获取用户的文本输入。...
Album-Review---ConstraintLayout,继我在medium上的“创建复杂布局”文章之后，这个repo包含了一个使用constraintlayout为相册审阅界面构建的ui。.zip
10-11
本篇文章将深入探讨如何使用ConstraintLayout来构建一个相册评审界面，基于开源项目"Album-Review---ConstraintLayout"。 ConstraintLayout是Android Studio中的一款布局管理器，它的核心优势在于提供了直观的可视...
ColorMyViews：针对Udacity的免费课程“使用Kotlin开发Android应用程序”的Companion AndroidKotlin应用程序：如何使用ConstraintLayout构建平坦的UI小部件层次结构以及如何在运行时动态移动重新定位UI小部件
02-25
该应用程序的目的是演示如何使用ConstraintLayout构建平坦的UI小部件层次结构，以及如何在运行时动态移动/重新放置UI小部件。 我正在学习Android应用程序开发（以及git和GitHub ），这些示例存储库只是一种练习的...
android设置横屏和竖屏的方法
heishuai123的博客
07-22 5067
方法一：在AndroidManifest.xml中配置 假设不想让软件在横竖屏之间切换，最简单的办法就是在项目的AndroidManifest.xml中找到你所指定的activity中加上android:screenOrientation属性。他有下面几个參数： “unspecified”:默认值 由系统来推断显示方向.判定的策略是和设备相关的，所以不同的设备会有不同的显示方向. “land...
Android TextView 中实现部分文字变色以及点击事件
heishuai123的博客
07-21 4080
# 首先要想实现文字变色以及点击，都需要使用到SpannableStringBuilder，实例化该类也很简单，只需将你想要处理的字符串当做参数 SpannableStringBuilder spannable = new SpannableStringBuilder(content); # 那么下边便是开始实现文字变色了，调用SpannableStringBuilder的setS...
编码UTF-8 的不可映射字符 /非法字符
heishuai123的博客
06-29 3748
从网上下载了别人的代码，导入自己的项目中，运行时出现了这样的问题：错误：编码UTF-8 的不可映射字符 解决： 1.去往出现错误提示的画面，右下角有个“UTF-8”字样， 把UTF-8 换成任意编码格式， 换好之后，再把 把“UTF-8” 换回来。 编译，就能运行了！ ...
win10上面此电脑图标没有了
heishuai123的博客
05-28 3703
安装了win10，刚打开时发现桌面上没有我的电脑图标或者用了一段时间图标突然不见了，这对于很多人来说非常不适应，那么win10我的电脑图标没了怎么办?现在我就教大家怎么在win10上显示我的电脑图标（ win10的我的电脑名称为此电脑）。 1.鼠标在桌面空白处右击，选择“个性化”。 2.点击进入个性化窗口后，点击个性化窗口下的“主题”。 3.进入主题后，在主题界面可以看到...
merge中使用constraintlayout
07-14
在使用 ConstraintLayout 进行布局时，可以使用 merge 标签来有效地组织布局文件。merge 元素允许将多个视图合并到一个单独的布局文件中，以便在其他布局文件中重用。 要使用 merge 标签，可以按照以下步骤进行操作...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值