Android ConstraintLayout使用指南

升级Android Studio 2.3之后,IDE默认生成的Activity布局都是以ConstraintLayout做为根布局,体验了一把这个Google去年就开始力推的ConstraintLayout后,觉得非常不错,本文用于记录ConstraintLayout各个方面的使用知识。

平台支持

  • ConstraintLayout最低兼容Android 2.3;
  • 目前Android Studio 2.3默认使用ConstraintLayout作为布局文件的根布局;
  • 想要使用ConstraintLayout,需在项目的build.gradle添加com.android.support.constraint:constraint-layout:XXX版本号依赖;

基础使用

ConstraintLayout翻译成中文也称为约束布局,在整个使用体验过程中真的是贯穿约束二字,这一节先来介绍一些基础使用,后面你就会慢慢感受到约束布局的魅力。创建完工程后打开布局文件,底部切换Design的Tab上,可以看到整个操作界面

左上角的面板是放置了系统内置各种各样的控件,想要布局直接拖到到布局文件中即可(所见即所得),右边的面板是选中布局文件中的控件时期各种各样的空间属性,ConstraintLayout最大的好处在于让我们通过拖控件的形式进行布局,并且不用担心适配问题。所以,先来拖个控件试试看,将一个Button拖动到屏幕正中央,然后运行显示看看效果。

模拟器运行后的效果

模拟器运行后的效果

而实际运行后却发现,这个Button还是位于屏幕左上角,说好的居中效果呢?这里就要开始引入ConstraintLayout的约束概念,我们切换回去看xml的布局代码,发现了两个问题。第一,布局预览时能够看到显示居中的Button,是因为控件属性设置中引用了两个tools命名空间下的属性。

我们都知道,这两个属性只在布局编辑器的预览中有效,实际运行效果是不生效的。第二,Button标签下有红色波浪线警告,我们把鼠标移到对应位置会发现警告内容,告诉我们Button没有任何约束设置,当前效果只支持预览,实际运行后会返回到左上角去,同时提示我们应该给控件添加约束。

如何增加约束?回到Design页面,对着控件上下左右四个原点拖动添加对应的约束即可

成功添加约束后,即可得到正常的运行效果了。

实际操作不一定要在Tab,也可以直接在Text页面拖动控件添加约束

成功实现添加约束后,可以看到Button多了下面几个属性设置

app:layout_constraintBottom_toBottomOf="parent" 意思是Button底部的布局约束是位于parent的底部,parent是指包裹着它的ConstraintLayout,也可以设置指定某个控件的id,其他类似的属性就不再赘述,以上四个约束联合起来便实现了Button的居中,ConstraintLayout总共有下面这些同类的属性

你会发现ConstraintLayout非常灵活的把RelativeLayout的活给干了,关于left、right、top、bottom、start、end、baseline的基准可以参照下图

relative-positioning-constraints

relative-positioning-constraints

如果我想加多一个Button2并且将其放置到原先居中Button的右方并且与其底部对齐,只需如下操作即可

并且你也可以发现,Button2依赖与Button后会随着Button的移动而跟着发生相对移动,目的是了保证我设置的依赖,时刻保持Button2就在Button的右边,并且底部对齐。你也可以看到布局文件中也为Button2添加了如下两个属性

如果你已经理解上面提到的属性含义,这里应该不会有疑惑。

top Created with Sketch.