Android Studio 2.2新增布局——ConstraintLayout完全解析

时间:2021-05-06 00:03:35

,但是Button并没有紧贴到布局的最右侧,这是为什么呢?实际上,Android Studio给控件的每个方向上的约束都默认添加了一个16dp的间距,从Inspector上面也可以明显地看出来这些间距的值。如果这些默认值并不是你想要的,可以直接在Inspector上进行修改,如下图所示:

Android Studio 2.2新增布局——ConstraintLayout完全解析

接下来我们再来学习一下位于Inspector最中间的那个正方形区域,它是用来控制控件大小的。一共有三种模式可选。

Android Studio 2.2新增布局——ConstraintLayout完全解析表示wrap content。

Android Studio 2.2新增布局——ConstraintLayout完全解析表示固定值,也就是给控件指定了一个固定的长度或者宽度值。

Android Studio 2.2新增布局——ConstraintLayout完全解析表示any size,它有点类似并用于替代match parent,是属于ConstraintLayout中特有的一种大小控制方式,下面我们来重点讲解一下。

首先需要说明,在ConstraintLayout中是有match parent的,只不过用的比较少,因为ConstraintLayout的一大特点就是为了解决布局嵌套,既然没有了布局嵌套,那么在ConstraintLayout中matchparent也就没有多大意义了。

而any size就是用于在ConstraintLayout中顶替match parent的,先看一下我们怎样使用any size实现和match parent同样的效果吧。

比如说我想让Button的宽度充满整个布局,操作如下图所示。

Android Studio 2.2新增布局——ConstraintLayout完全解析

那有的朋友可能会问了,这和match parent有什么区别呢?其实最大的区别在于,match parent是用于填充满当前控件的父布局,而anysize是用于填充满当前控件的约束规则。举个例子更好理解,如果我们有一个新的Button,它的其中一个约束是添加到当前这个Button上的,那么any size的效果也会发生改变,如下图所示。而如果是match parent的效果,那么高度会填充整个屏幕了。

Android Studio 2.2新增布局——ConstraintLayout完全解析

1.3.2 Guidelines

刚才我们已经实现了让一个按钮居中对齐的功能,如果我们想让两个按钮共同居中对齐该怎么实现呢?

其实这个需求很常见,比如说在应用的登录界面,都会有一个登录按钮和一个注册按钮,不管它们是水平居中也好还是垂直居中也好,但肯定都是两个按钮共同居中的。想要实现这个功能,仅仅用我们刚刚学的那些知识是不够的,这需要用到ConstraintLayout中的一个新的功能,Guidelines。

我们希望让下面两个按钮在水平方向上居中显示,在垂直方向上都距离底部64dp,那么就需要先添加一个垂直方向上的Guideline,如下图所示。

Android Studio 2.2新增布局——ConstraintLayout完全解析

Guideline默认是使用的dp尺,我们需要选中Guideline,并点击一下最上面的箭头图标将它改成百分比尺,然后将垂直方向上的Guideline调整到50%的位置,这样就将准备工作做好了。接下来实现需求如下所示。

Android Studio 2.2新增布局——ConstraintLayout完全解析

1.3.3  自动添加约束

如果界面中的内容变得复杂起来,给每个控件一个个地添加约束也是一件很繁琐的事情。为此,ConstraintLayout中支持自动添加约束的功能,可以极大程度上简化那些繁琐的操作。自动添加约束的方式主要有两种,一种叫Autoconnect,一种叫Inference,我们先来看第一种。

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

Android Studio 2.2新增布局——ConstraintLayout完全解析

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

Android Studio 2.2新增布局——ConstraintLayout完全解析

然后我们在这个Button的下方再放置一个Button,效果如下。

Android Studio 2.2新增布局——ConstraintLayout完全解析

可以看到,只需要将Button拖放到界面上,Autoconnect会判断我们的意图,并自动给控件添加约束。不过Autoconnect是无法保证百分百准确判断出我们的意图的,如果自动添加的约束并不是你想要的话,还可以在任何时候进行手动修改。总之,可以把它当成一个辅助工具。

以上是Autoconnect的用法,接下来我们看一下Inference的用法。Inference也是用于自动添加约束的,但它比Autoconnect的功能要更为强大,因为AutoConnect只能给当前操作的控件自动添加约束,而Inference会给当前界面中的所有元素自动添加约束。因而Inference比较适合用来实现复杂度比较高的界面,它可以一键自动生成所有的约束。

下面我们就通过一个例子来演示一下Inference的用法,比如界面上现在有两个TextView,两个EditText,和两个Button,如下图所示。

Android Studio 2.2新增布局——ConstraintLayout完全解析

接下来我们先将各个控件按照界面设计的位置进行摆放,摆放完成之后点击一下工具栏上的Infer Constraints按钮,就能为所有控件自动添加约束了,如下图所示。

Android Studio 2.2新增布局——ConstraintLayout完全解析

现在运行一下程序,最终效果如下图所示:

Android Studio 2.2新增布局——ConstraintLayout完全解析

2.  结束语

