ActionScript
TypeScript
JavaScript

使用LayaAirIDE搭建UI页面

发布时间:2017-01-04

 

前面我们已经介绍了编辑器各个面板的功能和常用资源的工作流程。本文将介绍如何使用编辑器创建和编辑页面里的显示对象。

 

创建界面

我们可以通过在项目管理器面板右键选择新建页面,弹出新建文档窗口,选择页面标签页,输入页面名称,设置页面的宽度和高度,点击确定后会新建一个页面并在编辑区中打开此页面。 

2.png

  

在界面中添加显示元素

在编辑区中打开创建的页面。在页面中添加显示元素也就是从资源管理器面板里单击选择要添加到页面里显示元素,然后使用拖拽的方式,将显示元素拖放到场景编辑器的页面。

常用于UI编辑的显示元素是UI组件对象。这里,我们拖拽一个Image 组件到场景中。在场景中选中一个显示元素时,此显示元素会显示一个红色的边框,这个红色的边框就是此显示元素的约束框。

 3.png

 

选中显示元素

编辑页面中的显示元素时,最基础的操作就是我们需要选中这个显示元素。在编辑器中有多种方式对显示元素进行选中操作。

1.单击显示元素可以选中此显示元素。

2.使用按下鼠标后拖拽一个红色选择区域方框再抬起鼠标的方式选中方框内的所有显示元素。

3.使用快捷键 Ctrl + A 可以实现对当前页面中所有显示元素的选中操作。

 

坐标与布局

在页面中添加的显示元素,通常是需要调整它的显示位置的。在编辑中我们可以选中显示元素,在属性里修改它的位置属性的值进行显示位置的调整。

最常用的位置调整是改变属性 x 和属性 y 的值。x 和 y 分别代表的是当前显示对象在父容器中的坐标值。使用x、y属性调整的是显示对象相对于父容器的绝对位置。还可以使用相对布局属性 left、right、top、bottom、centerX 和 centerY来实现显示元素位置跟随父容器的显示区域而变化的效果。

 

4.png

在LayaAir 中使用的坐标系是左上角为(0,0)点。横向为X轴,X值从左向右递增。纵向为Y轴,Y值从上向下递增。

6.png

 

显示位置相关属性

 

属性

功能说明

x

表示显示对象相对于父容器的水平方向坐标值。

y

表示显示对象相对于父容器的垂直方向坐标值。

left

表示对象的显示区域左边框相对于父容器的显示区域左边框的水平距离(以像素为单位)。

right

表示对象的显示区域右边框相对于父容器的显示区域右边框的水平距离(以像素为单位)。

top

表示对象的显示区域上边框相对于父容器的显示区域上边框的水平距离(以像素为单位)。

bottom

表示对象的显示区域下边框相对于父容器的显示区域下边框的水平距离(以像素为单位)。

centerX

在父容器中,此对象的水平方向中轴线与父容器的水平方向中心线的距离(以像素为单位)。

centerY

在父容器中,此对象的垂直方向中轴线与父容器的垂直方向中心线的距离(以像素为单位)。

 

使用工具栏调整位置

在对页面里的组件等元素进行位置排列时,可以使用工具栏中的位移工具图标进行位置的调整,详情可以参见编辑器界面基础中的工具栏介绍篇。 

图片1.png

 对多个显示元素的位置进行对齐操作时,可以在选中后使用编辑器工具栏中的对齐工具进行排列。

 图片1.png