百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 编程网 > 正文

熟悉又陌生的ConstraintLayout布局

yuyutoo 2024-10-19 11:08 7 浏览 0 评论

中文名:约束布局
出生日期:2016年

  • 为什么熟悉?
    ConstraintLayout是近几年I/O大会力推功能之一,从Android Studio 2.3开始新建布局默认就是它,而且基本上每一次Studio升级日志里都能见到它的身影,所谓没吃过猪肉也肯定见过猪跑。
  • 为什么陌生?
    约束布局可以说是有史以来功能最复杂的布局了,很多人可能没有沉下来心来好好了解一下这个布局,新建布局后第一步就是刷刷地删掉默认根布局,默默写上我们熟悉的LinearLayout和RelativeLayout;或者没有好的场景应用到实际项目中,我们的新版本完全搬到RN上来了,根本不可能应用到它。

1. 介绍

ConstraintLayout可以说是LinearLayout、FrameLayout、RelativeLayout等等传统布局的集大成者,天生就是消灭嵌套布局。相比RelativeLayout的组件间的关系,ConstraintLayout将这层关系更升华了,通过更加灵活的约束,让布局更加扁平化,往往使用一层布局就能实现很多复杂需求。
底层原理上,ConstraintLayout使用了和iOS的Auto Layout相同的算法火鸡算法 Cassowary,让其具备复杂功能的同时比传统布局更加高效。

2. 使用

ConstraintLayout配合Android Studio食用更佳。我们知道,Studio一直针对ConstraintLayout作改进,大部分是优化ConstraintLayout的可视化,尤其是蓝图,也就是下面图中右边的蓝色部分:

以前的线性布局、关系布局啥的都比较不适合用设计面板来拖拽,而约束布局恰恰相反,用蓝图能更清楚的理清组件间的关系,并且通过拖拽和指定属性的方式来建立复杂关系代码反而不好写。

当然从实践来看,最好还是将代码和可视化结合起来,先用代码写个View,再用拖拽的方式建立大致的约束关系,再回到代码进行微调。拖拽的方式生成的代码比较乱,界面元素较多时很容易拖拽出错,而且很容易拖出很多零散的属性值出来,需要到代码上进行比较的调整和删减。



如上图,选中某个组件就可以查看该组件的约束关系,比如这个ImageView,波浪线就是表示图片的left、top、bottom关联到根布局且边距为8dp,bottom关联到TextView上方并且间距50dp(这里TextView的约束关系是根布局居中),layout_width和layout_height都是0,表示大小充满约束空间MATCH_CONSTRAINT(类似一般布局的MATCH_PARENT)。因此这张图片最终显示将显示在屏幕的上半部分。

常用属性

相对位置


和确定组件位置相关常用的就是下面13个属性(也就是蓝图中的波浪线),见名知意,和RelativeLayout的功能基本重叠,这里也不细介绍了。可以自己妥妥拽拽试试,简单场景足够。

  • 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_constraintBaseline_toBaselineOf
  • layout_constraintStart_toEndOf
  • layout_constraintStart_toStartOf
  • layout_constraintEnd_toStartOf
  • layout_constraintEnd_toEndOf

上图的ImageView对应的代码就是

<ImageView
          tools:src="@mipmap/ic_launcher"
          android:layout_width="0dp"
          android:layout_height="0dp"
          app:layout_constraintEnd_toEndOf="parent"
          android:layout_marginEnd="8dp"
          app:layout_constraintStart_toStartOf="parent"
          android:layout_marginStart="8dp"
          android:layout_marginBottom="50dp"
          app:layout_constraintBottom_toTopOf="@+id/textView"
          android:layout_marginTop="8dp"
          app:layout_constraintTop_toTopOf="parent"/>

这个相对位置有个比较有意思的应用,比如说有这么个需求,如下图,文本组件要放置在图片组件的中间。

