首页 理论教育 如何使用Android的新布局ConstraintLayout

如何使用Android的新布局ConstraintLayout

时间:2023-06-27 理论教育 版权反馈
【摘要】:所以Android UI团队于2016年Google I/O开发者大会上发布了一个新的布局控件:ConstraintLayout。ConstraintLayout可以有效地解决布局嵌套过多的问题。新建一个ConstraintLayoutTest项目。另外,确保Android Studio是2.2或以上版本,为了使用ConstraintLayout,需要在app/build.gradle文件中添加ConstraintLayout的依赖,如下所示。ConstraintLayout支持自动添加约束的功能,可以极大程度上简化那些繁琐的操作。

如何使用Android的新布局ConstraintLayout

Android布局嵌套层级直接影响UI界面绘制的效率,如果UI嵌套层级太多会导致界面有性能问题,目前对于复杂的界面,使用RelativeLayout也无法解决。所以Android UI团队于2016年Google I/O开发者大会上发布了一个新的布局控件:ConstraintLayout。

ConstraintLayout可以看作RelativeLayout的升级版,提供更多的手段来控制子View的布局,所以对于复杂的布局,用ConstraintLayout个布局容器即可实现。

ConstraintLayout可以有效地解决布局嵌套过多的问题。我们平时编写界面时,复杂的布局总会伴随着多层的嵌套,而嵌套越多,程序的性能也就越差。ConstraintLayout则是使用约束的方式来指定各个控件的位置和关系,有点类似于RelativeLayout,但远比RelativeLayout强大。

ConstraintLayout属于Android Studio 2.2的新特性,ConstraintLayout是一个新的Support库,支持Android 2.3(API level 9)以及之后的版本。

新建一个ConstraintLayoutTest项目。另外,确保Android Studio是2.2或以上版本,为了使用ConstraintLayout,需要在app/build.gradle文件中添加ConstraintLayout的依赖,如下所示。

978-7-111-58810-8-Chapter03-44.jpg

现在打开res/layout/activity_main.xml文件,由于这是一个新建的空项目,Android Studi-o会自动帮我们创建一个布局,这是一个ConstraintLayout布局,它的代码如下。

978-7-111-58810-8-Chapter03-45.jpg

ConstraintLayout的基本用法很简单,现在向布局中添加一个按钮,从左侧的Palette区域拖一个Button进去即可。

虽然已经添加Button到界面中了,但是由于还没有为Button添加任何约束,因此But-ton并不知道自己应该出现在什么位置。现在在预览界面中看到的Button位置并不是它最终运行的实际位置,如果一个控件没有添加任何约束,则在运行之后会自动位于界面的左上角。

1.基本约束

下面为Button添加约束,每个控件的约束都分为垂直和水平两类,一共可以在四个方向上为控件添加约束。

Button的上下左右各有一个圆圈,这些圆圈就是用来添加约束的,如图3-11所示。

可以将约束添加到ConstraintLayout,也可以将约束添加到另一个控件。比如说,想让Button位于布局的左边和上边,则用鼠标按住约束圈往边界拖就可以添加约束,我们为Button的左边和上边添加了约束,因此Button会将自己定位到布局的左下角,如图3-12所示。

978-7-111-58810-8-Chapter03-46.jpg

图3-11 约束圈

978-7-111-58810-8-Chapter03-47.jpg

图3-12 添加约束

这就是添加约束最基本的用法。

除此之外,我们还可以使用约束让一个控件相对于另一个控件进行定位。比如说,我们希望再添加一个Button,让它位于第一个Button的正下方,间距64dp,则用鼠标按住But-ton2的上约束圈往Button1边界拖动即可,如图3-13所示。

现在我们已经学习了添加约束的方式,那么该怎样删除约束呢?其实也很简单,删除约束的方式一共有三种。

(1)若要删除一个单独的约束,则将鼠标光标悬浮在某个约束的圆圈上,然后该圆圈会变成红色,这时单击一下即可删除。

(2)若要删除某一个控件的所有约束,则选中一个控件,它的左下角会出现一个删除约束的图标X,单击该图标,即可删除当前控件的所有约束,如图3-14所示。

978-7-111-58810-8-Chapter03-48.jpg

图3-13 相对于另一个控件进行定位

978-7-111-58810-8-Chapter03-49.jpg

图3-14 删除约束(www.xing528.com)

(3)若要删除当前界面中的所有约束,则单击界面工具栏中的删除约束按钮即可,如图3-15所示。

978-7-111-58810-8-Chapter03-50.jpg

图3-15 删除所有约束

现在已经学习了ConstraintLayout基本操作,并且能使用ConstraintLayout编写一些简单的界面了。不过目前还有一个问题可能比较麻烦,刚才我们已经实现了让一个按钮居中对齐,如果我们想让两个按钮共同居中对齐,该怎么实现呢?

其实这种情况很常见,比如在应用的登录界面中会有一个登录按钮和一个注册按钮,不管它们是水平居中还是垂直居中,肯定是两个按钮共同居中,这将用到下面要介绍的Guide-line约束类型。

2.Guideline约束

上文提到,想要实现两个按钮共同居中,需要用到ConstraintLayout中的一个新的功能Guideline。

首先需要在界面中添加Guideline,在界面工具栏中单击添加按钮,选择下拉列表中Add Vertical Guideline或者AddHorizontal Guideline选项,如图3-16所示。

978-7-111-58810-8-Chapter03-51.jpg

图3-16 添加Guideline

我们希望让这两个按钮在垂直方向上对齐,在水平方向上距离Guideline左部52dp,需要先添加一个垂直方向上的Guideline,每个按钮的左边向Guideline添加约束,这样就能实现两个按钮在水平方向上距离左部Guideline 52dp距离的要求,如图3-17所示。

3.自添加约束

如果界面中的内容比较复杂,为每个控件一个个地添加约束是一件很繁琐的事情。ConstraintLayout支持自动添加约束的功能,可以极大程度上简化那些繁琐的操作。

自动添加约束的方式主要有两种:Autoconnect和Inference。

978-7-111-58810-8-Chapter03-52.jpg

图3-17 Guideline约束

(1)Autoconnect

若要使用Autoconnect,首先需要在工具栏中启用这个功能,默认情况下Autoconnect是不启用的,如图3-18所示。

978-7-111-58810-8-Chapter03-53.jpg

图3-18 启用Autoconnect

Autoconnect可以根据我们拖放控件的状态,自动判断应该如何添加约束,比如我们将Button放到界面的正中央,那么它的上下左右会自动添加约束。

(2)Inference

接下来,我们看一下Inference的用法。Inference也用于自动添加约束,它比Autocon-nect功能更强大,因为AutoConnect只能为当前操作的控件自动添加约束,而Inference能为当前界面中的所有元素自动添加约束。因而Inference比较适合用来实现复杂度比较高的界面,它可以一键自动生成所有的约束。工具栏中Inference约束工具按钮如图3-19所示。

978-7-111-58810-8-Chapter03-54.jpg

图3-19 Inference约束工具

免责声明:以上内容源自网络,版权归原作者所有,如有侵犯您的原创版权请告知,我们将尽快删除相关内容。

我要反馈