Android 中的 ConstraintLayout

一、作用

ConstraintLayout 是 Android Studio 2.2中新增的功能之一。support 库中的内容,可以向前兼容。

  • 非常适合使用可视化的方式来编写界面,但并不太适合使用XML的方式来进行编写,但还是可以用 XML 滴
  • 可以有效地解决布局嵌套过多的问题
    有点类似于RelativeLayout,但远比RelativeLayout要更强大。

二、概念

对 ConstraintLayout 的学习不在于拖拽,而在于手写布局。

1. ConstraintLayout 的相关属性

(1)相对定位属性

  • 与另一控件进行约束

  • 与父控件进行约束

  • layout_constraintLfet_toRightof="@id/xx"
    控制控件的相对位置

在当控件有自己设置的宽度,例如warp_content、固定值时,我们为控件添加的都是约束“Constraint”,这个约束有点像橡皮筋一样会拉这个控件,但是并不会改变控件的尺寸(RL很明显不是这样的)

(2)margin
设置控件边缘相对另一控件边缘的距离。约束布局中对应间距生效需要有相应的约束条件,需要给控件设置左间距,那该控件它的 constraint<Left/Start>_toXXXOf 一定需要,否则间距无法生效

与其他控件不同的是新增了一系列goneMargin属性,用来控制当约束目标可见性为 GONE 的时候,设置不同的间距值。

在动画中,A 不可见的时候,需要保证 B 的布局位置不变,这个时候设置 goneMarginStart 的值为 A 的宽度加上 B 的 marginStart ,就可以满足该需求。

(3)居中和bias
下面的代码会使得 TextView 居中,为 TextView 添加 start、end 方向上的约束,那相当于 start、end 两边有相同的力拉着 TextView,使他左右居中。

<?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=".MainActivity">
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="14dp"
        android:text="@string/app_name"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

若不想居中,让其在方向上(水平或垂直)发生偏移,可以使用bias属性。

app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent" 
app:layout_constraintHorizontal_bias="0.3"

(4)控件的尺寸

  • 16dp
  • wrap_content
  • 0dp表示match_constraint
    根据约束规则指定宽高

想实现占满屏幕的效果就用layout_width="0dp"实现
在 ConstraintLayout 中不要使用match_parent

app:layout_constraintDimensionRatio='16:6'宽高比

app:layout_constraintHorizontal_weight设置权重

wrap_content 下的强制约束

在 1.1 版本之前,约束布局对于控件的 WRAP_CONTENT 是不会限制它的结果大小。所以这在你希望使用 WRAP_CONTENT 但仍然需要强制约束条件来限制它的结果,就可能需要添加以下属性:

app:layout_constrainedWidth="true|false"
app:layout_constrainedHeight="true|false"

文字超出约束边界

(5)链条Chain
同一方向(水平或垂直)上的多个组件组成一个类似群组

  • 创建链条
    多个控件相互在同一个方向上双向引用就可以创建一个 Chain。

  • Chain Style


(6)辅助布局

  • GuideLine

该布局是不会显示到界面上的

①确定辅助线是横向的还是纵向的
android:orientation= vertical或horizontal

② 通过以下三个属性之一来确定辅助线的位置
layout_constraintGuide_begin=="30dp"`` // 距离顶部 30dplayout_constraintGiude_end="30dp"// 距离底部 30dplayout_constraintGuide_percent="0.8"`// 距离顶部80%的位置

vertivcal
percent=0.8
horizontal
percent=0.8
  • Barrier

  • Group
    控制一组控件的可见性。

三、使用

1. 一边固定,中间宽度可变,另一边跟随中间尾部

重点是中间 TextView 设置constraintWidth=true属性。

2. 根据某一 View 的高度,使一组 View 居中

右边的图片和下方的文字组成 chain,chainStyle="packed",让它们紧靠在一起,然后右边图片的top与左边大图的top对齐, 右边文字的bottom和左边图片的bottom对齐。

3. ImageView 图片低端和文字低端对齐

ImageView图片和TextView文字的底部对齐

<ImageView
android:id="@+id/img"
android:baselineAlignBottom="true" >
<TextView
app:layout_constraintBaseline_toBaselineOf="@id/img">

四、注意

1. 折腾了将近 4 个小时

灵光乍现,终于解决了....

约束布局chain链:No resource found that matches the given name找不到id

2. 代码中修改 ConstraintLayout 布局

ConstraintLayout 采用代码方式布局用法简介
大佬教程-赞赞赞

主要用到的类包括

  • ConstrainLayout
  • ConstraintLayout.LayoutParams
  • ConstraintSet
  • GuideLine

参考文献

强推:即刻团队
拒绝拖拽 使用ConstraintLayout优化你的布局吧
Google官方文档
ConstraintLayout在项目中实践与总结
使用ConstraintLayout(约束布局)构建响应式UI
再学一次ConstraintLayout 一些新特性
google-developer

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 218,386评论 6 506
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 93,142评论 3 394
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 164,704评论 0 353
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,702评论 1 294
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,716评论 6 392
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,573评论 1 305
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,314评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,230评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,680评论 1 314
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,873评论 3 336
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,991评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,706评论 5 346
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,329评论 3 330
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,910评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,038评论 1 270
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,158评论 3 370
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,941评论 2 355

推荐阅读更多精彩内容