Android开发 ConstraintLayout布局的详解

申敬發表於 2022-8-13 17:11:00

Android开发 ConstraintLayout布局的详解

<h1>版权声明</h1>
本文来自博客园，作者：观心静 ，转载请注明原文链接：https://www.cnblogs.com/guanxinjing/p/16583531.html
<div>本文版权归作者和博客园共有，欢迎转载，但必须给出原文链接，并保留此段声明，否则保留追究法律责任的权利。</div>
<h1>前言</h1>
 　　这篇博客其实拖了很久，原因是我早就已经彻底掌握了ConstraintLayout的使用，没有动力记录我已经特别熟练的技能了，所以一直懒得在写博客了。但是，觉得还是应该系统的整理一篇博客帮助他人学习。
在学习之前还是先要了解下约束布局的优势：
　　1.嵌套少，性能提高。因为View位置是互相关联的，所以不需要像线性布局一样需要有很多父类容器辅助View定位。
　　2.更快的编写xml布局，提高工作效率。熟练后可以使用Android studio快速拖拉组件来实现布局，但是前期建议好好了解ConstraintLayout的属性
　　3.View的定位灵活度更大，可以动态的跟随其他View的位置改变而改变。 
　　4.可阅读性强，这点可能很多人会质疑:“一堆View平铺有什么阅读性啊”。但是事实是，嵌套多层的线性布局或者相对布局反而更难以阅读，因为你需要关注父类布局提供的辅助定位信息。
<h1>学习定位属性</h1>
这里的定位属性指的是 layout_constraintTop_toTopOf  、layout_constraintTop_toBottomOf 、 layout_constraintStart_toEndOf 等等此类属性。
为了方便后续理解，这里说明下此类定位属性的意思。此类定位属性在文本上想表达的是 当前View 在 定位View 什么位置上。
这里举几个例子，例如：
layout_constraintTop_toBottomOf   这个属性的意思是当前View的上边（Top）在目标View的下边(Bottom)
layout_constraintTop_toTopOf   这个属性的意思是当前View的上边(Top) 在目标View的上边(Top)
 
这个时候估计有人会疑问，什么是当前View，什么是定位View啊。
当前View是指：你添加了 layout_constraintTop_toBottomOf  这个属性的View
定位View是指：app:layout_constraintTop_toBottomOf="@id/quit"   后面添加的id ，这里@id/quit 就是定位的View。所以，使用约束布局还有一个特点就是基本上每一个View都要写上id。
<h2>layout_constraintTop_toBottomOf   当前View的Top在目标View的Bottom</h2>
效果图（注意图片中的箭头）:
<img src="https://img2022.cnblogs.com/blog/1497956/202208/1497956-20220813165836579-2043883262.png" alt="">
 xml
<div class="cnblogs_code">
<pre> <Button
 android:id="@+id/btn2"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_marginTop="50dp"
 android:text="按键2"
 app:layout_constraintTop_toBottomOf="@id/btn1" /></pre>
</div>
方便观看这里增加了上边距50dp
<h2>layout_constraintBottom_toTopOf当前View的Bottom在目标View的Top</h2>
效果图：
<img src="https://img2022.cnblogs.com/blog/1497956/202208/1497956-20220813180728786-1686725227.png" alt="">
 xml
<div class="cnblogs_code">
<pre> <Button
 android:id="@+id/btn2"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:text="按键2"
 android:layout_marginBottom="50dp"
 app:layout_constraintBottom_toTopOf="@id/btn1" /></pre>
</div>
<h2>layout_constraintLeft_toRightOf 与 layout_constraintStart_toEndOf  当前View的Left在目标View的Right</h2>
layout_constraintLeft_toRightOf 与 layout_constraintStart_toEndOf 这2个属性其实都是一个意思，都是当前View的Left在目标View的Right。
为什么google会设计2个功能一样的属性呢？因为阿拉伯语，我们正常的阅读习惯是从左到右，而阿拉伯语的习惯是从右到左。所以语言切换后整体View的布局位置也要跟随改变。当时，如果你只开发国内App其实用2个之间的任意一个属性都可以。
效果图
<img src="https://img2022.cnblogs.com/blog/1497956/202208/1497956-20220813170616115-1654278761.png" alt="">
 xml
