ConstraintLayout 的使用

一. 简介

ConstraintLayout 是Android Studio 2.2 发布时出现的新布局,ConstraintLayout非常适合使用可视化的方式来编写界面,即通过拖拽方式来完成布局。ConstraintLayout还有一个优点,它可以有效地解决布局嵌套过多的问题。我们平时编写界面,复杂的布局总会伴随着多层的嵌套,而嵌套越多,程序的性能也就越差。ConstraintLayout则是使用约束的方式来指定各个控件的位置和关系的,它有点类似于RelativeLayout,但远比RelativeLayout 要更强大。

二. 属性介绍

# 与其他控件或布局之间的约束关系,值可以取 parent 或 其他控件的id
app:layout_constraintLeft_toLeftOf 
app:layout_constraintLeft_toRightOf
app:layout_constraintRight_toLeftOf
app:layout_constraintRight_toRightOf
app:layout_constraintTop_toTopOf
app:layout_constraintTop_toBottomOf
app:layout_constraintBottom_toTopOf
app:layout_constraintBottom_toBottomOf

# baseline对齐
app:layout_constraintBaseline_toBaselineOf

# 与left,right类似
app:layout_constraintStart_toEndOf 
app:layout_constraintStart_toStartOf
app:layout_constraintEnd_toStartOf
app:layout_constraintEnd_toEndOf

# margin 边距
android:layout_marginStart
android:layout_marginEnd
android:layout_marginLeft
android:layout_marginTop
android:layout_marginRight
android:layout_marginBottom

# 当位置约束target控件View.GONE时,可用以下margin属性指示不同的边距值:
app:layout_goneMarginStart
app:layout_goneMarginEnd
app:layout_goneMarginLeft
app:layout_goneMarginTop
app:layout_goneMarginRight
app:layout_goneMarginBottom

# View 的宽高比
app:layout_constraintDimensionRatio

# 可以设置水平或竖直方向的约束的一个比例
app:layout_constraintHorizontal_bias  
app:layout_constraintVertical_bias  

# 链式依赖的样式
app:layout_constraintHorizontal_chainStyle
app:layout_constraintVertical_chainStyle

# 类似LinearLayout 中的设置权重
app:layout_constraintVertical_weight
app:layout_constraintHorizontal_weight

# 当控件的高或宽设置为match_constraint(0dp)时,对控件宽高行为的控制
layout_constraintWidth_default
layout_constraintHeight_default

# 只有当宽高设置为0dp 时,才可用,用来设置控件宽高的最大、最小值
layout_constraintWidth_min = [dimension]
layout_constraintWidth_max
layout_constraintHeight_min
layout_constraintHeight_max

# 参考线
Guideline 

举例说明:
app:layout_constraintLeft_toLeftOf="parent" 指的是让该控件的左侧与父布局对齐;

app:layout_constraintLeft_toLeftOf="@id/viewB" 控件A与控件B左侧对齐时;

app:layout_constraintDimensionRatio="H,16:6" 设置控件宽高比为16:6 ;

以下是左右约束比例的示例:

<android.support.constraint.ConstraintLayout ...>

    <Button 
        android:id="@+id/button"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"/>
</>
image.png

默认情况下,这种对立的约束会促使控件处于居中位置。此时,可以使用Bias属性来调整位置,以达到两侧边距不同的效果。

<!-- 设置左侧边距为30%代替默认的50% -->
app:layout_constraintHorizontal_bias="0.3"
image.png

与RelativeLayout 不同之处:

在当控件有自己设置的宽度,例如warp_content、固定值时,我们为控件添加的都是约束“Constraint”,这个约束有点像橡皮筋一样会拉这个控件,但是并不会改变控件的尺寸,但是RelativeLayout 很明显不是这样,可能会改变View的大小。

ConstraintLayout 中不支持match_parent,若想实现类似功能,可以将宽高设置为0,代表MATCH_CONSTRAINT 这个常量。

与weight 类似的实例:

<TextView
    android:id="@+id/tab1"
    android:layout_width="0dp"
    android:layout_height="30dp"
    android:background="#f67"
    android:gravity="center"
    android:text="Tab1"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toLeftOf="@+id/tab2" />

<TextView
    android:id="@+id/tab2"
    android:layout_width="0dp"
    android:layout_height="30dp"
    android:background="#A67"
    android:gravity="center"
    android:text="Tab2"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintLeft_toRightOf="@id/tab1"
    app:layout_constraintRight_toLeftOf="@+id/tab3" />

<TextView
    android:id="@+id/tab3"
    android:layout_width="0dp"
    android:layout_height="30dp"
    android:background="#767"
    android:gravity="center"
    android:text="Tab3"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintLeft_toRightOf="@id/tab2"
    app:layout_constraintRight_toRightOf="parent" />

