使用编辑器制作界面

发布时间:2015-10-29

          Morn UI一个显著优势就是Morn Builder(可视化编辑器),实现界面设计的所见即所得,  《Morn简介及使用教程》 文章中已经介绍了编辑器的简单使用方法,今天给大家介绍一下Morn UI每个组件的属性及在编辑器的简单使用方法。

打开编辑器,在E:\MornCompTest下创建了新UI项目命名为MornCompTest

复制基础组件到资源目录,然后F5刷新编辑器,即可看到资源组件树

然后Ctrl+N新建页面命名为ButtonTest,然后我们拖动左边的button到视图中,结果如下图:

   blob.png

编辑器分为菜单工具栏区,界面列表区,资源组件区,设计视图区,组件属性区,图层区等6个区域

基础属性


在组件属性区,每个组件都有自己的属性,每个组件都有一些公用属性,比如:

  blob.png   

name是组件实例的名字,x,y,width,height分别是组件坐标和宽高,var是组件实例的全局引用名,如果定义了这个,就可以在代码很方便的找到它。除了这些,morn ui所有组件还有下面基础属性

  blob.png

 

编辑器内鼠标放在属性文字上,会自动提示属性的名称和格式


下面介绍各个组件的使用方法和属性含义

基础可视化组件

1.Label组件  

blob.png 

Label是文本,设置text可以显示其内容,设置isHtml=true后,会显示html内容

autoSize属性如果设置为left,就是自适应文本,宽度会随着文本长短的变化而变化

label还可以设置skin,作为文本的背景图片,同时支持sizeGrid,用来9宫格拉伸背景(详细格式请参考《深入了解Morn UI》 )

stroke是文字描边,格式为(颜色,透明度,水平模糊量,垂直模糊量,强度,质量)比如红色描边可以定义为(0xff0000,1,5,5,2,1)

leading是段落之间的间距


2.TextInput组件

 blob.png

 

TextInput是输入框,继承自Label,除了具有Label的属性外,额外多了上面三个属性,了解即可

3.TextArea组件

  blob.png

TextArea是文本域,继承自TextInput,除了具有TextInput的属性外,额外多一个scrollBarSkin属性,可以用来设置滚动条皮肤


4.Button组件

  blob.png

Button是按钮组件,通过skin可以设置按钮皮肤,sizeGrid定义了按钮9宫格拉伸

labelColors是按钮文本在各种状态的颜色值,分别为(正常状态,鼠标经过状态,鼠标点击状态,禁用状态),比如(0x32556b, 0x32556b, 0x32556b, 0xC0C0C0)

toggle设定了是否是回弹按钮,其他一些属性和label类同


5.LinkButton,CheckBox,RadioButton组件

blob.png

LinkButton是下划线按钮,CheckBox是多选按钮,RadioButton是单选按钮,三者均继承自Button,属性也和Button一样

6.Image组件

  blob.png

Image是图形组件,具有url属性,设置url既可以是连接类,也可以是一个路径,支持异步加载,同时也可以设置9宫格拉伸。


7.Clip组件

 blob.png

Clip是位图切片,Clip类似flash的movieclip(动画剪辑),和Image类同,url既可以是资源连接类,还可以是一个路径动态加载

clip需要设置clipX属性和clipY属性,分别是图片行个数和列个数,支持多行多列,还可以设置clipWidth和clipHeight,这个是单个图标的宽高,程序会根据这个宽高算出clipX和clipY,比如上面图片行个数为10,列个数为1

Clip即可用来做icon,通过frame属性切换当前显示第几帧,又可作为位图动画,设置interval播放间隔进行播放,在编辑器选中clip,然后按回车键可以预览动画

frame就是当前切片显示的索引,从0开始。


8.FrameClip组件

  blob.png

FrameClip是矢量图动画组件,和clip类似,不同的是FrameClip是Morn UI唯一基于矢量图的组件

它的skin对象为Movieclip的连接类,可以设置动画间隔并进行播放

FrameClip组件的主要用途是UI特效,毕竟矢量图动画特效比位图动画要小很多,并且效果也好。

9.ProgressBar组件

 blob.png

ProgressBar是进度条组件,value范围是0到1,可以设置9宫格拉伸。


10.Slider 滑动条

  blob.png

Slider是滑动条,可以通过滑动设置得到value值,min,max属性控制最大及最小值,tick设定了滑动单位值,allowBackClick定义是否允许点击背景滑动。


11.HSlider,VSlider组件

HSlider是水平滑动条,VSlider是垂直滑动条,属性和Slider类同。


12.ScrollBar组件

 blob.png

ScrollBar是滚动条组件,其中scrollSize定义了每次滚动的数量。


13.ComboBox组件

blob.png


ComboBox是下拉框组件,labels属性可以设置下拉框列表值,比如label=“列表1,列表2”,用逗号隔开

