ActionScript
TypeScript
JavaScript

UI编辑基础:选取,修改,创建,删除

发布时间:2017-03-13

UI编辑是LayaAirIDE的基础操作,双击"xx.ui"可以打开页面进行编辑,常用的基础操作为:选取,修改,创建,删除。


一、选取

        选取UI节点时,可以通过层级面板或编辑面板两种方式。

        1.1 通过层级面板选取:

        blob.png

        (图1)UI编辑器的层级管理面板

            1.1.1 单选

            直接点击选取某个UI对象;

            1.1.2 多选        

            A、按住Ctrl的同时可点击选取间隔的多个;

            B、按住Shift的同时可点击选取相邻的多个;

            Tip: 需要注意的是,层级面板使用多选操作时,只能选取同级的的UI节点。

        1.2 通过编辑面板选取:

            blob.png

            (图2)UI编辑器的编辑面板

            1.2.1 单选

            直接点击视图中的某个UI节点

            1.2.2 多选

            按住Ctrl的同时可点击选取多个UI节点

            1.2.3 全选

            Ctrl+A 可全选

        1.3 进入子节点选取:

            在编辑面板内,如果要对容器的子节点进行选取等操作,需要先选取根节点中的容器(如图3),然后双点进入选取(如图4)。双击编辑区空白处可退出子点节。

        

        blob.png

          (图3)选取根节点容器

        blob.png

        (图4)进入子节点后选取子节点中的对象。


二、UI修改

        在UI的调整修改方面,可以通过属性面板修改,也可以直接在编辑区修改。

        2.1 在编辑区修改

        blob.png

        (图5)

        在编辑区,我们可以通过工具栏上的快捷键、手动拖拽等方式进行UI修改,主要修改x,y位置信息,高与宽,中心点。


        2.2 属性面板修改                        blob.png

        (图6)

         在属性面板中,可以通过修改属性参数进行修改UI,通常与编辑区修改结合使用。


三、创建UI节点

       3.1  从资源面板拖到编辑区

        blob.png

          (图7)       

        3.2  从组件面板拖到编辑区

        blob.png

           ( 图8)  

       3.3  在层级面板右键添加

        blob.png

        (图9)

        Tips: 从资源面板拖到编辑区的组件会自动设置对应的皮肤属性,而从组件面板拖到编辑区的组件需要手动设置皮肤。


四、删除UI节点

        4.1 编辑面板中删除

            blob.png

            4.1.1 选中节点后,按Backspace删除

            4.1.2 选中节点后,按Delete删除

            4.1.3 选中节点后,右键点击“删除”

        4.2 层级面板中删除

        blob.png

        4.2.1  选中节点后,按Delete删除

        4.2.2 选中节点后,右键点击“删除”


以上的用法不仅是UI编辑,场景编辑也是如此。