Android界面布局学习-ConstraintLayout

先前学习的Android六大布局基本都是靠编写XML代码完成的,较为复杂,而ConstraintLayout是Android Studio 2.2新增特性,适合使用可视化的方式来编写界面,大多通过拖拽控件的方式进行界面布局,使用约束来指定各个控件的位置和关系,同时Android Studio自动生成XML代码。

接下来是练习一个简单注册页面:

1)Android Studio2.3之后的版本新建一个项目时,XML默认布局便是ConstraintLayout,若默认不是ConstraintLayout,可将XML布局代码改为android.support.constraint.ConstraintLayout即可





2)从Palette区中选择3个TextView控件拖入当前Component Tree,也可以直接拖入页面,并分别编辑Text值为"用户名"、"密码"、"确认密码"

接着拖入一个EditText(Plain Text)作为用户名输入框,两个EditText(Password)作为密码输入框

最后拖一个按钮Button,双击Button可编辑Text为“注册”,以上控件位置都可随意调整

结果如下图:

Android界面布局学习-ConstraintLayout_第1张图片

3)如果这个时候运行,显示界面中所有控件便会全部重合在一起,结果并非上图中所示,因为还没有设置控件和容器的约束,所以Component Tree中控件都打了红色感叹号。

设置控件约束:

在界面中单击控件,便会在控件的上下左右各出现一个圆圈,这圆圈就是用来添加约束的,我们可以将约束添加到ConstraintLayout,也可以将约束添加到另一个控件。选择上下中一侧和左右中一侧,便可固定控件的位置。

删除控件约束:

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

添加约束后如下图(看起来有点乱

Android界面布局学习-ConstraintLayout_第2张图片

注:控件打了黄色感叹号让我突然想起string常量是要写在strings.xml中,以减低数据的冗余,便于修改。所以不要像我这样直接写入控件的Text值,一定要养成良好的编程习惯。

运行结果:

Android界面布局学习-ConstraintLayout_第3张图片

你可能感兴趣的:(Android基础)