快捷搜索:  as

Android ConstraintLayout的基本使用

进级Android studio到2.3版本之后,发明新建Activity或fragment时,xml结构默认结构由RelativeLayout变动为ConstraintLayout了,既然已经保举应用ConstraintLayout,学会若何应用就很有需要了。本文的主如果目标是:图文结合,讲讲若何应用ConstraintLayout。

引入ConstraintLayout###

为了应用ConstraintLayout,必要在app/build.gradle文件中添加响应依附:

dependencies {

compile 'com.android.support.constraint:constraint-layout:1.0.1'

}

此前ConstraintLayout依附库版本号都带有beta字眼,现在已经推出正式版本1.0.1。当然应用AS新建activity时,AS会自动添加这行依附的。

创建ConstraintLayout###

新建ConstraintLayout结构文件后,打开如图所示:

虽然ConstraintLayout和RelativeLayout等都是ViewGroup的子类,但RelativeLayout,FrameLayout等是位于widget包下的,ConstraintLayout则是在Support包下的。点击界面左下角的“Design”和“Text”可以切换显示视图,“Design”视图是可视化视图,供给拖拽等功能实现界面结构;“Text”视图是经由过程编写xml代码实现界面结构。

对付传统结构,大年夜部分开拓者都是经由过程编写xml代码来现实结构的,显得“Design”这个可视化对象相称的鸡肋。但对付ConstraintLayout来说,却很得当应用这个可视化对象来实现结构,本日将应用“Design”视图来阐明ConstraintLayout的应用。先来察看“Design”视图,

左侧区域是预设的控件聚拢,顶部区域是操作栏位,右侧区域则是预览感化。

基础操作###

界面转换####

假如结构不是ConstraintLayout,可以经由过程下图操作进行转换:

假如转换前的界面是嵌套的,你可以选择一层一层转换,也可以选择在根目录转换。应用的时刻,发明这个转换功能并不是很强大年夜,不能确保转换后界面维持同等。

添加控件####

假如想添加一个Button,只需从左侧的Palette区域拖拽到预览区域就可以了。拖拽完成后,会在结构中自动天生响应的xml代码。“Design”对象是经由过程自动天生代码来实现结构的,本色上照样经由过程xml实现结构。两者是互相联系的,此中一个发生改变,另一个会对应改变。下图,添加一个Button:

经由过程拖拽,现在已经添加了一个Button。可以在“Text”视图中看到,自动天生了xml代码。虽然添加了Button,但因为还没有给这个Button添加约束,以是在“Text”视图下,可以看到Android Studio报错了:没有为view添加约束,但依然容许运行。因为没有约束,Button并不知道自己所处的位置,实际运行效果和预览效果是不一样的,Button会呈现在左上角。假如拖拽Button后,发明Button已经有约束,那么肯定是打开了AutoConnect开关,这个下文再详说。

添加约束####

选中Button,能在高低阁下看到四个空心小圆圈,把鼠标移动到小圆圈上,小圆圈会变成绿色。这四个小圆圈便是用来给Button添加约束的,实际上所有控件view都有这样的4个小圆圈。现在给Button左边和右边各添加一个约束,如下图所示:

只需选中小圆圈然后拖动鼠标到父结构边框即可成功添加约束。上图中,左侧的预览图叫“Design”,右侧蓝色的视图叫“Blueprint”,添加约束的操作在随意率性一个视图上都可以完成。

上面的约束是控件到父结构的约束,控件和控件间的约束也是类似。现在再添加一个Button,这个Button在上一个Button的下方,间距86dp(随便给的),如下图:

删除约束####

删除控件的约束有多种要领:

1.删除全部结构的约束,如下图:

2.删除某一控件的所有约束:选中该控件,右键,选择“Clear all Constraints”;或者,选中该控件,点击左下角的X符号;当然假如你全部控件都删除了,与之相关的约束也同时被删除了。如下图:

3.删除某个控件的某个约束:选中该控件后,会在控件的高低阁下显示小圆圈,把鼠标移到小圆圈上,假如没有约束,小圆圈是绿色的;假如已经存在约束(每个小圆圈有且仅有一个约束),小圆圈是血色的,点击变红的小圆圈就能删除对应的约束了;或者从小红圈从新拖拽一个新约束,也会调换掉落旧约束。如下图:

查看控件属性####

选中对应的控件,点击右侧的“Properties”,打开属性面板,如下图

默认显示较为常用的属性,假如必要显示更多属性,滚动到底部,点击View all properties查看所有的属性。不确定这里是否席卷了所有的属性值,假如找不到,那只能经由过程xml编写了囖。至于改动控件属性,直接在该面板上改动即可。

下面重点关注属性面板上的** Inspector**视图,如下图:

先说说较为直白的地方:

1.ID栏:这里填写的id便是标识view的ID;

2.layout_width和layout_height:描述控件大年夜小的,可以直接填写数值抉择大年夜小,也可以选择wrap_content或match_parent(这两个选项,下面细说),还可以直接拖动来抉择控件的大年夜小,如下图:

新增一个Button,给高低阁下添加上约束,此时,Button默认居中显示,选中该Button,查看它的inspector,如下图所示:

察看血色框内的两条轴,一条是垂直显示的,一条是水平显示,这两条轴是用于确定Button位置的。现在Button是居中显示,响应地可以看到这两条轴上标识的数值都是50,假如拖动Button,可以看到响应的数值会发生变更。例如,水平向右拖动Button,水平轴上的数值会随之变大年夜(值的范围在0-100之间);按住水平轴上的数字进行拖动,能在水平偏向上改变Button的位置。

现在将水平轴移到到最右边,数值为100,察看预览图:

