Android_基础_ConstraintLayout

Android 约束布局(ConstraintLayout)详解


简单了解一下

ConstraintLayout是Android Studio 2.2中主要的新增功能之一,可以把ConstraintLayout看成是一个更高级的RelativeLayout,它可以通过控件之间的相互约束,在一层view中实现非常复杂的布局。同时Android Studio 2.2之后对ConstraintLayout的编辑提供了特殊的可视化操作的支持,可以直接拖动控件,比常规布局的可视化支持体验要好太多。要完整的体验ConstraintLayout的所有功能。

  • 优点
    • 更好的绘制速度
    • 更低的性能消耗
    • 对复杂的布局使用更少的嵌套去完成
  • 缺点
    • 学习难度相对较高
    • 书写复杂

基本使用

dependencies {
   implementation 'com.android.support.constraint:constraint-layout:1.1.0-beta3'
}

这里使用的是 Android Studio 3.0 在 3.0 中 implementation 用来替代 compile

这之前你应该先了解一下代码是如何去实现,然后在去用界面拖动的方式去实践在,等界面拖动运用的熟悉后在仔细看代码。因为我就是这样去学习的。

一、相对定位属性

  • layout_constraintBaseline_toBaselineOf
  • layout_constraintTop_toBottomOf
  • layout_constraintTop_toTopOf
  • layout_constraintBottom_toBottomOf
  • layout_constraintBottom_toTopOf
  • layout_constraintStart_toEndOf
  • layout_constraintStart_toStartOf
  • layout_constraintEnd_toEndOf
  • layout_constraintEnd_toStartOf
  • layout_constraintLeft_toLeftOf
  • layout_constraintLeft_toRightOf
  • layout_constraintRight_toLeftOf
  • layout_constraintRight_toRightOf

上面这些属性命名非常有规律,例如前面的 layout 说明这是一个布局属性,中间的 constraintXXX 为对当前 View 上的某个属性做的约束,而最后的 toXXOf 为当前 View 约束的对象以及约束的方位。

这里需要注意 parent 代表的是父控件的意思

二、Margin (边距)

这个库有一个特殊的边距方法:

  • layout_goneMarginBottom
  • layout_goneMarginEnd
  • layout_goneMarginLeft
  • layout_goneMarginRight
  • layout_goneMarginStart
  • layout_goneMarginTop

如果设置了这个属性,当 ButtonB 所参考的 ButtonA 可见的时候,这个边距属性不起作用;当 ButtonA 不可见(GONE)的时候,则这个边距就在 ButtonB 上面起作用了。

三、子控件的尺寸控制

ConstraintLayout 中子 View 的宽度和高度还是通过 android:layout_width 和 android:layout_height 来指定,可以有三种不同的取值:

  • 使用确定的尺寸,比如 48dp
  • 使用 WRAP_CONTENT ,和其他地方的 WRAP_CONTENT 一样
  • 使用 0dp,这个选项等于 “MATCH_CONSTRAINT”,也就是和约束规则指定的宽(高)度一样

注意:MATCH_PARENT 属性无法在 ConstraintLayout 里面的 子 View 上使用。虽然官方文档是这样写的但是我在使用中发现还是可以的但是会造成很多问题所以建议不使用

注意:在用使用 0dp 时 View 一定要有约束否则会为 0dp 不显示

四、宽高比

  • layout_constraintDimensionRatio 控制子 View 的宽高比

比率的取值有两种形式

  1. float 值,代表宽度/高度 的比率
  2. “宽度:高度”这种比率值

如果宽度和高度都是 MATCH_CONSTRAINT (0dp) 也可以使用宽高比。这种情况,系统会使用满足所有约束条件和比率的最大尺寸。要根据其中一种尺寸来约束另外一种尺寸,则可以在比率值的前面添加 W 或者 H来分别约束宽度或者高度。例如,如果一个尺寸被两个目标约束(比如宽度为0dp,在父容器中居中),你通过使用字符 W 或者 H 来指定那个边被约束。

五、精细控制的方式

除了基本的 View 尺寸控制以为,还有如下几个精细控制 View 尺寸的属性(注意:下面这些属性只有宽度或者高度设置为 0dp (MATCH_CONSTRAINT) 的情况下才有效):

方法 作用
layout_constraintWidth_default 取值为 spread 或者 wrap,默认值为 spread ,占用所有的符合约束的空间;如果取值为 Wrap ,并且view 的尺寸设置为 wrap_content 且受所设置的约束限制其尺寸,则 这个 view 最终尺寸不会超出约束的范围。
layout_constraintHeight_default 同上
layout_constraintHeight_max 取值为具体的尺寸
layout_constraintHeight_min 取值为具体的尺寸
layout_constraintWidth_max 取值为具体的尺寸
layout_constraintWidth_min 取值为具体的尺寸

