官方自适应新布局ConstraintLayout

写在前面的话:

谷歌在2016年自己研发的类似于IOS约束的布局,可以很好的完成自定义的布局控件的适配,现如今2K甚至是4K屏的出现,导致很多手机应用的开发受到适配上的限制,但ConstraintLayout就是为简化手机适配,减少程序员使用dimens文件造成app体积增大以及程序员自己代码量的增多。现市面上的博文都是根据 “拖拉弹拽” 的方式来使用ConstraintLayout,而真正意义上的程序员是不需要鼠标进行操作的,所以本篇文章用通俗易懂的方式,列出代码相关的属性,来探究此布局的用法。

1、ConstraintLayout详解:

1.1、ConstrainLayout基本理解:
在日常开发过程中我们总会碰到一个名叫RelativeLayout布局,它就是我们ConstrainLayout理解的重大核心,我们可以就将ConstraintLayout理解为可自适应,多功能的RelativeLayout。
1.2、ConstrainLayout中,子view的布局方式:
在相对布局里面,我们经常做的事情就是使用这样的属性:“android:layout_alignParentXXX”,这里XXX有常见的bottom,top,left,right,分别配置子item对于RelativeLayout的里面的位置。而ConstrainLayout里面将此类型的属性升级为自带的“app:layout_constraintXXXtoXXX”属性,这里方便记录便自己录入了一个表格:

RelativeLayout与ConstraintLayout子控件对父控件相同功能的属性列举.png
根据这表格我们可以清楚的看到ConstraintLayout与RelativeLayout的相似性,我们完全可以用理解RelativeLayout的方式来理解我们的ConstraintLayout。

2、ConstraintLayout下子view属性详解:

这个详细可以参考谷歌官方API文档,这里贴上链接:https://developer.android.google.cn/reference/android/support/constraint/package-summary.html
这里博主简单的抽取其中比较重要以及经常使用的属性:
2.1、方位属性
从上面的四大属性的衍生,于是有以下图示:

基础view的边缘说明.png
根据view的边缘属性,我们在ConstraintLayout中我们两个子view的相关性如以下图示:
两子view在ContraintLayout中对应关系.png

2.2、子view坐标系
无论从哪个方面来说,坐标系是理解一个view在viewgroup上的一个比较准确的方式。说到这里,我们还记得LinearLayout的weightSum属性吗?它能很好的适配线性布局下的某个子控件,在ConstraintLayout中我们也有相类似的子view属性,来达到这样的布局适配效果,其展示方式如图所示:
子view坐标系建立.png
根据这样的属性,我们可以完全了解子View在ConstraintLayout里面所处的left与top权重,构成一个以view开始绘制的点的坐标系,这样就很好的实现了子view的整体权重适配。

2.3、适配属性之goneMargin
本属性比较特殊,是一个自定义控制的属性,即如图所示:

goneMargin的效果.png
这里选取了最常见的直观效果,还有很多类似属性如“layout_goneMarginRight,layout_goneMarginTop等”各位看官们可以自行测试实践。

2.4、宽高比适配
在ConstraintLayout中,子view可以根据自己的属性来显示自定义的方式。“android:layout_width”,"android:layout_height"这两个属性很关键,在设置为"warp_content"时,子view会根据屏幕的尺寸,适配全部屏幕。而当设置为"0dp"的时候,就是为自定义weight的时候,这和LinearLayout使用weight进行适配相同。以下就是关于设置0dp的时候的说明图:

子view宽高比适配.png

这里的“layout_constraintDimensionRatio”是个特殊的属性,在这里指明的"W,1:2"<w一定大写>的值,是明确指代类似图上的margin与view本身的1/2的比例值,如果没有写对于父控件的相关约束属性,那么就是两边的margin叠加起来,子view就往某一边伸缩。同样,限定值为"H, 1:2"是Height变化伸缩的效果。这样一个子view就会根据ConstraintLayout本身而去完成比例适配,相当方便。

结尾:以上就是我花一天的时间去研究的新控件相关的属性,关于此控件还有很多种属性值得研究,期待后期研究深入了,写一个补充的文章,现在ConstraintLayout版本也才1.0.2,我相信谷歌在之后还会改善此控件的源码来更方便我们开发者使用。

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

推荐阅读更多精彩内容