写给自己，使用ConstraintLayout进行布局。

最新推荐文章于 2023-10-18 16:48:03 发布

Kevin，

最新推荐文章于 2023-10-18 16:48:03 发布

阅读量182

点赞数 1

分类专栏：每天都要加油鸭文章标签： html

本文链接：https://blog.csdn.net/weixin_52942787/article/details/120584014

版权

每天都要加油鸭专栏收录该内容

18 篇文章 0 订阅

订阅专栏

系列文章目录

文章目录

系列文章目录
前言
一、ConstraintLayout(约束布局)是什么？
二、相对定位
三、角度定位
四、边距
五、偏移（bias）
六、尺寸约束
七、宽高比
八、链式约束（Chains）
九、辅助工具（Optimizer）
十、屏障（Barrier）
十一、分组（Group）
十二、占位符(Placeholder)
十三、辅助线(Guideline)
十四、层(Layer)
十五、流(Flow)

前言

提示：这里可以添加本文要记录的大概内容：
例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。

提示：以下是本篇文章正文内容，下面案例可供参考

一、ConstraintLayout(约束布局)是什么？

约束布局是一个ViewGroup,他的出现主要是为了解决布局嵌套过多的问题，以灵活的方式定位和调整小部件，能够让你从层层嵌套去实现复杂的布局中解放出来，使用ConstraintLayout后基本可以抛弃LinearLayout和RelativeLayout的使用，完全不许动要任何嵌套就可以实现复杂的UI，并且他的所有功能都可以使用Android Studio的布局编辑器使用，使用起来更加方便。

二、相对定位

相对定位是此控件对另一个位置的约束或者说是此控件的某个边距对目标控件的某个边距

常用属性
注意事项：正常情况下针对于某个控件要有两个约束方向才行

	layout_constraintBottom_toBottomOf="parent" 控件的底部对齐目标控件的底部
    layout_constraintLeft_toLeftOf="parent" 控件左边对齐目标控件左边
    layout_ConstraintRight_toRightOf="parent" 控件右边对齐目标控件右边
    layout_ConstaraintTop_toTopOf="parent" 控件顶部对齐目标控件顶部
    layout_Constarainttop_toBottomOf="parent"控件顶部对齐目标控件底部
    layout_ConstaraintBotton_toTopOf="parent"控件底部对齐目标控件顶部
    layout_ConstaraintLeft_toRightOf="parent"控件左侧对齐目标控件右侧
    layout_ConstaraintRight_toLeftOf="parent"控件右侧对齐目标控件左侧
    layout_ConstaraintStart_toEndOf="parent"控件开始到结束的位置
    layout_constraintBaseline_toBaselineOf 文本基线对齐 比如两个TextView的高度不一样，但是又希望他们文本对齐，这个时候就可以使用layout_constraintBaseline_toBaselineOf

三、角度定位

代码如下：

		app:layout_constraintCircle="控件名" 针对于哪个控件做运动
        app:layout_constraintCircleAngle="120"  角度
        app:layout_constraintCircleRadius="150dp"   距离

举个栗子：

    <TextView
        android:id="@+id/TextView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

    <TextView
        android:id="@+id/TextView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintCircle="@+id/TextView1"
        app:layout_constraintCircleAngle="120"
        app:layout_constraintCircleRadius="150dp" />

上面这个例子指的是TextView2的中心在TextView1的中心的120度，距离为150dp，效果如下

在这里插入图片描述

四、边距

常用代码：

android:layout_marginStart 距离开始位置多少dp 
android:layout_marginEnd 距离结束位置多少dp
android:layout_marginLeft 控件距离左侧多少dp
android:layout_marginTop 控件距离顶部多少dp
android:layout_marginRight 控件距离右侧多少dp
android:layout_marginBottom 控件距离底部多少dp

看起来跟别的布局没有什么差别，但实际上控件在ConstraintLayout里面要实现margin，必须先约束该控件在ConstraintLayout里的位置，举个例子：

<android.support.constraint.ConstraintLayout 
    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:layout_marginLeft="10dp"
        android:layout_marginTop="10dp" />

</android.support.constraint.ConstraintLayout>

如果在别的布局里，TextView1的位置应该是距离边框的左边和上面有一个10dp的边距，但是在ConstraintLayout中是不生效的，因为没有约束TextView1在布局里的位置。简而言之，需要把对应的控件位置约定好，这样margin就会生效。
注意！！！在使用margin的时候，要注意两点：
控件必须在布局里约束一个相对位置，margin只能大于等于0

