Titanium 用户界面之布局结构及核心代码块

• 以Tab为界面基础的界面
  • 关于Tab的建议
• 以窗口为界面基础

目标

在本节，你将会看到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 应用的布局及其一些视图组件。