<div class="cnblogs_code">
<pre> <Button
 android:id="@+id/btn2"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:text="按键2"
 app:layout_constraintStart_toEndOf="@id/btn1"
 app:layout_constraintTop_toBottomOf="@+id/btn1" /></pre>
</div>
在上面我使用了Start_toEndOf 所以效果图上按键2的左边依附在按键的右边上，但是因为Top_toBottomOf的关系，按键2的上边又在按键1的下边上。
<h2>layout_constraintRight_toLeftOf 与 layout_constraintEnd_toStartOf  当前View的Right在目标View的Left</h2>
与上面的差不多，举一反三也可以理解。
效果图:
<img src="https://img2022.cnblogs.com/blog/1497956/202208/1497956-20220813174444355-125311758.png" alt="">
 xml
<div class="cnblogs_code">
<pre> <Button
 android:id="@+id/btn2"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:text="按键2"
 app:layout_constraintEnd_toStartOf="@id/btn1"
 app:layout_constraintTop_toBottomOf="@+id/btn1" /></pre>
</div>
<h2>layout_constraintTop_toTopOf 当前View的Top在目标View的Top</h2>
这里要介绍一个关键字 parent，parent会经常使用。当前View想依附到ConstraintLayout 布局本身的四个边的位置上时，就可以使用parent。例如希望一个按钮依附到ConstraintLayout 上边就可以使用 app:layout_constraintTop_toTopOf="parent"
效果图：
<img src="https://img2022.cnblogs.com/blog/1497956/202208/1497956-20220813175408920-2023876372.png" alt="">
 xml
<div class="cnblogs_code">
<pre><?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:background="@color/white"
android:layout_width="match_parent"
android:layout_height="match_parent">

<Button
 android:id="@+id/btn1"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_marginStart="20dp"
 android:layout_marginTop="20dp"
 android:text="按键1"
 app:layout_constraintStart_toStartOf="parent"
 app:layout_constraintTop_toTopOf="parent" />

<Button
 android:id="@+id/btn2"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:text="按键2"
 app:layout_constraintTop_toTopOf="@+id/btn1"
 app:layout_constraintStart_toEndOf="@+id/btn1"/>

</androidx.constraintlayout.widget.ConstraintLayout></pre>
</div>
这里按键1依附了父类布局ConstraintLayout 的左边与上边，按键2布局也写入 app:layout_constraintTop_toTopOf="@+id/btn1" 依附在按键1的上边。这里可以看到按键2即使没有写layout_marginTop="20dp" 也依然与按键1的top边对齐。
<h2>layout_constraintBottom_toBottomOf  当前View的Bottom在目标View的Bottom</h2>
与上面的差不多，举一反三也也可以理解。
效果图：
<img src="https://img2022.cnblogs.com/blog/1497956/202208/1497956-20220813180341260-1037385283.png" alt="">
 xml
<div class="cnblogs_code">
<pre><?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:background="@color/white"
android:layout_width="match_parent"
android:layout_height="match_parent">

<Button
 android:id="@+id/btn1"
 android:layout_width="wrap_content"
 android:layout_height="80dp"
 android:layout_marginStart="20dp"
 android:layout_marginTop="20dp"
 android:text="按键1"
 app:layout_constraintStart_toStartOf="parent"
 app:layout_constraintTop_toTopOf="parent" />

<Button
 android:id="@+id/btn2"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:text="按键2"
 app:layout_constraintBottom_toBottomOf="@id/btn1"
 app:layout_constraintStart_toEndOf="@+id/btn1"/>

</androidx.constraintlayout.widget.ConstraintLayout></pre>
</div>
<h1>约束布局下View的宽高0dp </h1>
在ConstraintLayout下 0dp 有一个特别的功能。让View根据定位属性填满高度或者宽度。
<h2>例子1</h2>
效果图：
<img src="https://img2022.cnblogs.com/blog/1497956/202208/1497956-20220813183316845-309755321.png" alt="">
 xml
<div class="cnblogs_code">
<pre><?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:background="@color/white"
android:layout_width="match_parent"
android:layout_height="match_parent">

<Button
 android:id="@+id/btn1"
 android:layout_width="0dp"
 android:layout_height="50dp"
 android:layout_marginTop="20dp"
 android:text="按键1"
 app:layout_constraintEnd_toEndOf="parent"
 app:layout_constraintStart_toStartOf="parent"
 app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout></pre>
