ConstraintLayout基础详解(下)

jianning-wu

已于 2023-08-15 10:48:02 修改

阅读量1.9k

点赞数 1

分类专栏： Android ConstraintLayout 文章标签：宽高比例水平居中垂直居中 Android约束布局 Android流布局

于 2017-05-15 11:07:33 首次发布

本文链接：https://blog.csdn.net/weixin_37730482/article/details/72123590

版权

Android ConstraintLayout 专栏收录该内容

8 篇文章 1 订阅

订阅专栏

ConstraintLayout为我们提供了很多的辅助类，本章节讲述几个常用的辅助类。

一.辅助类之Group

1.作用

Group的作用就是可以对一组控件同时隐藏或显示。

2.属性

app:constraint_referenced_ids="控件View1的id,控件View2的id"

3.代码

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

    <TextView
        android:id="@+id/activity_constraint_layout_TextView1"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:background="@color/colorPrimary"
        android:gravity="center"
        android:text="文字1"
        android:textColor="#FFFFFF"
        tools:ignore="MissingConstraints">

    </TextView>

    <TextView
        android:id="@+id/activity_constraint_layout_TextView2"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_marginLeft="10dp"
        android:background="@color/colorAccent"
        android:gravity="center"
        android:text="文字2"
        android:textColor="#FFFFFF"
        app:layout_constraintLeft_toRightOf="@id/activity_constraint_layout_TextView1"
        tools:ignore="MissingConstraints">

    </TextView>

    <TextView
        android:id="@+id/activity_constraint_layout_TextView3"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_marginLeft="10dp"
        android:background="@color/colorPrimaryDark"
        android:gravity="center"
        android:text="文字3"
        android:textColor="#FFFFFF"
        app:layout_constraintLeft_toRightOf="@id/activity_constraint_layout_TextView2"
        tools:ignore="MissingConstraints">

    </TextView>

    <androidx.constraintlayout.widget.Group
        android:id="@+id/activity_constraint_layout_Group"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:visibility="visible"
        app:constraint_referenced_ids="activity_constraint_layout_TextView1,activity_constraint_layout_TextView2,activity_constraint_layout_TextView3">

    </androidx.constraintlayout.widget.Group>


</androidx.constraintlayout.widget.ConstraintLayout>

Group：android:visibility="gone" ：三个View都不显示。

Group：android:visibility="visible"：三个View都显示。

也可以通过Java代码动态设置

Group group = findViewById(R.id.activity_constraint_layout_Group);

group.setVisibility(View.VISIBLE);

二.辅助类之Placeholder

1.作用

Placeholder的作用就是占位，它可以在布局中占好位置，通过app:content=""属性，或者动态调用setContent()设置内容，来让某个控件移动到此占位符中。

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"
    tools:context=".ConstraintLayoutActivity">

    <TextView
        android:id="@+id/activity_constraint_layout_TextView1"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:background="@color/colorPrimary"
        android:gravity="center"
        android:text="文字1文字1文字1文字1"
        android:textColor="#FFFFFF"
        tools:ignore="MissingConstraints">

    </TextView>

    <androidx.constraintlayout.widget.Placeholder
        android:id="@+id/activity_constraint_layout_Placeholder"
        android:layout_width="100dp"
        android:layout_height="100dp"
        app:layout_constraintRight_toRightOf="parent"
        tools:ignore="MissingConstraints">

    </androidx.constraintlayout.widget.Placeholder>


</androidx.constraintlayout.widget.ConstraintLayout>

Placeholder placeholder = findViewById(R.id.activity_constraint_layout_Placeholder);

placeholder.setContentId(R.id.activity_constraint_layout_TextView1);

三.辅助类之Flow

1.作用

Flow是ConstraintLayout为我们提供的流布局。

2.属性

//两个view在水平方向的间距
app:flow_horizontalGap="10dp"


//两个view在垂直方向的间隔
app:flow_verticalGap="10dp"


