转载地址:http://www.jianshu.com/p/a8b49ff64cd3
1. 概述
![](https://i-blog.csdnimg.cn/blog_migrate/211786e694d8fc34e59166c26fedd9d0.webp?x-image-process=image/format,png)
在本篇文章中,你会学习到有关ConstraintLayout -- 一种构建于弹性Constraints(约束)系统的新型Android Layout。最终你将会在Android Studio中编辑与构建一个相对复杂的Layout。
收获
- 新Layout Manager所使用的Constraints系统
- 创建Constraints来构建弹性高效的Layouts
- 新Layout编辑器的各种功能
需求
2. 获取示例代码
-
使用Git
$ git clone https://github.com/googlecodelabs/constraint-layout.git
3. 运行示例代码
- 打开Android Studio,选择
File>New>Import Project
,选择步骤2下载的示例代码的文件夹constraint-layout-start
。 - 点击
Gradle sync
按钮。 - 在
Project
面板内打开res/layout/activity_main_done.xml
- 选择
Design
选项显示最终的layout编辑界面 - 在编辑器左上角选择
Virtual Device to render the layout with
为Nexus 5x
完工
4. Constraints 系统概览
Layout引擎使用Contraints指定每个widget来决定他们在layout中的位置。你可以使用Android Studio Layout编辑器界面来手动或者自动指定约束。要更好的理解他,需要我们了解一下他对一个选中的widget的基本控键。
Constraints
Constraints帮助你保持widgets对齐。你可以使用箭头来决定各widgets的对齐规则。例如(图示 A),从button 2
左侧控键设置一个constraint到button 1
的右侧控键意味着:button 2
会放置于button 1
右侧56dp
处
![](https://i-blog.csdnimg.cn/blog_migrate/22840cd5a963f14eac113be2e63db2b4.webp?x-image-process=image/format,png)
控键类型
![](https://i-blog.csdnimg.cn/blog_migrate/20f88e15de6aa3b59b3bd457ed0576cb.webp?x-image-process=image/format,png)
-
调整尺寸控键 - 类似于其他设计/绘图应用,该控键允许你调整widget尺寸
-
侧约束控键 - 该控键让你指定widget的位置。例如,你可以使用widget的左侧控键到其他widget的右侧控键相隔
24dp
。
-
基线约束控键 - 该控键帮助你对齐任意两个widget的文字部分,与widget的大小无关。例如你有两个不同尺寸的widget但是你想要他们的文字部分对齐。
《ConstraintLayout从入门到放弃》
太长;别读
5. ConstraintLayout应用
一)开启
现在,让我们开始来构建你自己的Constraint Layout。
从左侧导航栏打开 res/layout/activity_main_start.xml
。
-
载入constraint-layout依赖
constraint-layout
依赖构建在一个分离的支持库里,该依赖支持从Android2.3(Gingerbread)到最新的版本。这个项目在app/build.gradle
里已经包含了该依赖dependencies { ... compile 'com.android.support.constraint:constraint-layout:1.0.0-alpha2' }
-
回到
res/layout/activity_main_start.xml
该layout已经有了一个空的
ConstraintLayout
。
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
</android.support.constraint.ConstraintLayout>
在编辑器底部转换到Design
选项
![](https://i-blog.csdnimg.cn/blog_migrate/8140093c9d32c59320ac13352a9e0aab.webp?x-image-process=image/format,png)
- 添加
ImageView
添加一个ImageView
到layout。在编辑器内,找到ImageView
拖到layout内。
![](https://i-blog.csdnimg.cn/blog_migrate/1acd567214304495a6025cec4539cd3d.webp?x-image-process=image/format,png)
ImageView
一旦拖到layout中,UI会提示需要resource。constraint-layout-start
已经包含了resources,请选择@drawable/singapore
resource。
一旦选中ImageView
,你可以点击并按住调整尺寸控键来调整图片大小。
![](https://i-blog.csdnimg.cn/blog_migrate/165840032fedb05c004340f10909a9f6.webp?x-image-process=image/format,png)
- 添加
TextView
找到TextView
并拖到layout内。
我们会看到一些警告,因为在ImageView
以及TextView
内没有contentDescription
属性。内容描述(Content Description)属性对于构建可访问应用非常重要。让我们为该属性添加@string/dummy
。
在右侧,Inspector面板可以改变已选择widget的各种属性。
![](https://i-blog.csdnimg.cn/blog_migrate/aa3b8a0b2fa84b5072dcb371cf803321.webp?x-image-process=image/format,png)
- 选择
ImageView
并添加@string/dummy
到contentDescription
属性 - 在Inspector面板,你可以看到
ImageView
的其他属性。修改scaleType
为centerCrop
。 - 接着,我们选择
TextView
,使用该面板修改text
值为@string/singapore
。
二)手动创建Constraints
创建一个约束,你需要在widget的某个控键上点击并按住,然后拖到两一个widget的约束控键内。一旦显示绿色,你就可以松手了最终约束就会被创建。
![](https://i-blog.csdnimg.cn/blog_migrate/c2162aabaee6b16d9b9a3fde7908b9d4.webp?x-image-process=image/format,png)
注意:该部分讲有关手动创建约束的,需要将左上角的自动创建约束按钮关闭
![]()
在开始之前,确保ImageView
和TextView
在layout内。我们的目标是在容器、ImageView以及TextView之间创建约束。
假设我们想要TextView
置于ImageView
下方。我们可以在TextView
的顶部控键与ImageView
的底部控键创建一个约束,如图:
![](https://i-blog.csdnimg.cn/blog_migrate/3d60d0de2d750dd45580e7a150b8ce5d.webp?x-image-process=image/format,png)
移除约束:移除某个约束只需点击指定约束的控键;移除全部约束需要点击如下按钮:
![]()
下一步,创建ImageView
跟容器顶部的约束
![](https://i-blog.csdnimg.cn/blog_migrate/44379cc2e6a75537238ec38a903b3ba4.webp?x-image-process=image/format,png)
最后,创建ImageView
左右两侧的约束
![](https://i-blog.csdnimg.cn/blog_migrate/fe3002ca696f73cd77c3e7fd65216f63.webp?x-image-process=image/format,png)
创建基线约束 - 连接widget的基线控键到另一个的基线
![]()
三)熟悉Inspector
在此部分,我们会了解一下Inspector。它在UI编辑器的右侧。附带有已选择widget的各种相关属性,而且还显示了该视图是如何对齐与约束的。
- 移除
TextView
- 添加
ImageView
底部约束
此时,UI构建起如下图:
![](https://i-blog.csdnimg.cn/blog_migrate/58ffed30f852ffb1a562862294620817.webp?x-image-process=image/format,png)
以下部分描述了不同的元素和他们的使用方法:
Margins - widget的外围上下左右为margins。你可以点击按钮设置不同的值来改变margins。在上边截图中,margins设置为16dp
移除constraint - 在Inspector内点击连接widget与container的线,可以移除约束。当然也可以点击已设置约束的控键来移除。
相对于约束来放置widget - 当在一个widget有至少两个相对的连接,比如说顶部和底部,或者左侧和右侧,然后就可以使用滑动条来调节widget在链接中的位置。你还可以改变屏幕方向来进一步调整方位。
![](https://i-blog.csdnimg.cn/blog_migrate/8753aee382ddb4c7ac94476f093b8d97.webp?x-image-process=image/format,png)
控制widget内部尺寸 - Inspector内部的线让你可以控制widget内部尺寸。
![](https://i-blog.csdnimg.cn/blog_migrate/35e5874d3ca016d2ee9ba54b975502d1.webp?x-image-process=image/format,png)
![](https://i-blog.csdnimg.cn/blog_migrate/96c59936c6ef9e43d8ddd42ea662f996.webp?x-image-process=image/format,png)
![](https://i-blog.csdnimg.cn/blog_migrate/8337ca230d18f5140cc156140b6e2fdb.webp?x-image-process=image/format,png)
![](https://i-blog.csdnimg.cn/blog_migrate/7e1edf984110f5fffa1f681889f8b207.webp?x-image-process=image/format,png)
![](https://i-blog.csdnimg.cn/blog_migrate/23b654bff79cf383222c60db15e6e626.webp?x-image-process=image/format,png)
![](https://i-blog.csdnimg.cn/blog_migrate/43e0dddcd0b827463dd2819739fd4b36.webp?x-image-process=image/format,png)
四)自动创建Constraints
Autoconnect
自动创建widgets之间的连接。开始之前
- 打开
res/layout/activity_main_autoconnect.xml
- 开启
Autoconnect
(译注:小磁铁图标)
接下来,选中ImageView
并且拖到layout的中心,如下图所示:
![](https://i-blog.csdnimg.cn/blog_migrate/28abf11555688c6ed0ff4742692031d6.webp?x-image-process=image/format,png)
下一步,下方的动图展示了以下几个步骤
![](https://i-blog.csdnimg.cn/blog_migrate/54518f8023817358cf846f30b23d5258.png)
ImageView
对齐顶部并使用Inspector(AnySize)来确保他扩展到两侧- 放置两个button在右下角。使用Inspector面板来修改最右边button的
text
为@string/upload
以及左侧改为@string/discard
- 将一个
TextView
和一个Plain Text
放到layout中。 - 调整
TextView
和Plain Text
为48dp
。并自动创建约束。 - 同样的选中上传button放置到右侧。
- 最后放置取消button离上传button
32dp
的位置
五)使用Inference创建Constraints
(译注:待更新)
原文链接:Using ConstraintLayout to design your views