五、偏移（bias）

 app:layout_constraintHorizontal_bias="0.3"  水平偏移
 app:layout_constraintVertical_bias="0.3"    垂直偏移

举个栗子：

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <Button
        android:text="btn1"
        android:layout_width="100dp"
        android:layout_height="50dp"
        android:id="@+id/btn_1"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintHorizontal_bias="0.3"
        />
</androidx.constraintlayout.widget.ConstraintLayout>

效果如下
在这里插入图片描述

这边bias=0.3的意思是，左边距离是左右总间距的百分之30
假如bias=1的话，控件将紧靠右边界
假如bias>1的话，控件将超出右边界
（垂直情况下bias的值是上边距占比）

六、尺寸约束

控件的尺寸可以通过四种不同方式指定：

使用指定的尺寸
使用wrap_content，让控件自己计算大小
当控件的高度或宽度为wrap_content时，可以使用下列属性来控制最大、最小的高度或宽度：

 android:minWidth 最小的宽度
 android:minHeight 最小的高度
 android:maxWidth 最大的宽度
 android:maxHeight 最大的高度

如果你的ConstraintLayout为1.1版本一下，只用这些属性要加上强制约束，

  app:constrainedWidth=”true”
  app:constrainedHeight=”true”

使用0dp(MATCH_CONSTRAINT)
官方不推荐在ConstraintLayout中使用match_parent，可以设置0dp(MATCH_CONSTRAINT)
配合约束代替match_parent,举个栗子
：

<Button
        android:text="btn1"
        android:layout_width="0dp"
        android:layout_height="50dp"
        android:id="@+id/btn_1"
        android:layout_marginLeft="100dp"
        app:layout_constrainedWidth="true"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintHorizontal_bias="0.3"
        />

宽度设置为0dp，左右两边约束parent的左右两边，并设置左边距为100dp,效果如下：
在这里插入图片描述

七、宽高比

当宽或高至少有一个尺寸被设置为0dp时，可以通过属性layout_constraintDimensionRatio设置宽高比，举个栗子：

 <Button
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="btn1"
        app:layout_constraintDimensionRatio="1:1"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"/>

宽设置为0dp,宽高比设置为1:1，这个时候btn1是一个正方形，效果如下:
在这里插入图片描述除此之外，在设置宽高比的值的时候，还可以在前面加W或H，分别指定宽度或高度限制。例如：

app:layout_constraintDimensionRatio="H,2:3"指的是 高:宽=2:3   更： 已知宽求高，以宽为基准求高
app:layout_constraintDimensionRatio="W,2:3"指的是 宽:高=2:3   更：已知高求宽，以高为基准求宽

八、链式约束（Chains）

如果两个或以上控件通过下图的方式约束在一起，就可以认为他们是一条链（图为横向的链，纵向同理）。
在这里插入图片描述
举个栗子：

   <Button
        android:id="@+id/btn1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="btn1"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toLeftOf="@id/btn2" />

    <Button
        android:id="@+id/btn2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="btn2"
        app:layout_constraintLeft_toRightOf="@id/btn1"
        app:layout_constraintRight_toLeftOf="@id/btn3" />

    <Button
        android:id="@+id/btn3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="btn3"
        app:layout_constraintLeft_toRightOf="@id/btn2"
        app:layout_constraintRight_toRightOf="parent" />

三个Button相互约束，两端两个TextView分别与parent约束，成为一条链，效果如下：
在这里插入图片描述
一条链的第一个控件是这条链的链头，我们可以在链头中设置layout_constraintHorizontal_chainStyle来改变整条链的样式。chains提供了3种样式，分别是：

spread   展开元素（默认）
spread_inside  展开元素，但链的两端贴紧parent
packed  链的元素将被打包在一起

										如图:

在这里插入图片描述

上面的例子创建了一个样式链,除了样式链外，还可以创建一个权重链。如果我们把宽度都设置为0dp，这个时候可以在每个Button中设置横向权重
layout_constraintHorizontal_weight(constraintertical为纵向)来创建一个权重链，如下所示：

  <Button
        android:id="@+id/btn1"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="btn1"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toLeftOf="@id/btn2" 
        app:layout_constraintHorizontal_weight="2"/>

    <Button
        android:id="@+id/btn2"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="btn2"
        app:layout_constraintLeft_toRightOf="@id/btn1"
        app:layout_constraintRight_toLeftOf="@id/btn3"
        app:layout_constraintHorizontal_weight="3"/>

    <Button
        android:id="@+id/btn3"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="btn3"
        app:layout_constraintHorizontal_weight="4"
        app:layout_constraintLeft_toRightOf="@id/btn2"
        app:layout_constraintRight_toRightOf="parent" />