//流布局属性 三个取值 none chain aligned
app:flow_wrapMode="aligned"

none：默认 View水平排排 超出屏幕不显示

chain：View水平排排 超出屏幕换行 换行后的View平分下一行

aligned：View水平排排 超出屏幕换行 换行后的View 挨着显示

三者区别 看下面的效果

3.代码

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

    <TextView
        android:id="@+id/TextView1"
        android:layout_width="120dp"
        android:layout_height="80dp"
        android:background="@color/colorPrimary"
        android:gravity="center"
        android:text="文字1"
        android:textColor="#FFFFFF"
        tools:ignore="MissingConstraints">

    </TextView>

    <TextView
        android:id="@+id/TextView2"
        android:layout_width="120dp"
        android:layout_height="80dp"
        android:layout_marginLeft="10dp"
        android:background="@color/colorAccent"
        android:gravity="center"
        android:text="文字2"
        android:textColor="#FFFFFF"
        tools:ignore="MissingConstraints">

    </TextView>

    <TextView
        android:id="@+id/TextView3"
        android:layout_width="120dp"
        android:layout_height="80dp"
        android:layout_marginLeft="10dp"
        android:background="@color/colorPrimaryDark"
        android:gravity="center"
        android:text="文字3"
        android:textColor="#FFFFFF"
        tools:ignore="MissingConstraints">

    </TextView>

    <TextView
        android:id="@+id/TextView4"
        android:layout_width="120dp"
        android:layout_height="80dp"
        android:layout_marginLeft="10dp"
        android:background="@color/colorAccent"
        android:gravity="center"
        android:text="文字4"
        android:textColor="#FFFFFF"
        tools:ignore="MissingConstraints">

    </TextView>

    <TextView
        android:id="@+id/TextView5"
        android:layout_width="120dp"
        android:layout_height="80dp"
        android:layout_marginLeft="10dp"
        android:background="@color/colorPrimaryDark"
        android:gravity="center"
        android:text="文字5"
        android:textColor="#FFFFFF"
        tools:ignore="MissingConstraints">

    </TextView>


    <androidx.constraintlayout.helper.widget.Flow
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:constraint_referenced_ids="TextView1,TextView2,TextView3,TextView4,TextView5"
        app:flow_horizontalGap="10dp"
        app:flow_verticalGap="10dp"
        app:flow_wrapMode="aligned"
        tools:ignore="MissingConstraints">

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


</androidx.constraintlayout.widget.ConstraintLayout>

<1> app:flow_wrapMode="none"

<2> app:flow_wrapMode="aligned"

<3> app:flow_wrapMode="chain"

4.Flow的对齐约束

水平方向

<1> 属性

//水平方向 属性取值：top bottom  center  baseline
app:flow_verticalAlign="top"

top：上面对齐

bottom：下面对齐

center：中间对齐

baseline：基线对齐


注意：Flow View排排方向是vertical  且每个View宽高不一样