横向的依赖,3个TextView 两两设置了约束,最外层的设置了parent约束;再把宽度都设置为了match_constraint,这样就完成了3个TextView 等分。

如果第一个View 设置 app:layout_constraintHorizontal_weight = "2" 则最终三个View 的宽度比例为 2:1:1

如图:

image.png

layout_constraintWidth(Height)_default 使用

当控件的款或高设置为0dp 时,我们可以通过设置这个属性的值来对控件的宽高增长时的表现进行控制,这个属性可以取两个值:

  • spread:默认值,和以前的行为一样
  • wrap:好像使用了wrap_content 一样,控件会随着内容而改变大小,但是会被约束的其他控件限制,即当控件增长到接触它周围的约束控件时会停止增长。

两者的区别如图:


image.png

可见性操作:
ConstraintLayout有特定的方式处理被设置为View.GONE的控件。通常,设置GONE的控件不会被显示,也不是布局本身的一部分(虽然标记为GONE,但实际尺寸不会改变)。但是,就布局计算而言,GONE的控件仍是布局的一部分,区别在于:

  • 对于layout pass,尺寸将被看做是0(基本上被处理成了一个点);
  • 如果对其他控件有约束,则仍然会被注重,但是所有边距值都将看似为0。


    image.png

这种特定的行为允许在可以设置控件暂时为GONE的地方构建布局,并且不影响布局,这对制作简单的布局动画也很有用。

但是有一种情况,如,A到父容器一边的边距100dp,B到A边距16dp,此时设置A为GONE,那么B到父容器边距只有16dp,为了让A GONE 之后,B 距父容器边距不变,就需要用到之前提到的属性layout_goneMarginXXX ,来设置边距。

链 Chains:

如果一组控件双向设置了两两依赖,就形成了一个链,在这个链的最左侧(纵向为最上)的元素成为链头,可以在其身上设置一些属性,来决定这个链的展示效果,这个属性就是:

app:layout_constraintHorizontal_chainStyle

这个属性可以取三个值,即 spread、spread_inside、packed。现在分别看一下,

  • spread + 宽度为0,且可以通过weight控制分配比例,就是上面的例子;
  • spread + 宽度非0 :
    image.png
  • spread_inside + 宽度非0:
    image.png
  • packed + 宽度非0:
    image.png

参考线 GuideLine:

android.support.constraint.Guideline 该类比较简单,主要用于辅助布局,即类似为PS 画布中的参考线,横向的、纵向的。该布局是不会显示到界面上的。

所以其有个属性为:

android:orientation 取值为"vertical" 和 "horizontal".

除此以外,还差个属性,决定该辅助线的位置:

  • layout_constraintGuide_begin
  • layout_constraintGuide_end
  • layout_constraintGuide_percent

可以通过上面3个属性其中之一来确定属性值位置。

begin=30dp,即可认为距离顶部30dp的地方有个辅助线,根据orientation来决定是横向还是纵向。
end=30dp,即为距离底部。
percent=0.8即为距离顶部80%。

例:

<android.support.constraint.ConstraintLayout 
    ...
    <!-- 距顶部80%的水平参考线-->
    <android.support.constraint.Guideline
        android:id="@+id/guideline_h"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_percent="0.8" />

    <!-- 距左边80%的竖直参考线-->
    <android.support.constraint.Guideline
        android:id="@+id/guideline_w"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintGuide_percent="0.8" />

    <TextView
        android:layout_width="60dp"
        android:layout_height="60dp"
        android:background="#612"
        app:layout_constraintLeft_toRightOf="@id/guideline_w"
        app:layout_constraintTop_toBottomOf="@id/guideline_h" />

</....>

上例中的TextView 位于两条参考线的交点处。

三. 性能方面

Android 绘制页面主要有三大流程,即measure、layout 和 draw,所以影响一个布局性能的也只有这三个方面,我们都知道布局嵌套的越深,则性能越差,因为要对整个View 树进行递归地测量、放置等,而ConstraintLayout 依靠其强大的View 之间的约束能力,可以最大程度的做到减少View 的层级深度,谷歌官方也对它的性能进行过测试(链接),结果表明ConstraintLayout 在测量/布局阶段的性能比 RelativeLayout大约高 40% 。所以在性能方面也是没有问题的,可以在实际中使用。

四. 开发

在实际开发时,可以根据实际情况灵活运用,如果布局非常简单能用LinearLayout 解决就没必要用ConstraintLayout 了,否则可以使用,开发时可以用拖拽的方式来实现,但也要熟悉XML 代码,一些拖拽不好实现的情况可以代码实现,至于各种属性,上面已经介绍了。

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

推荐阅读更多精彩内容