到这里,我们基本就把ConstraintLayout中的重要用法都概括到了,ConstraintLayout有很多的功能仍然在改进当中。比如说,beta3版本中引入的Chains功能就是一个很强大的新功能,不过由于这个功能需要配合Android Studio 2.3来使用,而2.3目前也还没有出正式版,因此ConstraintLayout的更多功能就让我们拭目以待吧。

Android Studio 2.2新增布局——ConstraintLayout完全解析的更多相关文章

  1. [Android实例] Android Studio插件-自动根据布局生成Activity等代码1.4 (开源)(申明:来源于网络)

    [Android实例] Android Studio插件-自动根据布局生成Activity等代码1.4 (开源)(申明:来源于网络) 地址:http://www.eoeandroid.com/thre ...

  2. android学习——Android Studio下创建menu布局文件

    一.问题: android studio项目中没有看到menu文件夹: 在android studio项目中想要添加menu布局文件,一开始我的做法是:直接在res文件夹右键选择xml文件来添加,如下 ...

  3. Android Studio下创建menu布局文件

    一.问题: android studio项目中没有看到menu文件夹: 在android studio项目中想要添加menu布局文件,一开始我的做法是:直接在res文件夹右键选择xml文件来添加,如下 ...

  4. Android studio: Android Studio 3.5格式化布局代码时错乱

    Android studio 又来搞事情了,更新到3.5版本后,格式化布局文件代码时,布局文件代码竟然会发生变化,意思是不让格式化代码了呗? 垃圾的IDE. 解决办法: “File”-"Se ...

  5. Android学习笔记之Android Studio下创建menu布局文件

    1.创建menu文件夹 Android Studio项目中如果没有menu文件夹,在res文件夹右键,new-Android resource directory: 则会弹出下图对话框,在Resour ...

  6. Android Studio 无法预览布局问题:com/android/util/PropertiesMap

    应该是API版本太高,换成较低的就好了 API24,无法预览 换成22就没事了 Android Studio要比Eclipse好用很多,虽然Eclipse现在可以直接安装Android开发板,但AS界 ...

  7. Android Studio教程01-的工程和目录结构解析

    目录 1.主目录 1.1. app目录 1.2.项目资源文件夹res 2. 理解build.gradle文件 2.1. 外部build.gradle 2.2. app文件下的build.gradle ...

  8. Android Studio 1.1.0 向导页(首页) 解析,以及版本控制 (SVN 和 GIT 的检出)

    使用Android Studio首先要理清楚, Android Studio 的 project  相当于Eclipse的 Workspace Android Studio 的 module 相当于E ...

  9. android studio学习---实时布局(Live Layout)

    Android Studio中的实时布局功能允许大家在无需将应用程序运行在设备或者模拟器中的前提下,直接预览应用的用户界面.实时布局是一款极为强大的工具,能够帮助开发者节约大量时间.在实时布局的帮助下 ...

随机推荐

  1. ACE - Reactor模式源码剖析及具体实现(大量源码慎入)

    原文出自http://www.cnblogs.com/binchen-china,禁止转载. 在之前的文章中提到过Reactor模式和Preactor模式,现在利用ACE的Reactor来实现一个基于 ...

  2. 上传文件及$_FILES的用法实例

    Session变量($_SESSION):�php的SESSION函数产生的数据,都以超全局变量的方式,存放在$_SESSION变量中.1.Session简介SESSION也称为会话期,其是存储在服务 ...

  3. JavaScript常用代码段

    总结一下在各种地方看到的还有自己使用的一些实用代码 1)区分IE和非IE浏览器 if(!+[1,]){ alert("这是IE浏览器"); } else{ alert(" ...

  4. notepad++和gcc搭建语言环境

    1,工具: Notepad++:http://pan.baidu.com/s/1sjlXl6X MinGW:http://pan.baidu.com/s/1qWyQ3lq 2,安装notepad++ ...

  5. 在 Windows Azure 网站中进行纵向扩展和横向扩展

    编辑人员注释:本文章由 Windows Azure 网站团队的项目经理 Byron Tardif 撰写. 当您开始一个新的 Web 项目,或者刚刚开始开发一般的网站和应用程序时,您可能希望从小处着手. ...

  6. chroot jail

    注意,原标题是:Linux Virtualization using Chroot Jail,我实在不知道怎么翻译,所以,自作主张,选了chroot jail作为标题.原文地址 chroot jail ...

  7. C#自动实现Dll(OCX)控件注册的两种方法

    尽管MS为我们提供了丰富的.net framework库,我们的程序C#开发带来了极大的便利,但是有时候,一些特定功能的控件库还是需要由第三方提供或是自己编写.当需要用到Dll引用的时候,我们通常会通 ...

  8. Python爬虫——Request模块

    # 使用 Requests 发送网络请求# 1.导入 Requests 模块import requests# 2.尝试获取某个网页 # HTTP 请求类型r = requests.get('https ...

  9. VS2008 打开 VS2010解决方案及项目(转)

    第一步,修改解决方案后缀为sln的文件 Microsoft Visual Studio Solution File, Format Version 11.00  # Visual Studio 201 ...

  10. spring cloud: eureka搭建

    1. 添加pom 依赖: <parent> <groupId>org.springframework.boot</groupId> <artifactId&g ...