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 應用的佈局及其一些視圖組件。