<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"
    tools:context=".ConstraintLayoutActivity">

    <TextView
        android:id="@+id/TextView1"
        android:layout_width="120dp"
        android:layout_height="80dp"
        android:background="@color/colorPrimary"
        android:gravity="center"
        android:text="文字1"
        android:textColor="#FFFFFF"
        tools:ignore="MissingConstraints">

    </TextView>

    <TextView
        android:id="@+id/TextView2"
        android:layout_width="120dp"
        android:layout_height="180dp"
        android:layout_marginLeft="10dp"
        android:background="@color/colorAccent"
        android:gravity="center"
        android:text="文字2"
        android:textColor="#FFFFFF"
        tools:ignore="MissingConstraints">

    </TextView>

    <TextView
        android:id="@+id/TextView3"
        android:layout_width="120dp"
        android:layout_height="60dp"
        android:layout_marginLeft="10dp"
        android:background="@color/colorPrimaryDark"
        android:gravity="center"
        android:text="文字3"
        android:textColor="#FFFFFF"
        tools:ignore="MissingConstraints">

    </TextView>

    <TextView
        android:id="@+id/TextView4"
        android:layout_width="120dp"
        android:layout_height="40dp"
        android:layout_marginLeft="10dp"
        android:background="@color/colorAccent"
        android:gravity="center"
        android:text="文字4"
        android:textColor="#FFFFFF"
        tools:ignore="MissingConstraints">

    </TextView>

    <TextView
        android:id="@+id/TextView5"
        android:layout_width="120dp"
        android:layout_height="50dp"
        android:layout_marginLeft="10dp"
        android:background="@color/colorPrimaryDark"
        android:gravity="center"
        android:text="文字5"
        android:textColor="#FFFFFF"
        tools:ignore="MissingConstraints">

    </TextView>


    <androidx.constraintlayout.helper.widget.Flow
        android:id="@+id/Flow1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:constraint_referenced_ids="TextView1,TextView2,TextView3,TextView4,TextView5"
        app:flow_horizontalGap="10dp"
        app:flow_verticalGap="10dp"
        app:flow_wrapMode="chain"
        app:flow_verticalAlign="top"
        tools:ignore="MissingConstraints">

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


</androidx.constraintlayout.widget.ConstraintLayout>

app:flow_verticalAlign="top"

app:flow_verticalAlign="bottom"

app:flow_verticalAlign="center"

app:flow_verticalAlign="baseline"

垂直方向

<1> 属性

//垂直方向 属性取值：start end  center
app:flow_horizontalAlign="start"


start：左边对齐

end：右边对齐

center：中间对齐



注意：Flow View排排方向是horizontal  且每个View宽高不一样

<2> 代码

略

5.Flow的数量约束

<1> 属性

//app:flow_wrapMode 为aligned或者chian时 指定个数
app:flow_maxElementsWrap="2"

<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"
    tools:context=".ConstraintLayoutActivity">

    <TextView
        android:id="@+id/TextView1"
        android:layout_width="120dp"
        android:layout_height="80dp"
        android:background="@color/colorPrimary"
        android:gravity="center"
        android:text="文字1"
        android:textColor="#FFFFFF"
        tools:ignore="MissingConstraints">

    </TextView>

    <TextView
        android:id="@+id/TextView2"
        android:layout_width="120dp"
        android:layout_height="180dp"
        android:layout_marginLeft="10dp"
        android:background="@color/colorAccent"
        android:gravity="center"
        android:text="文字2"
        android:textColor="#FFFFFF"
        tools:ignore="MissingConstraints">

    </TextView>

    <TextView
        android:id="@+id/TextView3"
        android:layout_width="120dp"
        android:layout_height="60dp"
        android:layout_marginLeft="10dp"
        android:background="@color/colorPrimaryDark"
        android:gravity="center"
        android:text="文字3"
        android:textColor="#FFFFFF"
        tools:ignore="MissingConstraints">

    </TextView>

    <TextView
        android:id="@+id/TextView4"
        android:layout_width="120dp"
        android:layout_height="40dp"
        android:layout_marginLeft="10dp"
        android:background="@color/colorAccent"
        android:gravity="center"
        android:text="文字4"
        android:textColor="#FFFFFF"
        tools:ignore="MissingConstraints">

    </TextView>

    <TextView
        android:id="@+id/TextView5"
        android:layout_width="120dp"
        android:layout_height="50dp"
        android:layout_marginLeft="10dp"
        android:background="@color/colorPrimaryDark"
        android:gravity="center"
        android:text="文字5"
        android:textColor="#FFFFFF"
        tools:ignore="MissingConstraints">

    </TextView>


    <androidx.constraintlayout.helper.widget.Flow
        android:id="@+id/Flow1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:constraint_referenced_ids="TextView1,TextView2,TextView3,TextView4,TextView5"
        app:flow_horizontalGap="10dp"
        app:flow_verticalGap="10dp"
        app:flow_wrapMode="chain"
        app:flow_maxElementsWrap="2"
        tools:ignore="MissingConstraints">

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


