javascript原生移动云编程3 - 比web还简单的页面UI布局

用javascript在码实的云平台上，可以在云里编写原生的移动应用。UI部分要用到Titanium的UI库，这个库从IOS和安卓的原生UI库整合而来，目的是JS可以调用，并且做到跨平台。UI的核心元素是View，用它做页面布局，比起web的CSS实在容易很多，总共就三种，绝对布局、垂直布局、水平布局，分别对应于下面三个截屏：

1、绝对布局 absolute

这是View默认的布局。View方框的左上角是原点，内挂的子View可以用top, left,right, bottom或center来安排位置。下面的代码是绝对布局，蓝色方框box2压在红色方块box1上。

Class.create(Mash5.Widget, {initialize : function (config, params) {var container = Ti.UI.createView({width : Ti.UI.FILL,height : Ti.UI.FILL,backgroundColor : '#ccc'});this.setContentView(container);var box1 = Ti.UI.createView({    width: '80%',    height: '100dip',    backgroundColor: '#f44',    borderRadius: dipToPx(20),    top: '20dip',});container.add(box1);var box2 = Ti.UI.createView({    width: '220dip',    height: '200dip',    top: '100dip',    left: '20dip',    borderColor: '#44f',    borderWidth: '4dip',})container.add(box2);}})

2、垂直布局 vertical

手机应用主要用竖屏，垂直布局就是为了竖屏排版的方便，例如制作数据录入的表单，数据列表等。布局需要“拼爹”，在父级View，也就是container里声明layout: 'vertical'。于是蓝色矩形box2自动排在红色矩形box1下面，而间距由box2的top来决定，因此这是个相对布局。

Class.create(Mash5.Widget, {initialize : function (config, params) {var container = Ti.UI.createView({width : Ti.UI.FILL,height : Ti.UI.FILL,backgroundColor : '#ccc',layout: 'vertical',});this.setContentView(container);var box1 = Ti.UI.createView({    width: '80%',    height: '100dip',    backgroundColor: '#f44',    borderRadius: dipToPx(20),    top: '20dip',});container.add(box1);var box2 = Ti.UI.createView({    width: '80%',    height: '200dip',    top: '10dip',    backgroundColor: '#44f',})container.add(box2);}})

3、水平布局 horizontal

水平布局会把子View在水平方向自动排列，排满时会自动换行。本例的四个方块，一排按屏幕宽度尺寸只能安排下3个（红色、蓝色、绿色），于是第四个方块box4（黄色）就自动编排到下一排。

Class.create(Mash5.Widget, {initialize : function (config, params) {var container = Ti.UI.createView({width : Ti.UI.FILL,height : Ti.UI.FILL,backgroundColor : '#ccc',layout: 'horizontal',});this.setContentView(container);var box1 = Ti.UI.createView({    width: '33%',    height: '120dip',    backgroundColor: '#f44',});container.add(box1);var box2 = Ti.UI.createView({    width: '33%',    height: '120dip',    backgroundColor: '#44f',});container.add(box2);var box3 = Ti.UI.createView({    width: '33%',    height: '120dip',    backgroundColor: '#4f4',});container.add(box3);var box4 = Ti.UI.createView({    width: '33%',    height: '120dip',    backgroundColor: '#ff4',});container.add(box4);}})