效果如下：
在这里插入图片描述

九、辅助工具（Optimizer）

当我们使用MATCH_CONSTRAINT时，ConstraintLayout将对控件进行2次测量，ConstraintLayout在1.1中可以通过设置layout_optimizationLevel进行优化，可设置的有：

none:无优化
standard:仅优化直接约束和屏障约束（默认）
direct:优化直接约束
barrier:优化屏障约束
chain:优化链约束
dimensions:优化尺寸测量

十、屏障（Barrier）

在这里插入图片描述
假设有3个控件ABC,C在AB的右边，但是AB的宽是不固定的，这个时候C无论约束在A的右边或者B的右边都不对。当出现这种情况可以用Barrier来解决。Barrier可以在多个控件的一侧建立一个屏障，如下所示：
这个时候C只要约束在Barrier的右边就可以了，代码如下:

  <Button
      android:text="btn1"
      android:layout_width="50dp"
      android:layout_height="50dp"
      android:id="@+id/btn_1" />
    <Button
        android:text="btn2"
        app:layout_constraintTop_toBottomOf="@id/btn_1"
        android:layout_width="100dp"
        android:layout_height="50dp"
        android:id="@+id/btn_2"/>
    <androidx.constraintlayout.widget.Barrier
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/barrier"
        app:barrierDirection="right"
        app:constraint_referenced_ids="btn_1,btn_2"/>
    <Button
        android:text="btn3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/btn_3"
        app:layout_constraintLeft_toRightOf="@id/barrier"/>

效果如下:
在这里插入图片描述

app:barrierDirection 屏障所在的位置,可设置的值有:bottom、end、left、right、start、top
app:constraint_referenced_ids 屏障引用的空间，可设置多个 用 , 隔开

十一、分组（Group）

Group可以把多个控件归为一组，方便隐藏或显示一组控件，举个栗子：

<Button
      android:text="btn1"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:id="@+id/btn_1"
      app:layout_constraintLeft_toLeftOf="parent"
      app:layout_constraintRight_toLeftOf="@id/btn_2"
      app:layout_constraintTop_toTopOf="parent"
      />
    <Button
        app:layout_constraintTop_toTopOf="parent"
        android:text="btn2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/btn_2"
        app:layout_constraintLeft_toRightOf="@id/btn_1"
        app:layout_constraintRight_toLeftOf="@id/btn_3"/>

    <Button
        app:layout_constraintTop_toTopOf="parent"
        android:text="btn3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/btn_3"
        app:layout_constraintLeft_toRightOf="@id/btn_2"
        app:layout_constraintRight_toRightOf="parent"/>
  <androidx.constraintlayout.widget.Group
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
    android:visibility="invisible"
    app:constraint_referenced_ids="btn_1,btn_3"/>

效果如下:
在这里插入图片描述
比如在做一些显示隐藏的时候，就可以合理的运用Group来显示隐藏，方便了许多。

十二、占位符(Placeholder)

Placeholder指的是占位符。在Placeholder中可使用setContent()设置另一个控件的id，使这个控件移动到占位符的位置。举个栗子：

<android.support.constraint.Placeholder
        android:id="@+id/placeholder"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:content="@+id/textview"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/textview"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#cccccc"
        android:padding="16dp"
        android:text="TextView"
        android:textColor="#000000"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

新建一个Placeholder约束在屏幕的左上角，新建一个TextView约束在屏幕的右上角，在Placeholder中设置 app:content="@+id/textview"，这时TextView会跑到屏幕的左上角。效果如下：

在这里插入图片描述

十三、辅助线(Guideline)

Guildline像辅助线一样，在预览的时候帮助你完成布局（不会显示在界面上）
Guildline的主要属性:

android:orientation 垂直vertical，水平horizontal
layout_constraintGuide_begin 开始位置
layout_constraintGuide_end 结束位置
layout_constraintGuide_percent 距离顶部的百分比(orientation = horizontal时则为距离左边)

举个栗子:

    <android.support.constraint.Guideline
        android:id="@+id/guideline1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_begin="50dp" />

    <android.support.constraint.Guideline
        android:id="@+id/guideline2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintGuide_percent="0.5" />

