Android控件之ConstraintLayout

目录:

1、为什么要用ConstraintLayout?
2、ConstraintLayout有哪些缺点?
3、怎么使用ConstraintLayout。

1、为什么要用ConstraintLayout?

  • 任何复杂的布局只需一层(除非有嵌套的事件响应需求):

绘制过程中的每个阶段都需要对视图树执行一次自顶向下的遍历操作。因此,视图层次结构中嵌入(或嵌套)的视图越多,设备绘制视图所需的时间和计算功耗也就越多。通过在 Android 应用布局中保持扁平的层次结构,您可以为应用创建响应快速而灵敏的界面。

  • 性能更出色

ConstraintLayout 在测量/布局阶段的性能比 RelativeLayout大约高 40%。
详情参阅:解析ConstraintLayout的性能优势

  • LinearLayout和RecyclerView的布局能做到的ConstraintLayout都能做到,它们做不到的也能做到(这一点后面详解)。

2、它有哪些缺点?

  • xml很啰嗦

主要体现在两方面:
1、它需要通过详尽的属性来确定自身位置,因为以前用LL或RL的写法,有些属性在父容器写一次就够,子容器就无需再写一次,但这个是每个容器都是独立的,需要根据周围的控件确定自身的位置。所以这就引出了第二个啰嗦。
2、每个View都要有与之对应的id。

  • 没有gravity属性,这里后面会讲到一个“拉力”的概念,这里先简单说一下,怎么实现gravity=center这样的效果呢?需要把每个边都与父容器的边对应上(需设置4个属性),因为四个边都要拉扯以将控件拉到中间。

3、怎么使用?

1、引入资源
compile 'com.android.support.constraint:constraint-layout:1.0.2'
2、熟悉它的属性,主要有几部分:
part1:类似于RelativeLayout的部分:

根据其他控件给自身定位:

layout_toRightOf="A"——>layout_constraintLeft_toRightOf="A"

根据父容器给自身定位:

layout_alignParentRight=true——>layout_constraintRight_toRightOf=parent

类似的还有:

layout_constraintRight_toLeftOf
layout_constraintRight_toRightOf
layout_constraintTop_toTopOf
layout_constraintTop_toBottomOf
layout_constraintBottom_toTopOf
layout_constraintBottom_toBottomOf
//根据某控件的基线对齐
layout_constraintBaseline_toBaselineOf

part2:类似LinearLayout的weight效果

官方有张图,如[图1]所示,通常来说,LinearLayout的weight只能实现第四行的效果,但ConstraintLayout可以实现下图全部。

图1

想实现类似LL(LinearLayout)的weight的效果,重点看每个TextView的最下三行以及每个TextView的layout_width都是0,以下布局可以实现三个TextView。

<TextView
    android:id="@+id/tab1"
    android:layout_width="0dp"
    android:layout_height="30dp"
    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"
    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"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintLeft_toRightOf="@id/tab2"
    app:layout_constraintRight_toRightOf="parent" />

如果想实现2:1:1等分的效果,就如[图1]的第四行,需要给每个TextView分别添加如下属性,并挨个设置值为2,1,1即可:

app:layout_constraintHorizontal_weight
part3:以下是LinearLayout和RelativeLayout都做不到的,或者说是[要花很大的代价才能实现]这种表达是不是更准确点?
1、先说一下【链(Chains)】的概念:

ConstraintLayout中的控件想要定位准确,A控件是要依赖于父容器左侧和B,然后B控件依赖于A和B,C依赖于B以及父容器的右侧,就如图2所示:

图2.png

这个链代表了某种约束和拉力,上图A,B,C之间存有间隙,(ps:如果要间隙等分的话,需设置layout_width=0dp),图2每个控件拉力都是一样的,如果想实现[图1]的其他效果,实际上都是根据拉力大小变化来实现的,B拉力大一点,那A和C都更靠近B一点点,类似这样的道理。

这里要引出一个属性:

layout_constraintHorizontal_chainStyle

该属性有三个值:spread(铺开),spread_inside(里面铺开), packed(拥挤),效果依次对应图1的:第1行,第2行,第4行。
默认是spread。(ps:以上效果layout_width是固定值或wrap_content,如果是0的话就会类似第3行那样)


图1
2、用bias(偏斜)实现[图1]第5行的效果

简而言之就是调整C控件两边的拉力即可,对应的属性是:

layout_constraintHorizontal_bias //水平线的拉力
layout_constraintVertical_bias  //垂直线的拉力

该属性的值是0~1,默认是0.5,通过调整水平线的拉力即可达到第5行的效果了。

3、控件的宽高比

以前如果想要实现一个Banner宽高比是2:1这样的,很麻烦,因为每个机型分辨率有大有小,除非代码运行才能知道屏幕宽度是多少,才能动态得到屏幕宽度,在xml中根本无法实现。
但ConstraintLayout提供了一个属性就能实现:

app:layout_constraintDimensionRatio="W,2:1"
或
app:layout_constraintDimensionRatio="H,1:2"

注意:宽高需要设置0dp才能有效果!

part4:关于Guideline(辅助线)

这个是为了方便ConstraintLayout布局,如果用过CAD的朋友就应该知道辅助线,用来辅助画图很方便,而且保存文件的时候该线是不会显示到图片上的,同理,这个也只是在写xml的时候辅助用的,应用真正运行的时候是看不到的。

因为是一条线嘛,自然要区分水平还是垂直的,所以就有一个属性:

android:orientation

取值为”vertical”和”horizontal”,跟RecyclerView一样。

它还有一些属性用来给辅助线找准位置,然后给辅助线命名个id,其他控件只要基于该先找到自己的位置就好啦~

layout_constraintGuide_begin  
layout_constraintGuide_end
layout_constraintGuide_percent

它有两种方式来找到自己的位置,一个是绝对值,也就是begin&end(取值为dp),一个是百分比percent(取值为0~1)。
当orientation为vertical的时候,begin对应距离顶部,end对应距离底部。
当orientation为horizontal的时候,begin对应距离左边,end对应距离右边。

真正使用的时候,就把Guideline当作一个View来用好了,Android Studio也会有预览给你看的,记得要给它命名啊,不然其他控件怎么基于它定位呢,对吧?


更多请参阅:

1、鸿洋:ConstraintLayout 完全解析 快来优化你的布局吧
2、郭霖:Android新特性介绍,ConstraintLayout完全解析
3、Google官方文档——ConstraintLayout
4、Google官方文档——Guideline
5、解析ConstraintLayout的性能优势

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

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 170,563评论 25 707
  • ConstraintLayout,让布局更优雅。 一、为什么要用ConstraintLayout 上图是网易100...
    宇是我阅读 15,079评论 21 161
  • 太长不看版:在 Android UI 布局过程中,遵守一些惯用、有效的布局原则,可以制作出高效且复用性高的 UI。...
    Mupceet阅读 3,722评论 0 14
  • 简介 Redis是一个开源的使用ANSI C语言编写、遵守BSD协议、支持网络、可基于内存亦可持久化的日志型、Ke...
    一只好奇的茂阅读 549评论 0 17
  • 小时候,淘气的弟弟总爱和邻居家小朋友发生争执,打胜仗的时候,总是洋洋得意回家,打败仗的时候,恼羞成怒发出恨话,君子...
    微羽wei阅读 835评论 1 1