</div>
效果图里可以看到按键1的宽度根据定位属性被填满了
<h2>例子2</h2>
效果图：
<img src="https://img2022.cnblogs.com/blog/1497956/202208/1497956-20220813183546539-107869724.png" alt="">
 xml
<div class="cnblogs_code">
<pre><?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:background="@color/white"
android:layout_width="match_parent"
android:layout_height="match_parent">

<Button
 android:id="@+id/btn1"
 android:layout_width="0dp"
 android:layout_height="0dp"
 android:layout_marginTop="20dp"
 android:text="按键1"
 app:layout_constraintBottom_toTopOf="@+id/btn2"
 app:layout_constraintEnd_toEndOf="parent"
 app:layout_constraintStart_toStartOf="parent"
 app:layout_constraintTop_toTopOf="parent" />

<Button
 android:id="@+id/btn2"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:text="按键2"
 android:layout_marginBottom="600dp"
 app:layout_constraintBottom_toBottomOf="parent"
 app:layout_constraintEnd_toEndOf="parent"
 app:layout_constraintStart_toStartOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout></pre>
</div>
<h1>layout_constraintHorizontal_chainStyle 与  layout_constraintVertical_chainStyle  间隙均分属性</h1>
layout_constraintHorizontal_chainStyle 与  layout_constraintVertical_chainStyle  一个是作用在横向一个是作用在竖向，二者没有区别。所以这里只举例横向Horizontal不在重复举例竖向。
layout_constraintHorizontal_chainStyle 是将两个与两个以上的View，在一个水平角度上互相定位后产生水平上的间隙均分关联。间隙均分的类型一共有三种：spread_inside 、spread、packed
<h2>spread_inside效果图：</h2>
<img src="https://img2022.cnblogs.com/blog/1497956/202208/1497956-20220815115117298-1355370489.png" alt="">
 xml
请注意，下面的3个按键的左右定位关系都是互相关联的。
<div class="cnblogs_code">
<pre><?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"
android:background="@color/white">

<Button
 android:id="@+id/btn1"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:text="按键1"
 app:layout_constraintEnd_toStartOf="@+id/btn2"
 app:layout_constraintHorizontal_chainStyle="spread_inside"
 app:layout_constraintStart_toStartOf="parent"
 app:layout_constraintTop_toTopOf="parent" />

<Button
 android:id="@+id/btn2"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:text="按键2"
 app:layout_constraintEnd_toStartOf="@+id/btn3"
 app:layout_constraintStart_toEndOf="@+id/btn1"
 app:layout_constraintTop_toTopOf="parent" />

<Button
 android:id="@+id/btn3"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:text="按键3"
 app:layout_constraintEnd_toEndOf="parent"
 app:layout_constraintStart_toEndOf="@+id/btn2"
 app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout></pre>
</div>
<h2>spread效果图：</h2>
<img src="https://img2022.cnblogs.com/blog/1497956/202208/1497956-20220815115300705-1321226172.png" alt="">
<h2>packed效果图：</h2>
<img src="https://img2022.cnblogs.com/blog/1497956/202208/1497956-20220815115401515-1176045859.png" alt="">
<h2>发散例子：如果想让按键均分铺满整个水平角度</h2>
效果图
<img src="https://img2022.cnblogs.com/blog/1497956/202208/1497956-20220815115531609-1699677.png" alt="">
 xml
需要在对应水平角度的宽度或者高度上设置为0dp
<div class="cnblogs_code">
<pre><?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"
android:background="@color/white">

<Button
 android:id="@+id/btn1"
 android:layout_width="0dp"
 android:layout_height="wrap_content"
 android:text="按键1"
 app:layout_constraintEnd_toStartOf="@+id/btn2"
 app:layout_constraintHorizontal_chainStyle="packed"
 app:layout_constraintStart_toStartOf="parent"
 app:layout_constraintTop_toTopOf="parent" />

<Button
 android:id="@+id/btn2"
 android:layout_width="0dp"
 android:layout_height="wrap_content"
 android:text="按键2"
 app:layout_constraintEnd_toStartOf="@+id/btn3"
 app:layout_constraintStart_toEndOf="@+id/btn1"
 app:layout_constraintTop_toTopOf="parent" />

