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 应用的布局及其一些视图组件。