</androidx.constraintlayout.widget.ConstraintLayout>

app:flow_maxElementsWrap="2"

app:flow_maxElementsWrap="3"

四.辅助类之Layer

1.简介

Layer继承自ConstraintHelper，是一个约束助手，常用来增加背景，或者共同动画，使用时需要格外注意Layer要放在上面。详情看代码。

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"
    tools:context=".ConstraintLayoutActivity">

    <androidx.constraintlayout.helper.widget.Layer
        android:layout_width="160dp"
        android:layout_height="160dp"
        android:background="#FF0000"
        android:padding="10dp"
        tools:ignore="MissingConstraints"
        app:constraint_referenced_ids="ImageView1,TextView1">

    </androidx.constraintlayout.helper.widget.Layer>
    
    <ImageView
        android:id="@+id/ImageView1"
        android:layout_width="150dp"
        android:layout_height="150dp"
        tools:ignore="MissingConstraints"
        android:background="@color/colorAccent">

    </ImageView>

    <TextView
        android:id="@+id/TextView1"
        android:layout_width="150dp"
        android:layout_height="40dp"
        android:background="@color/colorPrimary"
        android:gravity="center"
        android:text="文字1"
        app:layout_constraintTop_toBottomOf="@+id/ImageView1"
        android:textColor="#FFFFFF"
        tools:ignore="MissingConstraints">

    </TextView>

   

</androidx.constraintlayout.widget.ConstraintLayout>

五.辅助类之ImageFilterView&ImageFilterButton

1.简介

ImageFilterView是ConstraintLayout一个控件。可以理解为ImageView。

ImageFilterButton是ConstraintLayout一个控件。可以理解为ImageButton。

ImageFilterView和ImageFilterButton的关系。可以理解为ImageView和ImageButton。

属性

//引用的另一种资源
app:altSrc="@color/colorPrimaryDark"


//altSrc所引用的资源不可见 [0,1] 0：不可见 即显示src内容   1：可见 即心事altSrc内容
app:crossfade="0.8"


app:overlay="false"：定义alt图像是否在原始图像的顶部淡出，或者是否与原始图像交叉淡出。默认是正确的。对于半透明的对象设置为false

代码

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

    <androidx.constraintlayout.utils.widget.ImageFilterView
        android:id="@+id/imageFilterView"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:scaleType="fitXY"
        android:src="@drawable/apptop"
        app:altSrc="#FF0000"
        app:crossfade="0.4"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        tools:ignore="MissingConstraints" />

    <androidx.constraintlayout.utils.widget.ImageFilterButton
        android:id="@+id/imageFilterButton"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_marginTop="20dp"
        android:scaleType="fitXY"
        android:src="@drawable/apptop"
        app:altSrc="#FF0000"
        app:crossfade="0.8"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@id/imageFilterView"
        tools:ignore="MissingConstraints" />


</androidx.constraintlayout.widget.ConstraintLayout>

属性

//设置了圆角 [0,1] 0：原图 1：圆 根据数值的大小会使图片在方形和圆形之间按比例过度，round=可以设置具体圆角的大小
app:roundPercent="0.2" 小数 就代表不是圆形 然后圆角的大小由app:round字段决定
app:round="30dp"




//设置调节色温  [0,1]  1：原图 0：色温最大
app:warmth="0.5"



//调节亮度 [0,1]  1：亮度最大 0：亮度最小
app:brightness="1"



//调节饱和度 [0,1]  1：饱和度最大 0：饱和度最小
app:saturation="1"



//调节对比度 [0,1]  1：原图 0：全黑
app:contrast="0.5"

代码

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

    <androidx.constraintlayout.utils.widget.ImageFilterView
        android:id="@+id/imageFilterView"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:src="@drawable/kan"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:roundPercent="1"
        app:warmth="0"
        app:brightness="1"
        app:saturation="0"
        tools:ignore="MissingConstraints" />