<Button
 android:id="@+id/btn3"
 android:layout_width="0dp"
 android:layout_height="wrap_content"
 android:text="按键3"
 app:layout_constraintEnd_toEndOf="parent"
 app:layout_constraintStart_toEndOf="@+id/btn2"
 app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout></pre>
</div>
<h1>layout_constraintVertical_weight 与layout_constraintHorizontal_weight 按比例均分空间</h1>
此属性需要配合layout_constraintHorizontal_chainStyle 与  layout_constraintVertical_chainStyle  间隙均分属性一起使用。并且使用的时候需要将对应方向的宽或者高设置为0dp。
xml
<div class="cnblogs_code">
<pre><?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=".ui.MainActivity">

<View
 android:id="@+id/text1"
 android:layout_width="0dp"
 android:layout_height="0dp"
 android:background="@android:color/holo_orange_light"
 app:layout_constraintBottom_toTopOf="@id/text2"
 app:layout_constraintEnd_toEndOf="parent"
 app:layout_constraintStart_toStartOf="parent"
 app:layout_constraintTop_toTopOf="parent"
 app:layout_constraintVertical_chainStyle="packed"
 app:layout_constraintVertical_weight="0.2" />

<View
 android:id="@+id/text2"
 android:layout_width="0dp"
 android:layout_height="0dp"
 android:background="@android:color/holo_red_dark"
 app:layout_constraintBottom_toTopOf="@id/text3"
 app:layout_constraintEnd_toEndOf="parent"
 app:layout_constraintStart_toStartOf="parent"
 app:layout_constraintTop_toBottomOf="@id/text1"
 app:layout_constraintVertical_weight="0.4" />

<View
 android:id="@+id/text3"
 android:layout_width="0dp"
 android:layout_height="0dp"
 android:background="@android:color/holo_green_light"
 app:layout_constraintBottom_toBottomOf="parent"
 app:layout_constraintEnd_toEndOf="parent"
 app:layout_constraintStart_toStartOf="parent"
 app:layout_constraintTop_toBottomOf="@id/text2"
 app:layout_constraintVertical_weight="0.6" />

</androidx.constraintlayout.widget.ConstraintLayout></pre>
</div>
效果图，在上面的属性中高度的分别设置比例是，text1=20%  text2=40% text3=60%：
<img src="https://img2023.cnblogs.com/blog/1497956/202301/1497956-20230114121015377-164209357.png" alt="">
<h1>layout_constraintWidth_percent 与 layout_constraintHeight_percent 按照百分比设置宽高</h1>
请注意，实际的占据空间的百分比是设置了  layout_constraintTop_toTopOf 与 layout_constraintBottom_toBottomOf 后范围空间的百分比。 
xml
<div class="cnblogs_code">
<pre><?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=".ui.MainActivity">

<TextView
 android:layout_width="0dp"
 android:layout_height="0dp"
 android:background="@color/black"
 app:layout_constraintHeight_percent="0.5"
 app:layout_constraintWidth_percent="0.5"
 app:layout_constraintBottom_toBottomOf="parent"
 app:layout_constraintEnd_toEndOf="parent"
 app:layout_constraintStart_toStartOf="parent"
 app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout></pre>
</div>
上面设置了宽高都是50%的效果图：
<img src="https://img2023.cnblogs.com/blog/1497956/202301/1497956-20230114120138767-1750679042.png" alt="">
<h1>layout_constraintDimensionRatio 设置高宽百分比</h1>
 这是一个在手机端app开发特别有用的属性，可以依靠此属性按照比例让View适配不同手机的屏幕到达一个统一的效果。
<h2>View的高度和宽度1比1</h2>
效果图：
<img src="https://img2022.cnblogs.com/blog/1497956/202208/1497956-20220822201759029-613029071.png" alt="">
 
 
 xml
这里让按键的宽度跟随设备宽度。但是高度是与宽度一比一的。
<div class="cnblogs_code">
<pre> <Button
 android:id="@+id/btn1"
 android:layout_width="0dp"
 android:layout_height="0dp"
 android:text="按键1"
 app:layout_constraintDimensionRatio="H,1:1"
 app:layout_constraintEnd_toEndOf="parent"
 app:layout_constraintStart_toStartOf="parent"
 app:layout_constraintTop_toTopOf="parent" /></pre>