可以这么实现,将TextView四边分别约束到ImageView的四边上即可,那么不管ImageView显示在哪,这个TextView永远跟随在其中间。代码如下:

<ImageView
          android:id="@+id/img"
          android:src="@mipmap/ic_launcher"
          android:layout_width="0dp"
          android:layout_height="0dp"
          app:layout_constraintDimensionRatio="16:9"
          app:layout_constraintEnd_toEndOf="parent"
          android:layout_marginEnd="8dp"
          app:layout_constraintStart_toStartOf="parent"
          android:layout_marginStart="8dp"
          android:layout_marginBottom="8dp"
          app:layout_constraintBottom_toBottomOf="parent"
          android:layout_marginTop="8dp"
          app:layout_constraintTop_toTopOf="parent"/>
<TextView
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:text="Hello World!"
          android:textSize="18sp"
          android:background="@color/colorAccent"
          app:layout_constraintBottom_toBottomOf="@id/img"
          app:layout_constraintLeft_toLeftOf="@id/img"
          app:layout_constraintRight_toRightOf="@id/img"
          app:layout_constraintTop_toTopOf="@id/img"
          android:id="@+id/textView"/>



如果不使用ConstraintLayout,这个需求可能就要增加一个RelativeLayout套在ImageView和TextView来实现了。
当上下或者左边都是约束后,默认这个组件就是横向或者纵向居中了。有时候我们要的不是居中,而且以一定比例偏离,比如水平居中,垂直方向偏下,那么可以通过下面两个属性设置限制位置比例,取值0~1.0:

  • layout_constraintHorizontal_bias 水平方向的比例
  • layout_constraintVertical_bias 垂直方向比例

如下是Vertical=0.8的效果:


圆形定位


通过圆形定位可以以一定的角度和距离确定位置关系,这是RelativeLayout所没有的。


相关属性:

  • layout_constraintCircle:参照控件的id
  • layout_constraintCircleRadius:两个控件中心连线的距离
  • layout_constraintCircleAngle:当前View的中心与目标View的中心的连线与Y轴方向的夹角(取值:0~360)

宽高尺寸


在ConstraintLayout中推荐的LayoutParams值有

  • 具体dp
  • WRAP_CONTENT
  • 0dp,表示MATCH_CONSTRAINT,这里没有MATCH_PARENT啥事

0dp是一个比较有意思的值,可以类比LinearLayout的0dp+weight组合,但是功能更加丰富。
在这里0dp默认是weight=1的效果,可以通过下面的6个属性进一步控制大小:

  • layout_constraintWidth_min
  • layout_constraintHeight_min
  • layout_constraintWidth_max
  • layout_constraintHeight_max
  • layout_constraintWidth_percent
  • layout_constraintHeight_percent

这6个属性都让人忍不住点赞,宽高区间以及占被约束对象的百分比一应俱全。

宽高比


当宽或高其中一个设置为0dp时,可以通过layout_constraintDimensionRatio来设置宽高比。
这是一个很赞的功能,很多实际场景很需要这个,比如在一些流式布局场景中,往往需要以固定的比例显示item;或者页面的横幅等等,这个都要求不受全面屏等形形色色的屏幕比例影响。
举例,一个横幅(ImageView)使用以下属性:

<ImageView
          android:id="@+id/img"
          android:src="@mipmap/ic_launcher"
          android:layout_width="0dp"
          android:layout_height="0dp"
          android:scaleType="fitXY"
          app:layout_constraintDimensionRatio="16:9"
          app:layout_constraintEnd_toEndOf="parent"
          android:layout_marginEnd="8dp"
          app:layout_constraintStart_toStartOf="parent"
          android:layout_marginStart="8dp"
          android:layout_marginBottom="8dp"
          android:layout_marginTop="8dp"
          app:layout_constraintTop_toTopOf="parent"
          />

那么这个横幅会页面上方保持16:9的比例显示,并且横向填充满屏幕。


