Android ConstraintLayout约束布局

一、简介

ConstraintLayout(约束布局)是Android Studio 2.3+创建xml的默认布局方式,它是一个viewgroup,我们把它理解成RelativeLayout的升级版,目的就是为了减少嵌套的复杂度,当界面布局过于复杂时使用,不复杂的情况可以延用之前的布局方式

二、分类

2.1相对定位

相对定位允许我们将目标控件的给定侧约束到任何其他控件的另一侧,它允许在水平方向(left,right,start,end)或垂直方向(top,bottom,text baseline-文本基线)约束一个控件

例如:希望按钮b的左侧被限制在按钮a的右侧(系统会尝试将双方共享相同的位置)
代码:app:layout_constraintLeft_toRightOf="@+id/A"

image.png

layout_constraintBaseline_toBaselineOf可以将控件的文本对齐

如上属性形如: layout_constraintXXX_toYYYof

  1. XXX代表的此控件自身的哪一条边(Left,Right,Top,Bottom,Baseline),YYY代表的是约束控件的哪条边(Left,Right,Top,Bottom,Baseline)
  2. 当XXX和YYY相反,表示XXX在约束控件的YYY的一侧
  3. 当XXX和YYY相同时,表示控件自身的XXX和约束控件的YYY的一侧对齐,如constraintBottom_toBottomOf="parent"表示的自身底部和父控件底部对齐

2.2 边距

2.2.1 普通情况

margin和以往的使用一致,注意margin不能为负值,并且在CL要实现margin必须先约束控件在CL的位置;在约束布局中,如果设置了侧边距,此距离将应用于相应的约束条件,作为目标和源侧之间的空间执行


image.png

2.2.2特殊情况:链接到GONE(缺失)的约束控件时的边距

如果我们约束控件gone了,那么可以使用以下的属性


image.png

image.png

注意:layout_goneMarginXXX 要配合 layout_marginXXX一起使用,只设置一个是无效的,goneMaringXXX的值是约束控件的width的值+marginXXX的值

2.3对可见性的处理

对可见性的处理(Visibility behavior)是对goneMargin的补充,规则是:gone隐藏掉的控件,会被解析成一个点,并忽略margin


image.png

2.4居中定位和偏向

2.4.1居中

在目标控件同时设置constraintLeft_toLeftOf="parent"和constraintRight_toRightOf="parent",这两个约束作用类似于水平方向上有相反的力去拉控件,最终控件会居中显示

2.4.2倾向(Bias)

constranitLayout布局这种居中的特性搭配bias,能使目标控件偏向某一边


image.png

2.5环形定位(角度定位)

2.5.1定义

环形定位指的是可以约束一个view相对于另一个view的弧度和半径,它是以各自的中心为参照来约束的


image.png

2.5.2属性

image.png

2.6尺寸约束

2.6.1 控件宽高的设置方式

  1. 确定尺寸
  2. wrap_content
    1.可以为ConstraintLayout自身定义最小的尺寸,在CL为wrap_content时起作用


    image.png

    注意:当ConstraintLayout版本为1.1以下时,需要加上强制约束:
    app:constrainedWidth=”true”
    app:constrainedHeight=”true”

  3. 0dp(MATCH_CONSTRAINT)
    1.官方不推荐在ConstraintLayout中使用match_parent,可以设置0dp配合相应的constraintXXX_toYYYOf来定义目标控件,如果目标控件有margin,那么margin也会生效,需要注意的是,toYYYOf的方向要和0dp的方向一致(width为0dp,toYYYOf就是left,right)
    2.MATCH_CONSTRAINT的意思是match的约束控件,就是我的match是相对于toYYYOf的那个控件

2.6.2 宽高比

image.png
  1. 只有一个方向的约束
    1. 设置宽或者高的值为0dp(MATCH_CONSTRAINT),属性设置constraintDimentionRatio="x:y"比例值,比例值有两种类型:浮点值(表示宽高之间的比率-2,0.5)和width:height(宽:高形式的比例-3:5等)
  2. 当约束多于一个(宽高都被约束)
    1. 如果宽高都设置为0dp,若需要根据宽或者高去约束另一个高或者宽,则可以在比率前加W或者H来约束(constraintDimentionRatio="W,x:y",指的是宽:高是x:y)

2.7链

2.7.1创建链条

如果两个或者两个以上的控件通过A-left_toRightOf=B,B-right_toLeftOf=A,则将其视为链条,然后AB就成了一个整体,若设置了B-left_toleftof=parent使得和父控件左对齐,A-right_torightof=parent使得和父控件右对齐(链条就居中了)

2.7.2链条头

链条由在链的第一个元素(链条头)上设置的属性控制;水平链最左边的view是头,垂直链最顶端的view是头

2.7.3链条上的margin

在链条头设置margin,相当于在整个链条左边有了margin

2.7.4链条样式

在链的第一个元素上设置属性layout_constraintHorizontal_chainStyle或layout_constraintVertical_chainStyle时,链的行为将根据指定的样式(默认CHAIN_SPREAD)而更改


image.png

image.png

2.7.5加权链

和LinearLayout的weight类似,链的默认行为是在可用空间中平均分配元素
属性:layout_constraintHorizontal_weight或layout_constraintVertical_weight将会决定0dp的view如何分配空间

2.8辅助布局

2.8.1 Guideline

Guideline只能用于CL中,它是一个工具类,不会被显示,仅仅用于辅助布局,它是一个超轻量的View,不可见,没有宽高,默认是GONE,不会绘制任何东西,所以它的作用只是锚点

 <android.support.constraint.Guideline
        android:id="@+id/guideline"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintGuide_percent="1" />

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="16dp"
        android:text="Button"
        app:layout_constraintLeft_toLeftOf="@+id/guideline"
        app:layout_constraintTop_toTopOf="parent"/>

属性:android:orientation="vertical/horizontal"
1. vertical:Guideline的宽度为0,高度是CL的高度
2.horizontal:Guideline的高度为0,宽度是CL的宽度

2.8.2 定位Guideline的三种方式

  1. layout_constraintGuide_begin
    vertical时代表了距离左侧的距离
    horizontal时代表了距离顶部的距离

  2. layout_constraintGuide_end
    vertical时代表了距离右侧的距离
    horizontal时代表了距离底部的距离

  3. layout_constraintGuide_percent(取值0-1)
    vertical时代表了左右的占比,0:left,1:right
    horizontal时代表了顶底的占比,0:top,1:bottom

参考链接:https://www.twle.cn/l/yufei/android/android-basic-constraintlayout5.html
https://www.jianshu.com/p/17ec9bd6ca8a

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