</div>
<h2>View的高度是宽度的0.5</h2>
效果图：
<img src="https://img2022.cnblogs.com/blog/1497956/202208/1497956-20220822202008312-253950746.png" alt="">
 
 
 xml
注意这里使用的是W
<div class="cnblogs_code">
<pre> <Button
 android:id="@+id/btn1"
 android:layout_width="0dp"
 android:layout_height="0dp"
 android:text="按键1"
 app:layout_constraintDimensionRatio="W,0.5:1"
 app:layout_constraintEnd_toEndOf="parent"
 app:layout_constraintStart_toStartOf="parent"
 app:layout_constraintTop_toTopOf="parent" /></pre>
</div>
<h1>宽度与高度的最大最小限制</h1>
一共有四条属性
<ul>
<li>app:layout_constraintWidth_max="100dp"  设置最大宽度</li>
<li>app:layout_constraintWidth_min="50dp"　设置最小宽度　</li>
<li>app:layout_constraintHeight_max="50dp"   设置最大高度</li>
<li>app:layout_constraintHeight_min="50dp"    设置最小高度</li>
</ul>
<h2>限制最大宽度</h2>
效果图：
<img src="https://img2022.cnblogs.com/blog/1497956/202208/1497956-20220822203002783-1108553909.png" alt="">
 
 xml
<div class="cnblogs_code">
<pre> <Button
 android:id="@+id/btn1"
 android:layout_width="200dp"
 android:layout_height="50dp"
 android:text="按键1"
 app:layout_constraintEnd_toEndOf="parent"
 app:layout_constraintStart_toStartOf="parent"
 app:layout_constraintTop_toTopOf="parent" />

<Button
 android:id="@+id/btn2"
 android:layout_width="0dp"
 android:layout_height="50dp"
 android:text="按键2" app:layout_constraintWidth_max="100dp"
 app:layout_constraintEnd_toEndOf="@+id/btn1"
 app:layout_constraintStart_toStartOf="@+id/btn1"
 app:layout_constraintTop_toBottomOf="@+id/btn1"/></pre>
</div>
<h2>限制最小宽度</h2>
效果图：
<img src="https://img2022.cnblogs.com/blog/1497956/202208/1497956-20220822202915918-982887701.png" alt="">
 
 
 xml
<div class="cnblogs_code">
<pre> <Button
 android:id="@+id/btn1"
 android:layout_width="50dp"
 android:layout_height="50dp"
 android:text="按键1"
 app:layout_constraintEnd_toEndOf="parent"
 app:layout_constraintStart_toStartOf="parent"
 app:layout_constraintTop_toTopOf="parent" />

<Button
 android:id="@+id/btn2"
 android:layout_width="0dp"
 android:layout_height="50dp"
 android:text="按键2" app:layout_constraintEnd_toEndOf="@+id/btn1"
 app:layout_constraintStart_toStartOf="@+id/btn1"
 app:layout_constraintTop_toBottomOf="@+id/btn1"
 app:layout_constraintWidth_min="100dp" /></pre>
</div>
<h1>androidx.constraintlayout.widget.Guideline  辅助线</h1>
 
androidx.constraintlayout.widget.Guideline辅助线View是不显示，用处很大。他们的意义是可以帮我们少写大量的android:layout_margin 外边距属性
另外注意使用android:orientation可以设置辅助线的水平方向
<h2>layout_constraintGuide_percent 百分比属性下的使用</h2>
 效果图：
<img src="https://img2022.cnblogs.com/blog/1497956/202208/1497956-20220822203714831-661089352.png" alt="">
xml
以百分比数值作为辅助线的位置
 
<div class="cnblogs_code">
<pre> <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.25" />

<Button
 android:id="@+id/btn1"
 android:layout_width="200dp"
 android:layout_height="50dp"
 android:text="按键1"
 app:layout_constraintStart_toStartOf="@+id/guideline2"
 app:layout_constraintTop_toTopOf="parent" /></pre>
</div>
<h2>layout_constraintGuide_begin 以dp数值设置开始方向的辅助线位置</h2>
 效果图：
<img src="https://img2022.cnblogs.com/blog/1497956/202208/1497956-20220822204036148-489799306.png" alt="">
 
 xml
<div class="cnblogs_code">
<pre> <androidx.constraintlayout.widget.Guideline
 android:id="@+id/guideline2"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:orientation="vertical"
 app:layout_constraintGuide_begin="50dp" />