当宽高都为0dp时,layout_constraintDimensionRatio还可以加上W或者H。
比如:
W,1:2表示宽=2,高=1,即H:W = 1:2;
H,1:2表示高=2,宽=1,即W:H = 1:2。
不使用ConstraintLayout的情况下要实现类似功能,恐怕就不得不在Java代码中重写onMeasure等方式来实现了。

边距


之所以要说边距,是因为在ConstraintLayout中,layout_margin(left|top|right|bottom)属性的含义有所变化,它仅在该View该方向上约束关系的情况下才有效,当它失去了约束,其边距便不会生效。
此外还有一组GONE Margins,仅当被约束的目标对象的可见性为View.GONE才生效,

  • layout_goneMarginStart
  • layout_goneMarginEnd
  • layout_goneMarginLeft
  • layout_goneMarginTop
  • layout_goneMarginRight
  • layout_goneMarginBottom


链其实很好理解,类似于LinearLayout,将一组View左右互相约束,就组成一组横向排列(纵向同理)


如果仅仅是线性排列,那就没什么特别的了。
举个例子,下面是三个TextView,和上图一样水平方向左右互联,垂直方向靠近容器底部。

<TextView
          android:id="@+id/t1"
          android:text="text1"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          app:layout_constraintStart_toStartOf="parent"
          app:layout_constraintBottom_toBottomOf="parent"
          app:layout_constraintEnd_toStartOf="@id/t2"
          />
  <TextView
          android:id="@+id/t2"
          android:text="text2"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          app:layout_constraintBottom_toBottomOf="parent"
          app:layout_constraintStart_toEndOf="@id/t1"
          app:layout_constraintEnd_toStartOf="@id/t3"
          />
  <TextView
          android:id="@+id/t3"
          android:text="text3"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          app:layout_constraintBottom_toBottomOf="parent"
          app:layout_constraintStart_toEndOf="@id/t2"
          app:layout_constraintEnd_toEndOf="parent"
          />

看看实际结果(底部):


可以看出三个TextViewmore就是平分的,也就是LinearLayout中weight相同的情况。此外我们可以对链中第一个View也就是链头设置layout_constraintHorizontal_chainStyle属性改变调整居中的类型,值有三种:

  • CHAIN_SPREAD —— 展开元素 (默认);
  • CHAIN_SPREAD_INSIDE —— 展开元素,但链的两端贴近parent;
  • CHAIN_PACKED —— 链的元素将被打包在一起

spread就是默认样式,三者分别在四等分线上(一条线段三刀切成均分四段),兄弟关系相敬如宾;


spread_inside效果如图,三者可以理解为包含首尾的二等分点,兄弟关系最疏远;

packed效果如果,三者紧贴一起,基情满满。


怀念LinearLayout的weight?也有的,通过给每个控件宽度设置为0dp,就可以通过layout_constraintHorizontal_weight属性控制权重了。

辅助工具


所谓辅助工具,就是指一些只提供功能但实际看不见(类似Space)的约束目标,比如中轴线之类的。

Barrier屏障



假设有3个控件ABC,C在AB的右边,但是AB的宽是不固定的,这个时候C无论约束在A的右边或者B的右边都不对。

当出现这种情况可以用Barrier来解决。Barrier可以在多个控件的一侧建立一个屏障,如下所示:


这个时候C只要约束在Barrier的右边就可以了,代码如下:

<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_constraintTop_toBottomOf="@+id/TextView1" />
<android.support.constraint.Barrier
      android:id="@+id/barrier"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      app:barrierDirection="right"
      app:constraint_referenced_ids="TextView1,TextView2" />
<TextView
      android:id="@+id/TextView3"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      app:layout_constraintLeft_toRightOf="@+id/barrier" />

Group分组


Group可以把多个控件归为一组,方便隐藏或显示一组控件,举个例子:

<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_constraintLeft_toRightOf="@+id/TextView1" />
<TextView
      android:id="@+id/TextView3"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      app:layout_constraintLeft_toRightOf="@id/TextView2" />


