目标
在本节,你将会看到Ti应用的核心代码块。 我们将会讨论Tab组件,windows窗口以及他们的核心功能 。
内容
如果用开发web的方式来比拟Ti里面的界面,, 一个Ti的窗口相当于一个web页面,一个Ti的View相当于一个DIV。概念上,Ti里面的windows是一个顶级的容器,就像web里面的页面,如JSP等。
Ti里面的Views组件可以看成是一个含有style的能够装入内容的容器。
Windows和View,两者都可以包含其他内容(按钮、视图等),而且必须包含在一个窗口,或者web页面。
Ti 中的Tab groups 和 web中的tab groups一个样,在Web中,Tab有时被称作一个UI组件,但是一般都用Div来实现Tab的功能。在移动开发的应用中,用的最多的应该是一组导航菜单或者是一些导航链接。
那么,我们现在就来看看如何使用tab groups,views,windows 去组织你的UI。移动应用一般使用两个基本的布局方式:tab布局和windows布局。如图所示:
使用Tab布局
在一个使用tab布局的应用中,一般使用一个Tab group来包含多个tabs。而每个Tab又包含一个windows。每个windows包含你所需要的组件,如按钮,input等等。使用Tab的基本代码如下所示:
// create tab group
var tabGroup = Titanium.UI.createTabGroup();
var win1 = Titanium.UI.createWindow({ title:'Tab 1', backgroundColor:'#fff' });
var tab1 = Titanium.UI.createTab({ icon:'tab1icon.png', title:'Tab 1', window:win1 });
var win2 = Titanium.UI.createWindow({ title:'Tab 2', backgroundColor:'#fff' });
var tab2 = Titanium.UI.createTab({ icon:'tab2icon.png', title:'Tab 2', window:win2 });
// add tabs to the group
tabGroup.addTab(tab1);
tabGroup.addTab(tab2); //
open tab group tabGroup.open();
在上面的代码中,一个Tab的标题将会显示到包含此Tab group的窗口的顶部。 在IOS中,你可以在窗口的标题栏上增加导航按钮 (leftNavButton and rightNavButton) 如返回等. 并且,在IOS中,如果在Tab中打开一个模态窗口,那这个窗口将会撑满整个屏幕,也会覆盖tab group。非模态窗口将在tab里面打开,而不会撑满整个屏幕。而在android中,一个windows窗口将会自动的充满整个屏幕,需要使用返回键来返回。
Tab 推荐规范
用户都希望一组相关性的功能包含在一个Tab groups中。但是,tab不建议出现在任何的有层次布局中使用(译者注:暂未理解分层布局,或者层次布局:原文:they are not expected to be in any sort of hierarchical relationship)。 Tabs 都是平起平坐的,不存在兄弟关系,也不存在父子节点关系。
在IOS中,tab有一个固定的最小宽度,如果你定义了许多tab之后,而且宽度超出了屏幕,系统会自动的出现一个“更多”的Tab。点击更多后,将会出现一个以表格布局来显示的多余的tabs窗口。
在android中没有固定的最小宽度一说,而是他将会根据你创建的tab数,来缩小到合适的标签数以显示完整。虽然这样带给了你方便,但是你需要意识到,如果你有很多tabs 你将无法使用尺寸或者说宽度, 所以建议边测试边开发。
对于这两个平台,我们建议限制tab的个数为4或者更少,因为这样用户可以直接看到全部的tabs,也容易操作。
使用Window 布局
用windows来布局,需要使用views,controls以及graphics。Android 和 IOS都可以利用Ti的windows组件的open()方法,来打一个windows窗口,而这个windows对象将会被放到内存堆的顶端。相反的,如果把windows对象从内存堆弹出,可以使用windows组件的close()方法,也就是关闭窗口。
除了这些跨平台的方法,各自的平台也有自己的特色,那我们就来看看:
- Android
- 按钮可以用来作为导航,这些和tab相似,可以给出直接的说明,例如前进后退。
- 返回按钮会关闭当前的窗口,回到前一个窗口。
- iOS
- 你可以利用IOS的导航-- navigation group
- 当然,你也可以去实现 DashboardView,进行自定义的Views
关联阅读
- UI指南
- Titanium.UI 模块
总结
在本小节,你看到了Ti应用界面的结构,包括tab groups,windows,还有使用他们的方法。在下一节,你将会更深入的了解Ti 应用的布局及其一些视图组件。
来源:oschina
链接:https://my.oschina.net/u/657361/blog/82788