<Button
 android:id="@+id/btn1"
 android:layout_width="200dp"
 android:layout_height="50dp"
 android:text="按键1"
 app:layout_constraintStart_toStartOf="@+id/guideline2"
 app:layout_constraintTop_toTopOf="parent" /></pre>
</div>
<h2>layout_constraintGuide_end 以dp数值设置结束方向的辅助线位置</h2>
 效果图：
<img src="https://img2022.cnblogs.com/blog/1497956/202208/1497956-20220822204152352-999676002.png" alt="">
 
 xml
<div class="cnblogs_code">
<pre> <androidx.constraintlayout.widget.Guideline
 android:id="@+id/guideline2"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:orientation="vertical"
 app:layout_constraintGuide_end="150dp" />

<Button
 android:id="@+id/btn1"
 android:layout_width="200dp"
 android:layout_height="50dp"
 android:text="按键1"
 app:layout_constraintStart_toStartOf="@+id/guideline2"
 app:layout_constraintTop_toTopOf="parent" /></pre>
</div>
<h1>constraintlayout.widget.Barrier 障碍线</h1>
androidx.constraintlayout.widget.Barrier 障碍线View是不显示。它的作用是与多View产生关联并且始终保持在长度最长的那个View上。可能很难理解，但是看下面的动图就很好理解了。
这个View的关键属性是
app:barrierDirection="end"  这是让barrier根据view的那个方向设置障碍
app:constraint_referenced_ids=""  需要设置的view的id
效果图：
图片中按键3的左边是依赖了barrier这个View的
<img src="https://img2022.cnblogs.com/blog/1497956/202208/1497956-20220822210213102-1703908756.gif" alt="">
xml
<div class="cnblogs_code">
<pre><?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"
android:background="@color/white">

<Button
 android:id="@+id/btn1"
 android:layout_width="300dp"
 android:layout_height="50dp"
 android:text="按键1"
 app:layout_constraintStart_toStartOf="parent"
 app:layout_constraintTop_toTopOf="parent" />

<Button
 android:id="@+id/btn2"
 android:layout_width="150dp"
 android:layout_height="50dp"
 android:text="按键2"
 android:visibility="visible"
 app:layout_constraintStart_toStartOf="parent"
 app:layout_constraintTop_toBottomOf="@+id/btn1" />

<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="btn1,btn2"/>

<Button
 android:id="@+id/btn3"
 android:layout_width="100dp"
 android:layout_height="50dp"
 android:text="按键3"
 app:layout_constraintStart_toStartOf="@id/barrier"
 app:layout_constraintTop_toBottomOf="@+id/btn2" />

</androidx.constraintlayout.widget.ConstraintLayout></pre>
</div>
<h1>layout_goneMarginStart 、layout_goneMarginTop 相邻View隐藏后的外边距设置</h1>
一共有6个属性
<div class="cnblogs_code">
<pre><attr format="dimension" name="layout_goneMarginBottom"/>
<attr format="dimension" name="layout_goneMarginEnd"/>
<attr format="dimension" name="layout_goneMarginLeft"/>
<attr format="dimension" name="layout_goneMarginRight"/>
<attr format="dimension" name="layout_goneMarginStart"/>
<attr format="dimension" name="layout_goneMarginTop"/></pre>
</div>
效果图：
 <img src="https://img2022.cnblogs.com/blog/1497956/202208/1497956-20220824155835076-65927584.gif" alt="">
xml
<div class="cnblogs_code">
<pre><?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"
android:background="@color/white">

<Button
 android:id="@+id/btn1"
 android:layout_width="0dp"
 android:layout_height="50dp"
 android:text="按键1"
 android:visibility="gone"
 app:layout_constraintEnd_toEndOf="parent"
 app:layout_constraintStart_toStartOf="parent"
 app:layout_constraintTop_toTopOf="parent" />

<Button
 android:id="@+id/btn2"
 android:layout_width="0dp"
 android:layout_height="50dp"
 android:text="按键2"
 app:layout_goneMarginTop="50dp"
 app:layout_constraintEnd_toEndOf="parent"
 app:layout_constraintStart_toStartOf="parent"
 app:layout_constraintTop_toBottomOf="@+id/btn1" />

