ConstraintLayout布局浅析

Android studio 升级到了2.3版本,发现有更新,ConstraintLayout布局一点不了解,百度有好多,参照郭神的文章进行了一点了解,故记录

一、首先新建model ,我把命名 alayoutdemo,若版本为2.2我们需要在app/build.gradle文件中添加ConstraintLayout的依赖

dependencies{
	compile 'com.android.support.constraint:constraint-layout:1.0.1'
	}

之前ConstraintLayout库最新的版本是1.0.0-beta4,这个是正式版本,直接把项目升级到2.3版本貌似不用添加依赖

二、打开res/layout/activity_main.xml文件,打开之后默认布局ConstraintLayout


ConstraintLayout中比如想去掉一个button控件,直接选中控件,点击delete键就能删除该控件


上图主操作区域内有两个类似于手机屏幕的界面,左边的是预览界面,右边的是蓝图界面。这两部分都可以用于进行布局编辑工作,区别是左边部分主要用于预览最终的界面效果,右边部分主要用于观察界面内各个控件的约束情况。

三、基本用法

若想再布局中添加一个按钮,只需要从左侧的Palette区域拖一个Button进去就可以了,如下图所示

然后给button添加约束,每个控件的约束都分为垂直和水平两类,一共可以在四个方向上给控件添加约束,如下图所示。


图中Button的上下左右各有一个圆圈,这圆圈就是用来添加约束的,我们可以将约束添加到ConstraintLayout,也可以将约束添加到另一个控件。比如说,想让Button位于布局的下面,就可以这样添加约束,如下图所示。


如果我们想要让Button居中显示,那么就需要给它的上下左右都添加约束,如下图所示


还可以使用约束让一个控件相对于另一个控件进行定位。比如说,我们希望再添加一个Button,让它位于第一个Button的正下方,并且间距51dp,那么操作如下所示。


删除约束的方式一共有三种

1、删除一个单独的约束,将鼠标悬浮在某个约束的圆圈上,然后该圆圈会变成红色,这个时候单击一下就能删除了

2、删除某一个控件的所有约束,选中一个控件,然后它的左下角会出现一个删除约束的图标,点击该图标就能删除当前控件的所有约束

3、删除当前界面中的所有约束,点击工具栏中的删除约束图标即可


四、Inspector

当选中任意控件的时候,在右侧的properties区域就会出现很多属性选项


可以设置控件的所有属性,文本,颜色、背景、点击事件等等

properties区域的上半部分,这部分被称为inspector


在Inspector中有一个纵向的轴和一个横向的轴,这两个轴也是用于确定控件的位置的,给Button的上下左右各添加了一个约束,然后Button就能居中显示了,其实就是因为这里纵横轴的值都是50。如果调整了纵横轴的比例,那么Button的位置也会随之改变









参考:http://mp.weixin.qq.com/s/kf5iXAma5_6yhyS9gAQPkQ

猜你喜欢

转载自blog.csdn.net/qq_36636969/article/details/60868211