ConstraintLayout的使用

我自己使用了一段时间的ConstraintLayout,比起以前的布局模式发现真的是太好用了,完全可以使用Layout Editer通过拖拉方式完成一套复杂的布局,比起以前写xml效率高了很多.
目录
第一章
1,准备工作
2,基础知识
第二章
1,元素之间的约束
2,Pack Tool和Infer Tool
3,调整纵横比例
4,使用guideline进行相对约束
5,使用链,一体化多个元素

第一章

准备工作

你需要安装Android Studio 3.0
然后创建一个ConstraintLayout根布局的Layout文件


image.png

我们会看见创建一个ConstraintLayout根布局的xml


image.png

下面我切换到Design模式,拖一个ImageView看看是什么效果
image.png

基础知识

为什么叫它ConstraintLayout? 这里很重要的一个概念就是Constraint,View的摆放是受约束的,我们看看它是如何受到约束的.


demo1.gif

上面这张图展示了上下左右添加约束的方法。
我们可以看到右上角有一个标记指示器


image.png

这个标记指示器的作用主要是用来调整元素在它的父布局(这里就是ConstraintLayout的位置和Margin)下面说说几个元素的作用:
元素一:

这两个轴表示横向纵向位置百分比。
元素二:
这个表示上下左右的margin,注意这个是在横向纵向位置百分比的基础上的margin.
元素三:
元素大小模式,这种模式可以点击切换,有以下三种:


image.png

Match Constraints模式:意思是填充所有可用的空间,注意它和match_parent的区分,在ConstraintLayout中是没有match_parent这个参数的,当我们使用Match Constraints这种模式的时候它的layout_width和layout_height自动变成0dip.
image.png

Wrap Content模式:这个模式就是wrap_content,表示按照实际大小摆放.
image.png

Fixed模式:需要描述元素的宽度和高度,按照这个宽度和高度摆放.

第二章

元素之间的约束

下面来介绍以下元素和元素之间如何添加约束


demo2.gif

其实我们只需要按照图片上展示的简单的拖动连线就能够添加元素和元素之间的约束,图中展示了添加两个按钮的横向约束关系。有时候我们非常棘手的一个布局需求是想让如下图中的TextView和EditText的文字内容对齐,而不是控件对齐,这里我们就要用到一个基线约束(baseline constraint).


image.png

当鼠标停留再TextView上面会出现一个ad的按钮,点击它,会出现绿色的下划线,连接到另外一个元素,进行基线约束。
demo3.gif

下面再来看一种情况,有按钮1和按钮2,它们起初的约束关系见动画,注意按钮2的是底部约束的,当我为按钮2添加了基线约束后,按钮2的底部约束便消失了.


demo1.gif

Pack Tool和Infer Tool

下面来说说这两个工具有什么用,我们先说一下Pack Tool。编辑器上面的Tool Bar有一个


image.png

这就是Pack Tool,它用来干嘛?,下面来做个示范


demo2.gif

这个很容易理解它就是占用可用的区域。
Infer Tool又是什么呢?它其实是根据当前的摆放位置自动约束所有元素,
demo3.gif

动画里面可以看出3个按钮开始并没有任何约束关系,当我点击Infer Tool的时候自动帮我根据当前元素位置添加了约束关系.

调整纵横比例

一旦我们在一个元素上面把它的宽度或者高度设置成为Match Constraints模式就会出现如图所示的纵横比调整按钮,点击过后就可以调整纵横比.


image.png

demo1.gif

通过这个纵横比调整在不同屏幕大小的手机上面都能保持良好的显示效果.

使用guideline进行相对约束

下面来说说如何使用强大的guideline功能进行相对约束,该功能很强大,应该是会经常用到的功能.
例如我有以下一个需求,


image.png

我想使这两个ImageView以3:1的比例显示在不同分辨率的手机,做到多分辨率适配。按照以往的做法应该是使用LinearLayout的weight配置比例,但是目前我们用ConstraintLayout如何完成这个需求呢,那就要用到guideline功能了。


image.png

我们可以通过上面的ActionBar点击这个按钮去创建Guideline.
下面展示一下如何使用它去作为参照物,左右两张图可以相对它去设置约束。
demo1.gif

我选择的垂直的Guideline,注意刚添加这个Guideline的时候我点击了这条Line,使其切换成百分比模式,这样我们可以保证在不同手机上面它的位置是一样的。这条线的约束位置不同手机上面它的位置是一样的,用它约束的元素位置在不同分辨率的手机上也会保持相同.

使用链,一体化多个元素

最后我们来说说如何将多过元素是用链条使其成为一个元素组。


image.png

下面两个元素互相约束,使其成为一个组,当A元素移动,B元素也会跟着移动,A元素居中B元素也会居中,它们就是一个整体。下面来看看怎么让多个元素变成一组.


image.png

如上有两个按钮,我们之间选中它们,点击右键选中Center Vertically就能自动使它们成为一个组并且垂直居中。选中过后将会是这样:
image.png

可以看到两个按钮中间已经有一条链了,它们是一个组了.


image.png

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

推荐阅读更多精彩内容