</androidx.constraintlayout.widget.ConstraintLayout></pre>
</div>
<h1>constraintlayout.widget.Group 将多个View编组</h1>
 一般情况下多用于管理多个view的显示与隐藏
效果图：
<img src="https://img2022.cnblogs.com/blog/1497956/202208/1497956-20220824160847627-1939236408.gif" alt="">
xml
<div class="cnblogs_code">
<pre><?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"
android:background="@color/white">

<Button
 android:id="@+id/btn1"
 android:layout_width="0dp"
 android:layout_height="50dp"
 android:text="按键1"
 android:visibility="gone"
 app:layout_constraintEnd_toEndOf="parent"
 app:layout_constraintStart_toStartOf="parent"
 app:layout_constraintTop_toTopOf="parent" />

<Button
 android:id="@+id/btn2"
 android:layout_width="0dp"
 android:layout_height="50dp"
 android:text="按键2"
 app:layout_goneMarginTop="50dp"
 app:layout_constraintEnd_toEndOf="parent"
 app:layout_constraintStart_toStartOf="parent"
 app:layout_constraintTop_toBottomOf="@+id/btn1" />

<androidx.constraintlayout.widget.Group
 android:id="@+id/group"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:visibility="visible"
 app:constraint_referenced_ids="btn1,btn2"/>

</androidx.constraintlayout.widget.ConstraintLayout></pre>
</div>
<h1>layout_constraintCircle 以圆形实现View的排列</h1>
效果图：
<img src="https://img2022.cnblogs.com/blog/1497956/202208/1497956-20220824163455064-224651532.png" alt="">
xml
<div class="cnblogs_code">
<pre><?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"
android:background="@color/white">

<TextView
 android:id="@+id/clockCenter"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:text="时钟中心"
 android:textColor="@android:color/black"
 android:layout_marginTop="300dp"
 app:layout_constraintEnd_toEndOf="parent"
 app:layout_constraintStart_toStartOf="parent"
 app:layout_constraintTop_toTopOf="parent" />

<TextView
 android:id="@+id/zero"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:text="0"
 android:textColor="@android:color/black"
 app:layout_constraintCircle="@id/clockCenter"
 app:layout_constraintCircleRadius="100dp"
 app:layout_constraintCircleAngle="0"
 app:layout_constraintStart_toStartOf="@id/clockCenter"
 app:layout_constraintTop_toTopOf="@id/clockCenter"/>

<TextView
 android:id="@+id/one"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:text="1"
 android:textColor="@android:color/black"
 app:layout_constraintCircle="@id/clockCenter"
 app:layout_constraintCircleRadius="100dp"
 app:layout_constraintCircleAngle="30"
 app:layout_constraintStart_toStartOf="@id/clockCenter"
 app:layout_constraintTop_toTopOf="@id/clockCenter"/>

<TextView
 android:id="@+id/two"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:text="2"
 android:textColor="@android:color/black"
 app:layout_constraintCircle="@id/clockCenter"
 app:layout_constraintCircleRadius="100dp"
 app:layout_constraintCircleAngle="60"
 app:layout_constraintStart_toStartOf="@id/clockCenter"
 app:layout_constraintTop_toTopOf="@id/clockCenter"/>

<TextView
 android:id="@+id/three"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:text="3"
 android:textColor="@android:color/black"
 app:layout_constraintCircle="@id/clockCenter"
 app:layout_constraintCircleRadius="100dp"
 app:layout_constraintCircleAngle="90"
 app:layout_constraintStart_toStartOf="@id/clockCenter"
 app:layout_constraintTop_toTopOf="@id/clockCenter"/>

<TextView
 android:id="@+id/four"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:text="4"
 android:textColor="@android:color/black"
 app:layout_constraintCircle="@id/clockCenter"
 app:layout_constraintCircleRadius="100dp"
 app:layout_constraintCircleAngle="120"
 app:layout_constraintStart_toStartOf="@id/clockCenter"
 app:layout_constraintTop_toTopOf="@id/clockCenter"/>

<TextView
 android:id="@+id/five"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:text="5"
 android:textColor="@android:color/black"
 app:layout_constraintCircle="@id/clockCenter"
 app:layout_constraintCircleRadius="100dp"
 app:layout_constraintCircleAngle="150"
 app:layout_constraintStart_toStartOf="@id/clockCenter"
 app:layout_constraintTop_toTopOf="@id/clockCenter"/>