只管已经移动到最右边了,但发明Button离最右边照样有间距。这是由于临盆约束时,系统默认设置了8dp的间距(margin),如血色框所示。可以点击右边血色框内的数字改动间距。察看预览图,发明每个约束上都有直线和波浪线。此中直线表示的是间距(margin),波浪线则相称是上面提到的水平轴或垂直轴,在这里拖动,用于改变Button的百分比位置。

每次添加约束都自动添加一个间距的话,也是挺烦,点击下图的血色框位置可以这样把它干掉落:

控件的size###

上面提到了Button的layout_width和layout_height,和传统结构相似,有三种:固定值、

wrap_content和match_parent,如下图所示:

1. 图案表示 wrap_content;

2.|-----| 图案表示 固定值;

3.波浪线图案表示 match_parent,这里的match_parent和在RelativeLayout下的match_parent不合,RelativeLayout下的match_parent是用于添补溢当前控件的父结构,而这里的match_parent是用于添补溢当前控件的约束规则。假设将layout_width设置为match_parent,那么在水平偏向上,不能再移动控件,也便是上面说的水平轴移动不再生效,预览图中,控件充溢约束规则。

当layout_width或layout_height设置为match_parent时,右上角会呈现一个小三角,如下图:

这个小三角的感化是:切换纵横比约束,简单来说便是设置宽高的比例!如下图:

假如经由过程小三角设置纵横比约束后,再经由过程手动变动宽高数值,那后者将覆盖前者。

有了基础的懂得后,我们来看看一些繁杂点的场景。

对齐###

对齐约束

实现两个Button左对齐:添加两个Button,一上一下,从Button A添加约束到Button B,如下图操作添加对齐约束:

或者应用Align进行对齐:选中所要对齐的控件,点击Align,着末选中对齐的要领即可,如下图操作:

从Button A添加左对齐约束到Button B后,我们发明,Button A将在水平偏向上跟随Button B移动。

除了这种对齐要领外,Android studio还供给了Guideline和Baseline对齐要领!

斟酌下面的场景:要是现在有两个Button,一上一下,水平偏向都间隔间隔左边30%,如下图:

按照我们上面所说的,应该这样实现:将两个Button的水平轴数值设置为30即可。但现在我想同时让这两个按钮间隔左边40%(原本是30%),或者改为间隔右边40%。按照原本的做法,只能一个一个挨着去改动约束,有没有更好的实现要领呢?** Guideline**应运而生。

Guideline####

添加Guideline,如图:

Guideline有两种,一种是垂直偏向的,一种是水平偏向的,现在察看一下Guideline,如下图:

选中guideline,显示一条虚线,顶部可以看到一个向左的箭头,下方有一个数字(假设是80),

表示:间隔父结构左边80dp;点击顶部箭头,发明箭头向右了,下方有一个数字(假设是300),表示:间隔父结构右边300dp;再次点击顶部箭头,发明箭头变成了%符号,下方有一个百分比数字(假设是20%),表示在父结构水平偏向20%的位置。我们可以拖动guideline变动数值。

guideline的感化

简单来说便是帮助控件确定位置的帮助线!

那若何实现上面提到的功能呢?先添加一个垂直guideline,再添加两个Button,分手设置按钮右侧到guideline的约束,如下图:

这样,拖动guideline,两个Button都邑跟着移动了。

现在我们实现了不合控件以guideline为基准,随guideline移动而移动。那若何实现一个控件随另一个控件移动而移动呢,** Baseline**登场啦!

Baseline####

添加Baseline

选中Button,点击下方的

,就为view添加了baseline,如下图:

为两个Button添加Baseline约束

拖入两个Button,选中Button A,添加Baseline后,拖拽到Button B即可,如下图:

每个控件的baseline只有一个,从Button A拖拽到Button B,B会自动天生baseline,现在两个button已经建立baseline约束了。我们发明,Button A只能水平偏向上拖动,垂直偏向上无法拖动;Button B可以水平拖动,也可以垂直拖动,而且在垂直偏向上移动时,Button A也会随之移动。由A到B添加了baseline,意味着A在垂直偏向上的位置只能由B来抉择了,这便是Baseline的对齐感化。

自动添加约束###

添加自动约束的要领有两种:一个是Autoconnect

另一个是Infer Constraints

1.Autoconnect默认是关闭的,开启后,添加控件时,Android studio会检测用户的意图,自动为控件添加约束。比如,拖动一个Button到预览图水平居中的位置,AS检测出可能是盼望居中,就会显示一条虚线,这时松开Button,就会自动为Button添加约束,如下图所示:

留意只有AS检测出用户意图后(即预览图中呈现虚线),才会自动添加约束,否则也不会有约束。

2.Infer Constraints和Autoconnect功能相似,但比后者更强大年夜。Autoconnect是自动为正在操作的控件添加约束,而infer Constraints则是自动为全部结构内的控件添加约束。适用于较繁杂的界面,为这样的界面一键天生约束!

必要留意的是:经由过程这两种要领自动添加的约束不必然相符要求,这时刻手动改动就行了。

为自定义的控件添加约束####

Design界面运行拖动的控件都是系统预设的控件,对付自定义的控件怎么办呢?

找不到可以直接将自定义控件拖进面板的操作,可以先对一个根基控件(如Button)进行约束,然后再变动xml代码,将自定义控件调换该Button。对付自定义的属性也必要手动编写xml代码。

暂时能想到的就这些,如有谬误请指出,发明罅漏再弥补,Thx.

Android开拓

© 著作权归作者所有

举报文章

Clement_wu

下载app生生长微博图片

分享到QQ空间

分享到Twitter

分享到Facebook

分享到Google+

分享到豆瓣

'>更多分享

广告

-->

您可能还会对下面的文章感兴趣: