初识Android ConstraintLayout

水深无声 2022-06-15 01:57 222阅读 0赞

在5.20这天，终于闲了下来，把许久没更新的Android Studio给更到了2.3.2，然后发现多了好多之前没见过的玩意，其中包括这个新的布局方式ConstraintLayout.  
作为自己的第一篇博客，写这个会不会太不自量力了。  
不管怎么样，希望这能作为一个坚持写博的契机吧。  
那么下面进入正题：

在AS2.2版本之前，我们新建空项目时，系统给主活动配的布局文件默认使用RelativeLayout. 众所周知，RelativeLayout又称为相对布局，主要通过各个控件之间的关系来定位其在屏幕上的位置。虽然灵活，但属性较多且主要使用xml语句编写，使用起来比较复杂。  
而现在系统默认使用的ConstraintLayout，跟RelativeLayout有什么差别呢？  
个人认为有这几方面不同：  
\- **主要使用可视化编辑界面**  
\- **更加强调控件之间的关系（约束）**

那么我们开始进行ConstraintsLayout的学习吧

## 创建布局文件 ##

首先，确认你使用的Android Studio版本在2.2及以上。因为2.2版本才首次加入了ConstraintLayout的可视化编辑功能，如果使用2.2之前的版本，那么就只能使用xml代码进行界面编辑，那ConstraintsLayout的最大优势就没有了啊！  
你可以新建一个项目，系统会自动帮你创建一个ConstraintsLayout布局文件，或者在左侧目录中app-res-layout右击新建一个layout resource file. 在弹出的窗口中，填写布局文件名以及根布局，这里当然填入ConstraintLayout, 然后点击ok，文件就成功建立了。  
![新建布局文件][SouthEast]

## ConstraintLayout的基本使用 ##

![布局编辑界面][SouthEast 1]  
这就是AS的可视化编辑工作区了，左侧为预览界面，右侧蓝图界面。如图我们可以从左侧的控件栏中将想使用的控件拖入右侧的蓝图界面。  
这里我们拖入一个TextView到蓝图界面，可以看到，TextView控件的四条边都出现了一个圆点，我们称它为约束控键。通过约束控键我们可以对当前控件设置各种约束。![TextView][]

而下面的两个按钮，左侧按钮是取消约束，能够删除该控件的所有约束，右侧按钮是文字基线约束按钮，点击后控件将出现一个文字基线约束控键，能对齐两个不同大小的控件中的文字。  
下面我们对这个TextView进行一些简单的操作。  
![单个控件约束操作][SouthEast 2]  
我们通过拖动约束控键对其添加约束。可以看到，当对控件右边框与屏幕右侧添加约束时，控件居右对齐；这时同时对控件左边框和屏幕左侧添加约束，空间就居中对齐了。同理得要使控件屏幕居中只要上下左右都对屏幕添加约束即可。最后点击取消约束按钮将刚刚添加的约束全部删除。  
下面我们再添加一个按钮控件，学习如何对两个控件添加约束。  
![两个控件][SouthEast 3]  
我们先对Button左侧和TextView右侧添加了约束，然后将Button稍微拉离TextView，可以看到之后不论TextView怎么移动，Button始终和其保持一定水平距离，垂直距离类似；然后我们对其添加了文字对齐约束，可以看到两个控件通过文字对其在一起；最后我们给Button与屏幕右侧添加了约束，，之后不论如何移动，Button总是和TextView于屏幕右侧保持一定的距离比例。  
以上就是添加约束的最基本方法了。

那么要删除约束除了刚刚所讲的控件上的按钮外，还有两种方法删除约束，一种是在工作区上方的工具栏中的ClearAll按钮![ClearAll按钮][ClearAll]它能够将工作区内所有的约束都删除；另一方法可以单个删除约束，如图所示，单击约束控键即可。  
![ClearSingle][]

## Inspector的使用 ##

每当我们选中一个控件，工作区的右侧都会出现一个Properties界面。  
![这里写图片描述][SouthEast 4]  
其展示出当前控件的各种属性，Properties下半部分与RelativeLayout无异，上半部分是ConstraintLayout特有的，称之为Inspector.  
中间的正方形代表当前选中的控件，外面的四条边表示四个方向上的约束，上面的数字表示和其余控件间的最小间隔。左下两条拖动条是用于控制控件约束比例的，50就是距离两边的约束控件各占50%（居中）。  
![这里写图片描述][SouthEast 5]