</androidx.constraintlayout.widget.ConstraintLayout>

效果

运行后看效果，浏览布局无效果。注意：根布局是其他布局也可以出现同样的效果，不一定非要ConstraintLayout布局。

六.辅助类之Guideline

1.简介

Guideline是一条参考线，可以帮助开发者进行辅助定位，并且实际上它并不会真正显示在布局中。主要用来确定View的位置，Guideline也可以用来做一些百分比分割之类的需求，有着很好的屏幕适配效果，Guideline有水平和垂直方向之分，位置可以使用针对父级的百分比或者针对父级位置的距离。

其实，就是画一条看不到的参考线，确定其位置。然后其他的View都按照它为依据测试位置。

2.属性

//辅助线的对齐方式 vertical&horizontal
android:orientation="horizontal"


//距离父布局宽度或高度的百分比 [0,1]
app:layout_constraintGuide_percent="0.5"


//距离父布局起始位置的距离 xxdp
app:layout_constraintGuide_begin="20dp"


//距离父布局结束位置的距离 xxdp
app:layout_constraintGuide_end="20dp"

3.代码

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

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

    <TextView
        android:id="@+id/TextView"
        android:layout_width="150dp"
        android:layout_height="150dp"
        android:layout_marginLeft="30dp"
        android:layout_marginTop="60dp"
        android:background="@color/colorPrimary"
        android:gravity="center"
        android:text="文字1"
        android:textColor="#FFFFFF"
        app:layout_constraintLeft_toRightOf="@id/Guideline"
        app:layout_constraintTop_toTopOf="parent"
        tools:ignore="MissingConstraints">

    </TextView>


</androidx.constraintlayout.widget.ConstraintLayout>

4.说明

这里确定了一个垂直的参考线父布局30% 然后定义了一个TextView 在父布局的上面距离上面60dp 在参考线的右边距离参考线30dp。

七.辅助类之Barrier

1.简介

Barrier和Guideline一样，也不会实际出现在布局中，它的作用如同其名，形成一个屏障、障碍。

2.属性

//控制Barrier相对于给定的View的位置
app:barrierDirection="end"

取值 left right  top  bottom  start  end



//取值是要依赖的控件的id
app:constraint_referenced_ids

3.代码

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

    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="20dp"
        android:background="@color/colorPrimary"
        android:text="TextView1"
        android:textColor="#FFFFFF"
        android:textSize="20sp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="20dp"
        android:background="@color/colorAccent"
        android:text="TextView2TextView2"
        android:textColor="#FFFFFF"
        android:textSize="20sp"
        app:layout_constraintLeft_toLeftOf="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="textView1,textView2" />

    <TextView
        android:id="@+id/textView3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginRight="20dp"
        android:padding="10dp"
        android:text="@string/content"
        app:layout_constraintLeft_toRightOf="@id/barrier"
        app:layout_constraintTop_toTopOf="parent" />


</androidx.constraintlayout.widget.ConstraintLayout>

八.辅助类之MockView

1.简介

MockView类似于产品的画原型图。

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"
    tools:context=".ConstraintLayoutActivity">

    <androidx.constraintlayout.utils.widget.MockView
        android:id="@+id/Name"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_marginStart="80dp"
        android:layout_marginTop="100dp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <androidx.constraintlayout.utils.widget.MockView
        android:id="@+id/Age"
        android:layout_width="100dp"
        android:layout_height="30dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@id/Name"
        app:layout_constraintTop_toTopOf="@id/Name" />

    <androidx.constraintlayout.utils.widget.MockView
        android:id="@+id/Sex"
        android:layout_width="100dp"
        android:layout_height="30dp"
        app:layout_constraintBottom_toBottomOf="@id/Name"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@id/Name" />


</androidx.constraintlayout.widget.ConstraintLayout>