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);
	}
})