close
当前位置: 物联网在线 > 技术文库 > android >

使用约束布局(ConstraintLayout)构建灵活的UI

Android团队为开发者带来了ConstraintLayout,一种构建于弹性Constraints(约束)系统的新型Android Layout,据说它将大大改变今后的Android布局界面开发方式,据说也许以后Android开发没有那么多布局需要学习,只需要熟悉这一种布局即可。前两天Android studio 2.2正式版发布了,更多的Android 开发者会接触并(可能)使用这个布局。

使用约束布局(ConstraintLayout)构建灵活的UI

约束布局允许你在相同视图层级中(不是相互层叠的视图组合)制作大而复杂的布局。它类似于相对布局那样所有的视图位置是根据子布局或父布局决定的,但是它比相对布局更加灵活,并且在Android studio布局编辑器中更加易用。

你可以直接在布局编辑器的可视化工具中做约束布局中所做的所有事,因为布局API和布局编辑器已经做了特地融合。所以你可以通过拖拽使用约束布局构建你的布局,而不需要再去编辑XML文件。

使用约束布局(ConstraintLayout)构建灵活的UI

图1,布局编辑器中的约束布局

约束布局可以在兼容Android2.3(API 9)或者更高的API库中使用,而新的布局编辑器则在Android studio2.2中可用。

这篇文章提供了一个在Android studio中使用约束布局构建一个布局的指导。如果你想要了解关于布局编辑器更多信息,在这个 Build a UI with Layout Editor Android studio指导中查看.

约束概述

为了定义在约束布局中视图的位置,你必须为视图添加两个或更多约束条件。每个约束代表了和另个视图、父布局或不可见指引线的联系或对齐。每个约束限定了视图是沿着垂直轴还是水平轴的位置,所以每个视图必须在每个轴最少拥有一个约束,但经常需要更多。

当你往布局编辑器中拖拽一个视图时,它会停留在你扔下它的位置,即使它没有任何约束。然鹅,这只是为了使编辑更简单。当一个视图没有任何约束时,你在设备上运行起来后,它会被绘制在左上角[0,0]的位置。

在图2里面,布局在编辑器中看起来不错,但是对于TextView B没有对其进行竖直方向上的约束。当这个布局被绘制到设备上时,TextView B会在水平方向上水平与ImageView的左右边缘对齐,但是出现在屏幕的顶部,因为它没有数值方向上的约束。

使用约束布局(ConstraintLayout)构建灵活的UI

图2,缺少垂直方向约束的TextView B

使用约束布局(ConstraintLayout)构建灵活的UI

图3,TextView B现在在垂直方向上约束于ImageView

虽然缺少约束条件不会造成编译错误,但布局编辑器会在ToolBar中展示为一个错误指示缺少约束条件。要查看错误或者其他警告,可以点击 Show Warnings and Errors .为了帮你避免忽视约束条件,布局编辑器会使用 功能为你自动添加约束。

在你的工程中添加约束布局

要在你的工程中使用约束布局,步骤如下:

1,确定你有最新的Constraint Layout library;

1.点击Tools > Android > SDK Manager. 2.点击 SDK Tools栏. 3.展开Support Repository,然后检查ConstraintLayout for Android, 并且Solver for ConstraintLayout. 检查Show Package Details,注意你下载的版本(你需要的是下面这个)。 4.点击OK. 5.在你的module-level build.gradle文件里面添加ConstraintLayout library作为依赖: dependencies { compile 'com.android.support.constraint:constraint-layout:1.0.0-alpha8' }

你下载的库版本或许会更高,所以确保你指定的版本跟第三步中的版本相匹配。

6.在toolbar或者sync提示中,点击Sync Project with Gradle Files.

现在你可以使用ConstraintLayout构建布局了.

转换布局

按照以下步骤,将现有的布局转换为约束布局:

1.在Android Studio打开你的布局,点击编辑器窗口最下面的Design标签. 2.在Component Tree窗口,右键布局,然后点击Convert layout to ConstraintLayout.

使用约束布局(ConstraintLayout)构建灵活的UI

图4,转换为ConstraintLayout的功能菜单

新建布局

以下步骤开始新建一个约束布局文件:

1.在Project窗口任意位置右键,然后选择File > New > XML > Layout XML. 2.输入布局文件名字,然后输入"android.support.constraint.ConstraintLayout" 作为布局根标签. 3.点击完成. 添加约束

首先从Palette窗口拖拽一个视图到编辑器。当你在约束布局中添加一个视图时,它显示为一个每个角都带有正方形手柄,并且每边都带有的环形手柄的边框


(责任编辑:ioter)

用户喜欢...

使用Android Studio开发可独立运行(runnable)混淆过的Jar程序

之前开发Java程序一直都是使用Eclipse 开发Jar程序,现在开发基本上都已经弃用Eclipse了,但是有时偶尔开发个小的Jar程序,还要切换回去好麻烦,刚好前几天有人问几个相关的问题,就顺便整...


Android Studio使用小技巧,只能说666

一般的什么快捷键,技巧的文章也有很多。我也看过很多。下面这些事我在来自国外大神发布的:Android Studio Tips of the Day( https://plus.google.com/u/0/collection/wtO0PB )查看到的,而且对于我来说有...


android studio 使用gradle打jar包并混淆

昨天准备把写好的代码使用gradle打jar包出来,并打算加混淆。打jar包容易,结果在混淆上走了弯路。 首先打jar包的配置很简单,使用jar的task,具体代码如下: task buildJar(type: Jar, dependsOn: ['...


详解如何使用代码进行音频合成,以Java为示例语言,以Android为示例平台

音频合成在现实生活中应用广泛,在网上可以搜索到不少相关的讲解和代码实现,但个人感觉在网上搜索到的音频合成相关文章的讲解都并非十分透彻,故而写下本篇博文,计划通过讲解如何...


Android应用性能优化之使用SparseArray

最近在看一些Android应用性能优化的文章时,发现提到了SparseArray替代HashMap可以优化app性能,就对SparseArray做了一番了解,并记录使用心得。 我们来看看SparseArray点击进去包含了那些方法 ////...


Android线程,线程池使用及原理博文参考

这块的知识可以说是一大块,要撸清楚还是要花点时间,线程池中关联到的队列不仅在线程池中使用,在各种第三方网络框架和图片框架等等中也是通过自己调度队列来实现异步。有关理论的东西...


Android中使用Rxjava时,内存泄漏了吗?

今天有位同学问了我一个问题,话说,问我 “有遇到网络请求一半,退出Activity造成的Theard泄露吗?已在销毁时调用了un了 我去查看了下rx的源码的unsubscribe方法,定位到一个实现类,NewThre...


Retrofit使用OkHttp保存和添加cookie

Retrofit的cookie的保存和添加都可以用 Interceptor 来实现 下面是接收请求中返回并保存cookie的代码示例: public class ReceivedCookiesInterceptor implements Interceptor {private Context context;public ReceivedCookiesInterc...


使用Kotlin进行Android开发

Kotlin,原意是在俄罗斯的一个小岛,JetBrain在2011年推出了以这个来命名的一个运行在JVM上的语言, 看上去有点类似C#和Scala的结合,并且同为静态类型,作为一门JVM上的语言,可以轻松兼容...


Android写出高效清晰Layout布局文件的一些技巧

人们谈论Android性能的时候总是习惯讨论怎么写出清晰高效的Java代码,却忽略了layout布局文件。layout布局缓慢的渲染速度对app性能也有的很大的影响。充满不必要的views和可读性差的layout文件会...