现在有3个并排的TextView,用Group把TextView1和TextView3归为一组,再设置这组控件的可见性,如下所示:

<android.support.constraint.Group
      android:id="@+id/group"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:visibility="invisible"
      app:constraint_referenced_ids="TextView1,TextView3" />

效果如下:


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会跑到屏幕的左上角。效果如下:


我理解的占位符的使用场景应该是:

  1. 整理框架结构,布局隔离
    因为ConstraintLayout很扁平,可能xml文件杂糅了很多组件,尤其是可视化拖拽出来的控件,没有固定的顺序,很难拎清页面整个的主体结构。
    那么,我们可以单独写一个xml文件,里面就只有页面整体的结构,比如横幅、列表、tab栏等等,都用PlaceHolder占坑,而具体的模块控件则在各自的xml上设计,二者通过contentId关联。通过include把placeHolder文件merge进来,组成一个完整页面。
  2. 代码动态控制控件位置
    如下动画,在顶部横幅下方放置了一个PlaceHolder,然后根据业务逻辑在tab页进入不同模式后动态调用PlaceHolder#setContentId方法改变实际的View。(图中通过TransitionManager增加了过度动画)


Guideline 辅助线


辅助线就像设计图里面的网格线,辅助组件定位,最终不可见,常用的辅助线场景比如中轴线,组件可以与中轴线建立约束关系。
辅助线分为横向和纵向两种,通过orientation指定,有horizontal和vertical两种
然后通过下面3个属性之一来确定位置:

  • layout_constraintGuide_percent 按比例确定位置,取值0~1.0
  • layout_constraintGuide_begin 距离左边(或上边)的距离,dp值
  • layout_constraintGuide_end 距离右边(或下边)的距离,dp值
    如下代码就是分别定义垂直和水平方向的中轴线,percent=0.5:
<android.support.constraint.Guideline
          android:id="@+id/guideline1"
          android:orientation="vertical"
          app:layout_constraintGuide_percent="0.5"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"/>
  <android.support.constraint.Guideline
          android:id="@+id/guideline2"
          android:orientation="horizontal"
          app:layout_constraintGuide_percent="0.5"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"/>

有了这些辅助线,我们就可以做一些更有趣的布局了。
比如下图红框中的两个按钮,两个一起水平居中。


看起来非常简单的需求,但是以前要实现这个布局可不简单,我们需要把这两个按钮放到一个Horizontal的LinearLayout里,再让这个LinearLayout在RelativeLayout的底部居中。
现在用中轴线来实现,代码如下:

<Button
          android:text="登录"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:id="@+id/button"
          app:layout_constraintEnd_toStartOf="@+id/guideline1"
          android:layout_marginEnd="10dp"
          android:layout_marginBottom="50dp"
          app:layout_constraintBottom_toBottomOf="parent"
          />
  <Button
          android:text="注册"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:id="@+id/button2"
          app:layout_constraintStart_toStartOf="@+id/guideline1"
          android:layout_marginStart="10dp"
          android:layout_marginBottom="50dp"
          app:layout_constraintBottom_toBottomOf="parent"
          tools:text="注册"/>

guideline1就是上面提到的垂直中轴线,我们只要和中轴线建立约束即可。

相关推荐

Mysql和Oracle实现序列自增(oracle创建序列的sql)