visibleNum是下拉框列表一次显示的最大数量,如果label数超过这个数量,就会出现滚动条,通过scrollBarSkin可以设置滚动条皮肤。

 

容器组件

1.Box组件

Box是容器组件,容器在界面上不能被直观看到,也不能通过拖动组件树创建,而是通过转换方式把某些内容转换为容器

比如界面中同时选中两个按钮,通过快捷键Ctrl+B转换为容器,那么两个按钮就被包含在Box内,作为一个整体来控制

  blob.png  

选中一个容器,通过快捷键Ctrl+U,可以去除这个容器,和上面做相反的工作。


2.Container组件

  blob.png

Container是相对定位容器,继承自Box,增加了left,right,top,bottom等相对定位属性,同时增加了centerX,centerY等居中对齐属性

也可以通过Ctrl+B转换而来。


3.Panel面板

 blob.png

Panel继承Container,除了具有相对属性外,增加了滚动条和遮罩效果,无论里面的图片有多大,panel只会显示特定区域,通过滚动可以看到其他区域。


4.Tab组件

  blob.png

Tab是切换标签按钮组,可以设置labels属性设置标签,比如labels=“标签1,标签2”,多个用逗号隔开

direction定义了tab的布局方向,是水平还是垂直

假如Tab里面的按钮摆放不规则,颜色都不一样,想个性化,那么就需要自定义Tab布局,请参考教程《容器使用与自定义组件》 。


5.RadioGroup组件

   blob.png

RadioGroup是单选按钮组,和Tab类似,可以设置labels=“单选1,单选2”进行设置,也可以通过direction属性选择布局的方向

RadioGroup也支持自定义布局,请参考教程《容器使用与自定义组件》


6.List组件

   blob.png

创建List:

添加一个label并选中,Ctrl+B转换为Box,设置Box的name属性为render,再选中Box通过Ctrl+B转换为List,设置List的行数,列数和间隔属性即可(分别为repeatX,repeatY,spaceX,spaceY)。


为list添加滚动条:

双击list,进入list内部,拖动一个滚动条到list内,修改name属性为scrollBar,即可自动识别,详细可参看Demo示例

最终结构如下:

<List x="214" y="274" repeatX="1" repeatY="5" spaceX="0" spaceY="5" var="list">
<Box x="0" y="0" name="render">
<Label text="label" x="27" y="4" name="label"/>
</Box>
<VScrollBar skin="png.comp.vscroll" x="89" y="3" width="15" height="150" name="scrollBar"/>
</List>

List和Tab一样,可以个性化自定义,请参考教程《自定义Tab,RadioGroup,List,ViewStack》

List是列表组件,继承自Box,repeatX,repeatY分别是列表项x,y方向每页最多显示的数量,spaceX和spaceY是列表项之间的间隔值,scrollSize是每次滚动的个数

List是比较常用的组件之一,同时也是最复杂,最灵活的组件,List还有很多高级用法,请参考教程《List高级使用教程》  


7.ViewStack组件

  blob.png

 

ViewStack是视图导航器组件,作为一个容器,用来存储多个视图,通过selectedIndex进行切换显示

使用方式:选择要包含进ViewStack的对象,分别命名为item0,item1,item2…,然后全选,Ctrl+B转换为ViewStack容器

最终结构如下:

<ViewStack x="364" y="328">
<Label text="view1111" name="item0" x="0" y="0"/>
<LinkButton label="view222" x="47" y="0" name="item1"/>
</ViewStack>


8.页面嵌套

  blob.png

页面嵌套类似Flex的自定义控件,可以把一个界面嵌套到另外一个界面内,只需选中一个界面,拖动到另外界面内部即可

这样做可以实现自定义的显示组件,同时达到多界面复用的效果,还可通过修改此控件的runtime属性来设置嵌套界面的逻辑类

了解更多页面嵌套内容,可以参考教程《页面嵌套的使用》

视图组件

1.View组件

View是视图类,一个界面就是一个视图,视图类实现了界面结构的解析,这里具有很大的灵活性

在创建界面的时候,会让你选择用哪种视图类,你甚至可以自定义自己的视图类,封装自己的逻辑,然后在编辑器让界面都继承自此自定义视图类,这就是Morn UI自定义灵活性的又一表现,详情请参考教程《自定义页面基类》

 

2.Dialog组件

Dialog是对话框类,继承自View,在view基础上增加了show,popup,close等弹出对话框方法,同时增加了拖拽,模式窗口等功能

全部组件集合如下图:

  blob.png

游戏开发所用的组件,Morn UI都精炼的提供了,这么多功能,仅仅给你的代码增加30多K的大小

并且每个组件都是经过深思熟虑,同时保证简单好学好用,又要高性能,并且可视化布局,还考虑到自定义扩展等特性

这一切组件,全部开源,你可以任意改动和扩展,开发适合自己的需求东西,Morn UI的一个重要特性就是灵活性,易扩展

所有这些,均免费,甚至可以商业应用。