guideline1为水平辅助线，开始位置是距离顶部50dp，guideline2位垂直辅助线，开始位置为屏幕宽的0.5(中点位置)，效果如下：
在这里插入图片描述

十四、层(Layer)

把一些组件组合在一起，当做一个图层，改图层自动计算边界，也是View的子类，但是功能不是完整的。
比如有这样一个场景：如果一个页面里面有部分View需要加个背景，使用Layer引用整几个View，然后给Layer设置背景就可以了。如果不用Layer，只能加几个ViewGroup包住这几个View了，但是这样会增加view的层级，不利于性能。
偷懒ing…

十五、流(Flow)

把一组控件按添加的顺序一个接在一个后面，有横向、竖向两个方向，他是一个View但是比其他辅助类有更多的功能。
他有三个属性分别是：

app:flow_wrapMode="wrap none" ：简单的把constraint_referenced_ids里面的元素组成chain,即使空间不够

举个栗子：
在这里插入图片描述

这是第二个属性:

app:flow_wrapMode="wrap chain" ：根据空间的大小和元素的大小组成一条或者多条chain

在这里插入图片描述

这是第三个属性：

app:flow_wrapMode="wrap aligned" ：跟wrap chain类似，但是会对齐

在这里插入图片描述
这次举个大大滴栗子:


    <androidx.constraintlayout.helper.widget.Flow
        android:id="@+id/flow"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/teal_200"
        android:padding="20dp"
        app:constraint_referenced_ids="q,w,e,r,t,y,u,i,o,p,a,s,d,f"
        app:flow_horizontalGap="10dp"
        app:flow_maxElementsWrap="3"
        app:flow_verticalGap="10dp"
        app:flow_wrapMode="aligned"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent" />

    <Button
        android:id="@+id/q"
        android:layout_width="100dp"
        android:layout_height="50dp"
        android:text="1" />

    <Button
        android:id="@+id/w"
        android:layout_width="100dp"
        android:layout_height="50dp"
        android:text="2" />

    <Button
        android:id="@+id/e"
        android:layout_width="100dp"
        android:layout_height="50dp"
        android:text="3" />

    <Button
        android:id="@+id/r"
        android:layout_width="100dp"
        android:layout_height="50dp"
        android:text="4" />

    <Button
        android:id="@+id/t"
        android:layout_width="100dp"
        android:layout_height="50dp"
        android:text="5" />

    <Button
        android:id="@+id/y"
        android:layout_width="100dp"
        android:layout_height="50dp"
        android:text="6" />

    <Button
        android:id="@+id/u"
        android:layout_width="100dp"
        android:layout_height="50dp"
        android:text="7" />

    <Button
        android:id="@+id/i"
        android:layout_width="100dp"
        android:layout_height="50dp"
        android:text="8" />

    <Button
        android:id="@+id/o"
        android:layout_width="100dp"
        android:layout_height="50dp"
        android:text="9" />

    <Button
        android:id="@+id/p"
        android:layout_width="100dp"
        android:layout_height="50dp"
        android:text="0" />

    <Button
        android:id="@+id/a"
        android:layout_width="100dp"
        android:layout_height="50dp"
        android:text="/" />

    <Button
        android:id="@+id/s"
        android:layout_width="100dp"
        android:layout_height="50dp"
        android:text="*" />

    <Button
        android:id="@+id/d"
        android:layout_width="100dp"
        android:layout_height="50dp"
        android:text="." />

    <Button
        android:id="@+id/f"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Compute"
        app:layout_constraintEnd_toEndOf="@+id/s"
        app:layout_constraintStart_toStartOf="@id/a"
        tools:layout_editor_absoluteY="662dp" />

算了还是在偷懒，哎》。。
在这里插入图片描述

Kevin，

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
写给自己，使用ConstraintLayout进行布局。

系列文章目录文章目录系列文章目录前言一、ConstraintLayout(约束布局)是什么？二、相对定位三、角度定位四、边距五、偏移（bias）六、尺寸约束七、宽高比八、链式约束（Chains）九、辅助工具（Optimizer）十、屏障（Barrier）十一、分组（Group）十二、占位符(Placeholder)十三、辅助线(Guideline)十四、层(Layer)十五、流(Flow)前言提示：这里可以添加本文要记录的大概内容：例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多
复制链接

扫一扫