Mysql和Oracle实现序列自增/*ORACLE设置自增序列oracle本身不支持如mysql的AUTO_INCREMENT自增方式,我们可以用序列加触发器的形式实现,假如有一个表T_WORKM...

关于Oracle数据库12c 新特性总结(oracle数据库19c与12c)

概述今天主要简单介绍一下Oracle12c的一些新特性,仅供参考。参考:http://docs.oracle.com/database/121/NEWFT/chapter12102.htm#NEWFT...

MySQL CREATE TABLE 简单设计模板交流

推荐用MySQL8.0(2018/4/19发布,开发者说同比5.7快2倍)或同类型以上版本....

mysql学习9:创建数据库(mysql5.5创建数据库)

前言:我也是在学习过程中,不对的地方请谅解showdatabases;#查看数据库表createdatabasename...

MySQL面试题-CREATE TABLE AS 与CREATE TABLE LIKE的区别

执行"CREATETABLE新表ASSELECT*FROM原表;"后,新表与原表的字段一致,但主键、索引不会复制到新表,会把原表的表记录复制到新表。...

Nike Dunk High Volt 和 Bright Spruce 预计将于 12 月推出

在街上看到的PandaDunk的超载可能让一些球鞋迷们望而却步,但Dunk的浪潮仍然强劲,看不到尽头。我们看到的很多版本都是为女性和儿童制作的,这种新配色为后者引入了一种令人耳目一新的新选择,而...

美国多功能舰载雷达及美国海军舰载多功能雷达系统技术介绍

多功能雷达AN/SPY-1的特性和技术能力,该雷达已经在美国海军服役了30多年,其修改-AN/SPY-1A、AN/SPY-1B(V)、AN/SPY-1D、AN/SPY-1D(V),以及雷神...

汽车音响怎么玩,安装技术知识(汽车音响怎么玩,安装技术知识视频)

全面分析汽车音响使用或安装技术常识一:主机是大多数人最熟习的音响器材,有关主机的各种性能及规格,也是耳熟能详的事,以下是一些在使用或安装时,比较需要注意的事项:LOUDNESS:几年前的主机,此按...

【推荐】ProAc Response系列扬声器逐个看

有考牌(公认好声音)扬声器之称ProAcTablette小音箱,相信不少音响发烧友都曾经,或者现在依然持有,正当大家逐渐掌握Tablette的摆位设定与器材配搭之后,下一步就会考虑升级至表现更全...

#本站首晒# 漂洋过海来看你 — BLACK&amp;DECKER 百得 BDH2000L无绳吸尘器 开箱

作者:初吻给了烟sco混迹张大妈时日不短了,手没少剁。家里有了汪星人,吸尘器使用频率相当高,偶尔零星打扫用卧式的实在麻烦(汪星人:你这分明是找借口,我掉毛是满屋子都有,铲屎君都是用卧式满屋子吸的,你...

专题|一个品牌一件产品(英国篇)之Quested(罗杰之声)

Quested(罗杰之声)代表产品:Q212FS品牌介绍Quested(罗杰之声)是录音监听领域的传奇品牌,由英国录音师RogerQuested于1985年创立。在成立Quested之前,Roger...

常用半导体中英对照表(建议收藏)(半导体英文术语)

作为一个源自国外的技术,半导体产业涉及许多英文术语。加之从业者很多都有海外经历或习惯于用英文表达相关技术和工艺节点,这就导致许多英文术语翻译成中文后,仍有不少人照应不上或不知如何翻译。为此,我们整理了...

Fyne Audio F502SP 2.5音路低音反射式落地音箱评测

FyneAudio的F500系列,有新成员了!不过,新成员不是新的款式,却是根据原有款式提出特别版。特别版产品在原有型号后标注了SP字样,意思是SpecialProduction。Fyne一共推出...

有哪些免费的内存数据库(In-Memory Database)

以下是一些常见的免费的内存数据库:1.Redis:Redis是一个开源的内存数据库,它支持多种数据结构,如字符串、哈希表、列表、集合和有序集合。Redis提供了快速的读写操作,并且支持持久化数据到磁...

RazorSQL Mac版(SQL数据库查询工具)

RazorSQLMac特别版是一款看似简单实则功能非常出色的SQL数据库查询、编辑、浏览和管理工具。RazorSQLformac特别版可以帮你管理多个数据库,支持主流的30多种数据库,包括Ca...

取消回复欢迎 发表评论: