最新的布局飞快的到来,让我们探索牛逼的布局。Android Studio中ConstraintLayout的使用

来源:互联网 发布:js获取对象的key 编辑:程序博客网 时间:2024/06/16 23:03

注意事项:必须在Android Studio的IDE中才有这个编译器中使用,编译器版本必须是2.2或更高的版本

一、ConstraintLayout使用时的基本配置

1、步骤一:在Tools–>Android–>SDK Manager打开这个窗口,选择到SDK Tools进行安装ConstraintLayout的sdk

这里写图片描述

这里写图片描述

2、步骤二:在app/build.gradle文件中进行配置,导入ConstraintLayout使用的类库

 compile 'com.android.support.constraint:constraint-layout:1.0.0-beta4'

3、步骤三:在创建项目的默认的activity_main.xml将布局修改成android.support.constraint.ConstraintLayout

这样,简单的使用就已经集成完毕

二、ConstraintLayout使用时的基本操作

1、拖一个Button按钮放入到布局文件中,这个时候还没有任何约束

这里写图片描述

2、我们可以观看上下左右都有一个小圆圈,我们可以通过拖拽实现添加约束

这里写图片描述

3、我们可以添加让第二个个button按钮在第一个button按钮的下面

这里写图片描述

4、我们添加完成约束后如何进行删除约束呢
(1)当鼠标悬停到小圆圈上,小圆圈变成红色,这个时候我们就可以删除约束

这里写图片描述

(2)删除某一控件的所有约束,我们首先进行选中当前的控件,下面会出现一个删除约束的图标。点击该图标删除所有的约束。

这里写图片描述

(3)用于删除当前界面的所有约束,在工具栏中有个删除约束的图标
这里写图片描述

三、ConstraintLayout进阶的使用
1、Inspector的使用

(1)当我们选中一个控件的时候,右面都会出现Properties区域有很多属性的选择

这里写图片描述

Properties区域的上半部分是Inspector,我们如图所示:

这里写图片描述

我们可以观察到他左右两边有一个横向的轴和一个纵向的轴。可以拖动进行改变控件的位置。如图所示,

这里写图片描述

我们发现位置移动到最右边,在布局中存在填充。默认上下左右的填充是16dp.我们可以通过修改值来进行取消填充的操作,如图所示

这里写图片描述

接下来我们再来学习一下位于Inspector最中间的那个正方形区域,它是用来控制控件大小的。一共有三种模式可选,每种模式都使用了一种不同的符号表示,点击符号即可进行切换。

● 表示wrap content,这个我们很熟悉了,不需要进行什么解释。

● 表示固定值,也就是给控件指定了一个固定的长度或者宽度值。

● 表示any size,它有点类似于match parent,但和match parent并不一样,是属于ConstraintLayout中特有的一种大小控制方式,下面我们来重点讲解一下。
首先需要说明,在ConstraintLayout中是有match parent的,只不过用的比较少,因为ConstraintLayout的一大特点就是为了解决布局嵌套,既然没有了布局嵌套,那么match parent也就没有多大意义了。
而any size就是用于在ConstraintLayout中顶替match parent的,先看一下我们怎样使用any size实现和match parent同样的效果吧。比如说我想让Button的宽度充满整个布局,操作如下图所示。

这里写图片描述

2、Guidelines的使用
(1)使用的需求:我们在界面中有一个登录按钮和一个注册按钮,让两个按钮共同的水平居中。
步骤一:在界面中拖拽两个按钮,一个是登录按钮,另一个是注册按钮,如图所示:
这里写图片描述

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

这里写图片描述

我来对上图中的操作进行一下解释。首先点击通知栏中的Guidelines图标可以添加一个垂直或水平方向上的Guideline,这里我们需要的是垂直方向上的。而Guideline默认是使用的dp尺,我们需要选中Guideline,并点击一下最上面的箭头图标将它改成百比分尺,然后将垂直方向上的Guideline调整到50%的位置,这样就将准备工作做好了。

步骤三:开始实现让两个按钮在水平方向上居中显示,并距离底部64dp的功能,如下图所示:

这里写图片描述

3、自动添加约束布局

不过如果界面中的内容变得复杂起来,给每个控件一个个地添加约束也是一件很繁琐的事情。为此,ConstraintLayout中支持自动添加约束的功能,可以极大程度上简化那些繁琐的操作。
自动添加约束的方式主要有两种,一种叫Autoconnect,一种叫Inference,我们先来看第一种。
想要使用Autoconnect,首先需要在工具栏中将这个功能启用,默认情况下Autoconnect是不启用的,如下图所示。

这里写图片描述

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

这里写图片描述

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

这里写图片描述

可以看到,只需要将Button拖放到界面上,Autoconnect会判断我们的意图,并自动给控件添加约束。不过Autoconnect是无法保证百分百准确判断出我们的意图的,如果自动添加的约束并不是你想要的话,还可以在任何时候进行手动修改。总之,可以把它当成一个辅助工具,但不能完全靠它去添加控件的约束。
以上是Autoconnect的用法,接下来我们看一下Inference的用法。Inference也是用于自动添加约束的,但它比Autoconnect的功能要更为强大,因为AutoConnect只能给当前操作的控件自动添加约束,而Inference会给当前界面中的所有元素自动添加约束。因而Inference比较适合用来实现复杂度比较高的界面,它可以一键自动生成所有的约束。
下面我们就通过一个例子来演示一下Inference的用法,比如界面上现在有两个TextView,两个EditText,和两个Button,如下图所示。

这里写图片描述

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

这里写图片描述

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

这里写图片描述

更改文章敬请关注下面的二维码:

这里写图片描述

0 0
原创粉丝点击