ConstraintLayout详解与使用方法

ConstrainLayout 是 AndroidStudio2.2 的新特性,能够很方便的用于可视化开发,有点类似于 ios 的 storyboard,解决了 xml 过于复杂的问题。


约束

相对定位(Relative positioning)

也就是我们之前常用的relativelayout,属性也与其一致,使用方法如:layout_constraintLeft_toLeftOf,位置用一张图片解释。


边距(Margins)

同之前的margin使用方法。

  • goneMargin

    简单的解释,就是当位置约束的目标可见性为View.Gone时,可以调整它的边距值变为与父布局的margin值。下文将有示例解释。


居中定位(Centering positioning)

通过定义上下左右的相邻控件或父容器来设置居中。可以形象的理解为两个大小相同,方向相反的力作用在控件上。

如下,通过定义top, bottom, start, end就可以使textview在parent居中显示。

<TextView
 android:id="@+id/textView"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:text="TextView"
 app:layout_constraintBottom_toBottomOf="parent"
 app:layout_constraintEnd_toEndOf="parent"
 app:layout_constraintStart_toStartOf="parent"
 app:layout_constraintTop_toTopOf="parent" />

倾向(bias)

搭配bias,就像两个力大小不相等,使其往一个方向靠拢。
bias = 0.3
  • layout_constraintHorizontal_bias:水平偏向

  • layout_constraintVertical_bias:垂直偏向

  • 0为最左上,1为最右下,默认为0.5。


圆定位(Circular positioning)(1.1新特性)

可以理解为以一个控件为圆心,设定半径和角度,决定另一个控件的位置。如图
  • layout_constraintCircle : 参照的控件id(圆心)

  • layout_constraintCircleRadius : 距离参照物的距离(两控件中心点间距离)

  • layout_constraintCircleAngle : 偏移角度(0为正上方,0~360)


可见性行为(Visibility behavior)

这是针对View.GONE的特定处理。Gone隐藏的控件,会被当成一个点,同时忽略margin。如图。

  • 当A消失时,B的边距将为原来与A的约束边距。

  • 另一种方法,用goneMargin生成新的边距,而原来与A的约束边距将不起作用。

  • 这种特定的行为可以做到特殊的布局,比如上图A消失时B位置不变,设A宽度为100,边距为10,B对A约束为20,那么goneMargin=100+10+20=130,则可以实现A隐藏后B位置不变。


尺寸约束(Dimensions constraints)
  • 可以定义ConstraintLayout布局的尺寸

  • 可以定义控件的尺寸,有三种方式:

    1. 确定尺寸:123dp
    1. WRAP_CONTENT

    2. 0dp

  • 0dp,相当于match_constraint,意思就是填满约束的空间。如果设置了margin值,也需要去掉margin的空间。


比例(Ratio)
  • 可以按比例设置控件的宽高,定义其中一个维度为0dp,并设置属性layout_constraintDimensionRatio,值可以为0~1的浮点数或比例x:x。

  • 可以设置两个维度均为0dp,同时在ratio值前加W或H分别约束宽度或高度。

     <Button android:layout_width="0dp"
     android:layout_height="0dp"
     app:layout_constraintDimensionRatio="H,16:9"
     app:layout_constraintBottom_toBottomOf="parent"
     app:layout_constraintTop_toTopOf="parent"/>
  • 如上,将以button的最大约束宽度,16:9的比例定义button的高度

链条(Chains)
  • 将一个维度的一组控件组成一个链条,另一个维度可以单独控制,相当于绑成一个组件。

  • 一组部件通过双向连接就形成一个链条。
  • 水平链的最左边和竖直链的最上边成为链头。
  • 如果连接中设置了margin,要考虑在内。

  • 链条样式(Chain Style)

    给链条第一个元素设置属性layout_constraintHorizontal_chainStylelayout_constraintVertical_chainStyle,则链条会根据样式更改。(默认CHAIN_SPREAD

    • spread:元素间分散开

    • spread_inside:端点除外,元素间分散开,如上图区别

    • packed:元素间打包,即贴在一起

  • 权重链(Weighted chains)

    类似LinearLayout里的WEIGHT属性,若元素使用MATCH_CONSTRAINT,就是这些元素使用约束后的空间。

    • layout_constraintHorizontal_weight

    • layout_constraintVertical_weight


虚拟辅助元素(Virtual Helper objects)

可以使用辅助对象来创建相对约束,可以通过水平或垂直的Guideline来定位控件。

  • Guideline

    • 不会被显示,只会辅助布局

    • 定位Guideline有三种方式:

      layout_constraintGuide_begin:距离左侧或顶部的固定距离

      layout_constraintGuide_end:距离右侧或底部的固定距离

      layout_constraintGuide_percent:父控件的高度或宽度的百分比


可视化操作

约束控键类型
  • 调整尺寸大小:正方形四角

  • 侧边约束:四边圆形,约束四边的位置

  • 基线约束:文字下方条状,用于对齐文字

添加约束
  • 点击控键,选中圆点拖动到要约束的位置。如图,要将控件放于左上角,将左边和上边分别拉到屏幕边缘即可。
  • 两个控件间添加约束,要将第二个textview放于第一个的下方,只需要将左边约束对齐,上边约束到第一个textview的下方即可。要注意的是,添加完约束后,会有一个默认margin值,导致左边没对齐,此时在右侧的Attributes中将margin调为0即可。
删除约束
  • 删除单个约束:点击具体的约束发起点即可删除。

  • 删除单个控件的所有约束:点击控件,在左下方有删除所有约束的按钮,点击即可。

  • 删除整个界面的所有约束:在上方工具栏找到

    按钮即可删除。

Inspector的使用

这个界面就是控件的属性。我们除了可以修改一些基本属性,还有一些新的功能。

  • 修改尺寸

    这里有三种尺寸描述方式:


    • :wrap_content


    • :固定数值(100dp)


    • :match_constraint

    关于这三个属性的区别上面已经解释过,大家看动图可以观察出区别。

  • 调整bias

    滑动那个滑块调节即可。

  • 使用guideline

    可以使用guideline进行百分比布局,再不用担心适配问题了。

  • 自动添加约束

    在上方的工具栏找到

    ,就可以开启AutoConnect,虽然有时候可能不能达到你想要的布局,但大部分时候可以减轻你的工作量。


总结

参考官方文档
用constraintLayout可以完全替换掉之前的linearLayout和relativeLayout,使用也很方便,希望能帮大家快速上手。

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

推荐阅读更多精彩内容