不知道各位有没有发现，在正方形的中间有两种不同的符号，其实他们是用来控制控件大小的，点击就能进行切换，一共有这么几种类型：  
![Warp][]Warp Content： 即使得控件大小刚好能将内容包括进去。

![Fixed][]Fixed： 即给控件一个固定的值来控制大小。

![Match][]Match Constraints： 即控件大小充满约束。这个跟RelativeLayout和LinearLayout中的match\_parent不一样。match\_parent是指控件充满父控件，而match constraints意味着在满足约束的条件下充满父布局，看图吧。  
![这里写图片描述][SouthEast 6]

## Guidelines的使用 ##

我忽然想到一个问题，一个按钮的居中很简单，那么如果我要让两个按钮同时居中呢？把两个按钮都关于屏幕两端做约束吧。  
![这里写图片描述][SouthEast 7]  
呃，好像没办法。这个时候就轮到Guidelines出马了。  
![这里写图片描述][SouthEast 8]  
我们在屏幕中央设立一个垂直的Guideline，这就相当于将屏幕分成两个部分，屏幕两边的空间都可以相对于这条Guideline添加约束，如图。  
![这里写图片描述][SouthEast 9]  
水平的Guideline也是一样的。

## 结语 ##

那么就这样我们就把ConstraintLayout的基本操作给走了一遍。因为本人本身是个新手，要我讲深入也确实是有点为难了，作为我的第一篇博客，我自己是很满意了，如果能帮到各位看官大爷，那真是太好了。  
本文参考下面几位大神的博客，有想要更加详细地学习的可以去看看。再次感谢几位大神与各位看官。  
\[1\]Android新特性介绍，ConstraintLayout完全解析，郭霖，[http://blog.csdn.net/guolin\_blog/article/details/53122387][http_blog.csdn.net_guolin_blog_article_details_53122387]  
\[2\]谷歌约束控件(ConstraintLayout)扁平化布局入门，Qiujuer，[http://blog.csdn.net/qiujuer/article/details/51462471][http_blog.csdn.net_qiujuer_article_details_51462471]  
\[3\]Android ConstraintLayout详解，llitfk\_DockOne，  
[http://www.jianshu.com/p/a8b49ff64cd3][http_www.jianshu.com_p_a8b49ff64cd3]

[SouthEast]: /images/20220615/daa53c1a72c84837967ead87ab2fd479.png
[SouthEast 1]: /images/20220615/fc4c8096ae494ed0b0f1de93a74735c5.png
[TextView]: /images/20220615/dd383769bc4747dabebae1215d5ef802.png
[SouthEast 2]: /images/20220615/43f4496941d645ebad4244cc873b6423.png
[SouthEast 3]: /images/20220615/8368a678d4d74e608efba6ac60b6c8d2.png
[ClearAll]: /images/20220615/ca8bcf2cbfd2467fbbe9d5c8ece3b498.png
[ClearSingle]: /images/20220615/d8b60657a5e14845a131b0e613e8e021.png
[SouthEast 4]: /images/20220615/8c87436159e5443f8bcdf6eeba6ffb28.png
[SouthEast 5]: /images/20220615/1a5bf5c0d41a4e16986228c643e5822c.png
[Warp]: /images/20220615/a74841ba160c46689420d517d12aa3af.png
[Fixed]: /images/20220615/7fd8c90eb0ee47da92fcf83312d15366.png
[Match]: /images/20220615/29ab5e5aec444d348c2758b57eb58ba3.png
[SouthEast 6]: /images/20220615/cb72152abbfe417795ac1c326f3543ec.png
[SouthEast 7]: /images/20220615/a9b21467c5f34276993c2d4deb085036.png
[SouthEast 8]: /images/20220615/73dd1851e40c46e48bb436bf77453170.png
[SouthEast 9]: /images/20220615/077d70a9effd4708a98e7937f4dbe531.png
[http_blog.csdn.net_guolin_blog_article_details_53122387]: http://blog.csdn.net/guolin_blog/article/details/53122387
[http_blog.csdn.net_qiujuer_article_details_51462471]: http://blog.csdn.net/qiujuer/article/details/51462471
[http_www.jianshu.com_p_a8b49ff64cd3]: http://www.jianshu.com/p/a8b49ff64cd3