<TextView
 android:id="@+id/six"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:text="6"
 android:textColor="@android:color/black"
 app:layout_constraintCircle="@id/clockCenter"
 app:layout_constraintCircleRadius="100dp"
 app:layout_constraintCircleAngle="180"
 app:layout_constraintStart_toStartOf="@id/clockCenter"
 app:layout_constraintTop_toTopOf="@id/clockCenter"/>

<TextView
 android:id="@+id/seven"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:text="7"
 android:textColor="@android:color/black"
 app:layout_constraintCircle="@id/clockCenter"
 app:layout_constraintCircleRadius="100dp"
 app:layout_constraintCircleAngle="210"
 app:layout_constraintStart_toStartOf="@id/clockCenter"
 app:layout_constraintTop_toTopOf="@id/clockCenter"/>

<TextView
 android:id="@+id/eight"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:text="8"
 android:textColor="@android:color/black"
 app:layout_constraintCircle="@id/clockCenter"
 app:layout_constraintCircleRadius="100dp"
 app:layout_constraintCircleAngle="240"
 app:layout_constraintStart_toStartOf="@id/clockCenter"
 app:layout_constraintTop_toTopOf="@id/clockCenter"/>

<TextView
 android:id="@+id/nine"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:text="9"
 android:textColor="@android:color/black"
 app:layout_constraintCircle="@id/clockCenter"
 app:layout_constraintCircleRadius="100dp"
 app:layout_constraintCircleAngle="270"
 app:layout_constraintStart_toStartOf="@id/clockCenter"
 app:layout_constraintTop_toTopOf="@id/clockCenter"/>

<TextView
 android:id="@+id/ten"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:text="10"
 android:textColor="@android:color/black"
 app:layout_constraintCircle="@id/clockCenter"
 app:layout_constraintCircleRadius="100dp"
 app:layout_constraintCircleAngle="300"
 app:layout_constraintStart_toStartOf="@id/clockCenter"
 app:layout_constraintTop_toTopOf="@id/clockCenter"/>

<TextView
 android:id="@+id/eleven"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:text="11"
 android:textColor="@android:color/black"
 app:layout_constraintCircle="@id/clockCenter"
 app:layout_constraintCircleRadius="100dp"
 app:layout_constraintCircleAngle="330"
 app:layout_constraintStart_toStartOf="@id/clockCenter"
 app:layout_constraintTop_toTopOf="@id/clockCenter"/>


<androidx.constraintlayout.widget.ConstraintLayout
 android:layout_width="match_parent"
 android:layout_height="500dp"
 android:rotationY="0.5"
 android:rotationX="0.5"
 android:rotation="30"
 app:layout_constraintTop_toTopOf="@id/clockCenter"
 app:layout_constraintBottom_toBottomOf="@id/clockCenter">

 <View
 android:id="@+id/minute"
 android:layout_width="2dp"
 android:layout_height="80dp"
 android:background="@color/black"
 android:layout_marginBottom="100dp"
 app:layout_constraintTop_toTopOf="parent"
 app:layout_constraintStart_toStartOf="parent"
 app:layout_constraintEnd_toEndOf="parent"
 app:layout_constraintBottom_toBottomOf="parent"/>

</androidx.constraintlayout.widget.ConstraintLayout>

</androidx.constraintlayout.widget.ConstraintLayout></pre>
</div>
<h1> 关于插入布局include不与约束条件有关联的问题</h1>
加上 android:layout_width 与 android:layout_height 就能解决问题
<img src="https://img2023.cnblogs.com/blog/1497956/202303/1497956-20230307170445242-1013174773.png" alt="">
 
 
 
 
End

</div>
<div id="MySignature" role="contentinfo">
<div style="text-align: center">
本文来自博客园，作者：观心静，转载请注明原文链接：https://www.cnblogs.com/guanxinjing/p/16583531.html 
<div style="color:orange;font-size:16px;">本文版权归作者和博客园共有，欢迎转载，但必须给出原文链接，并保留此段声明，否则保留追究法律责任的权利。 </div>
</div> 
来源：https://www.cnblogs.com/guanxinjing/p/16583531.html

頁: [1]

琼殿技术论坛's Archiver

Android开发 ConstraintLayout布局的详解