六、链条布局(Chains)

这个布局可牛逼了,可以实现类似 weight 的效果,但效果要比 weight 强大太多,当然书写要比 weight 复杂很多

创建链条

如同字面意思一般就是一个链,每个 View 声明他的左右(水平)或上下(垂直)约束,ConstraintLayout 就会认为你在构建一个链条;

注意: 在 Android Studio 编辑器中,先把多个 View 单向引用,然后用鼠标扩选多个 View,然后在上面点击右键菜单,选择 “Center Horizontally” 或者 “Center Vertically” 也可以快速的创建 Chain。

链条头(Chain heads)

Chain 的属性由该群组的第一个 View 上的属性所控制(第一个 View 被称之为 Chain head).
水平群组,最左边的 View 为 head, 垂直群组最上面的 View 为 head。

链条样式(Chain Style)

方法 作用
layout_constraintHorizontal_chainStyle 设置水平链条样式
layout_constraintHorizontal_weight 加权链;和LinearLayout的weight类似
layout_constraintVertical_chainStyle 设置垂直链条样式
layout_constraintVertical_weight 加权链;和LinearLayout的weight类似

chainStyle 是设置到 Chain Head 上的,指定不同的 style 会改变里面所有 View 的布局方式,有如下四种 Style:

方法 作用
spread 元素将被展开(默认样式)
加权链 在spread模式下,如果某些小部件设置为MATCH_CONSTRAINT,则它们将拆分可用空间
spread_inside 类似,但链的端点将不会扩展
packed 链的元素将被打包在一起。 孩子的水平或垂直偏差属性将影响包装元素的定位

加权链(Weighted chains)

LinearLayoutweight 类似。

链的默认行为是在可用空间中平均分配元素。 如果一个或多个元素使用 MATCH_CONSTRAINT ,它们将使用剩余的空白空间(在它们之间相等)。 属性 layout_constraintHorizontal_weight 和 layout_constraintVertical_weight 将决定这些都设置了 MATCH_CONSTRAINT 的 View 如何分配空间。 例如,在包含使用 MATCH_CONSTRAINT 的两个元素的链上,第一个元素使用权重为 2 ,第二个元素的权重为 1 ,第一个元素占用的空间将是第二个元素的两倍

强大之处

上边这些并不能体现出 ConstraintLayout 的强大之处,下面让我带大家看看他的强大:

Guideline

Guideline 是用来辅助定位的一个不可见的元素。可以作为参考坐标,但是是不可见的,也是专门用来辅助完成复杂布局的;

方法 作用
android_orientation 控制 Guideline 是横向的还是纵向的
layout_constraintGuide_begin 控制 Guideline 距离父容器开始的距离
layout_constraintGuide_end 控制 Guideline 距离父容器末尾的距离
layout_constraintGuide_percent 控制 Guideline 在父容器中的位置为百分比

Barrier

它可以阻止一个或者多个控件越过自己,就像一个屏障一样。当某个控件要越过自己的时候,Barrier会自动移动,避免自己被覆盖。他的方法在Guideline几个方法上多了

方法 作用
barrierDirection 决定 Barrier 的方向
constraint_referenced_ids 选中的控件

居中和偏移

之前的相对定位属性中如果你这样使用时;

app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent

ConstraintLayout 会怎么去处理呢?

这种情况下,ConstraintLayout 就像使用两个作用力分别从左边和右边来拉住这个控件,就像左右一边一个弹簧固定到父容器左右。最终的效果就是在父容器中水平居中。对于垂直方向上的约束是类似的规则。

此时我像大家介绍性的属性 Bias :

Bias

像上面提到的这种对称相反布局约束会把 View 居中对齐,使用 Bias 可以改变两边的权重(类似于 LinearLayout 中的 weight 属性):

方法 作用
layout_constraintHorizontal_bias 水平方向的比例
layout_constraintVertical_bias 垂直方向的比例

注意这里使用:layout_constraintHorizontal_bias 时要保证控件左右有约束,否则此方法无效。同理layout_constraintVertical_bias需要控件上下有约束。

如果没有设置 bias 值,则左右两边的取值为各占 50%,如果把左边的 bias 值修改为 30%(0.3),则左边空白的边距就小一点,而右边空白的距离就大一点。

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

推荐阅读更多精彩内容