Ti用戶界面之佈局，位置及視圖層

• 單位

  • 在tiapp.xml裏設置默認單位

• 關於座標網格

• 位置及元素的尺寸

• 布局模式

• 關於設置Auto的屬性

  • ScrollView 的Auto屬性

• zIndex & default stacking

• 動手實踐

• 延伸閱讀 

內容

Ti當前的佈局系統是一個跨平臺的佈局系統。它的一些特性和細節在Ti SDK 2.0裏面已經給出，具體參考 "Composite UI Layout Specification." 它除了說明了一些各類不一樣的屬性及行爲外，文檔還說明了一些並不推薦的特性和設置，而這些將會在將來版本的TI SDK中給出說明。

在本節參考指南中，咱們將學習如下影響你所開發的APP的一些因素。

• 單位

• 座標網格佈局

• 位置和視圖層次結構

• 佈局的模式

• zIndex & default stacking order

單位

UI元素的佈局及位置都靠一些加了(顯示或者隱形的)單位的數值來講明,如width:10px;若是你不指定其單位，那麼將會使用系統默認的單位。你也 在tiapp.xml中能夠設置APP的默認尺寸單位。

首先，咱們先能夠了解一些單位。

• dip : 一個獨立的像素。Density-independent pixels. A measurement which is translated natively to a corresponding pixel measure using a scale factor based on a platform-specific "default" density, and the device's physical density.

• System unit :依賴於平臺的默認單位，例如，android的默認單位像素，IOS的是dip。 

被支持的單位有:

• 固定尺寸

  • px : 像素

  • mm :毫米

  • cm : 釐米

  • in : 英寸

  • dp/dip : DIP，Density-independent pixels (we sometimes call these "points")

    • Android : 實際像素 pixels = dip * (screen density) / 160

    • iOS : actual pixels = dip * (screen density) / 163 (effectively 1dip=1px on standard, 1dip=2px on retina)

    • Mobile Web: actual pixels = dip * (screen density) / 96 (effectively 1dip=1px because most browsers scale pages to 96dpi to make them consistent with desktops).

• 相對尺寸

  • % : 相對於父容器的百分比.

    • 對於x軸的值是相對於父容器的的寬度

    • 對於y軸的值是相對於父容器的的高度

應用示例:

var view = Ti.UI.createView({

/* 不要像這樣混的使用單位 */ 

top: '10mm', left: '5px',

 width: '30%', 

height: 50 /*使用系統默認的單位 */ });

在 tiapp.xml 設置默認的單位

在文件裏面增長一項：

<property name="ti.ui.defaultunit" type="string">value</property>

value的值能夠是px, mm, cm, in, dp, dip, 或者system.

座標網格

Ti使用的是座標網格佈局方式。 網格的位置是基於系統或者說平臺的單位的。 這就意味着，在IOS中，元素是定位於一個與密度無關的網格中，而在android中，元素是定位於一個與密度有關的網格中。這產生的結果是：在IOS中，元素的定位不取決於屏幕的密度，而在android中，若是你使用絕對定位，這將會在不一樣的設備中產生不一樣的影響。

• iPhone （最原始的） 是基於 320 x 480 dip 網格。

• iPad （最原始的）是基於 1024 x 768 dip 網格。

• android設備的尺寸則大小不一，能夠參考如下模擬器:

  • HVGA emulator is 320 x 480 px

  • WVGA800 emulator is 480 x 800 px

  • WVGA854 emulator is 480 x 854 px

請記住在android中你可使用dp 或者dip做爲單位，去實現跟IOS同樣的效果。

定位與元素的尺寸

在Ti中，元素都使用相對於父容器來進行定位的,好比說window 或者view。 根據你使用的定位屬性，參考點多是父容器的top/left 或者是 bottom/right 。

如如下屬性：

• top and left properties

• bottom and right properties

• center property

Size屬性，表示一個view渲染後的尺寸，這樣只有當其和其父容器被徹底渲染（繪製完後）完後纔會有效。這就意味着size屬性是一個只讀的屬性，包含width和height;

你能夠經過設置width和heigth來肯定一個元素的尺寸。若是你不設置長度和寬度，可是設置了top和bottom，那麼該元素將會根據其父容器的top和bottom邊界來計算其本身的height。一樣的，對於width 能夠設置left和right屬性。 

在下面的小列子中，紅色的View被定位在相對於windows的top 20和left 20 ，黃色的View被定位於bottom 100,right 100 這些都是相對於父容器windows的。

定位

var win = Ti.UI.createWindow({

 backgroundColor:'#fff' }); 

var redview = Ti.UI.createView({ 

top:20, left:20, width:10, height:10, backgroundColor:"red" }); 

win.add(redview); 

var yellowview = Ti.UI.createView({ 

bottom:100, right:100, width:10, height:10, backgroundColor:"yellow" });

 win.add(yellowview);

 var blueview = Ti.UI.createView({

 center: {x: 160, y: 240}, width:50, height:50, backgroundColor:"blue" });

 win.add(blueview); 

var greenview = Ti.UI.createView({ 

top:-20, width:10, height:10, backgroundColor:"green" });

 win.add(greenview);

 win.open();

佈局模式

Ti 的windows 及其餘的視圖組件，可使用layout的三個屬性值來設定其佈局方式。

• absolute - 絕對定位

• vertical - 垂直定位. 

• horizontal -水平定位.

一般，各個組件之間都是組合來使用的。

佈局模式

var win = Ti.UI.createWindow({

 backgroundColor:'#fff' }); 

// 使用網格繪製module,參見 https://gist.github.com/1187384 

// 每隔20 point 繪製一個網格線 

var grid = require('gridlines'); 

grid.drawgrid(20,win); 

// 繪製一個View 並設置其屬性。 

var view = Ti.UI.createView({

 backgroundColor:'transparent',

 top:0, left:0, width:'100%',

 height:'100%', layout:'vertical'//使用垂直佈局 }); 

// 繪製帶有顏色的方塊的方法。

 function makeView(color) { 

        return Ti.UI.createView({

                     top:20, left:20, width:20, height:20, backgroundColor:color });

             } 

view.add(makeView('red')); 

view.add(makeView('yellow')); 

view.add(makeView('blue')); 

view.add(makeView('green')); 

win.add(view); 

win.open();

"auto" 行爲

Ti 中的視圖組件支持設置 auto來計算其尺寸，可是，auto 不建議在Ti 2.0 中使用。在過去，auto 應用於height和width ，這些用於支持「根據視圖組件的內容來設定其大小」。 而這種模糊的描述是與跨平臺的目標不一致的。

而auto能夠被兩個指定的屬性代替：size 屬性和 fill 屬性。  Ti.UI.SIZE 可以約束視圖組件的大小使其根據內容適配。 The Ti.UI.FILL 可以根據父容器的尺寸去擴大其本身的大小。須要注意的是：FILL屬性，沒有考慮其兄弟視圖組件。這就意味着若是一個父容器有兩個孩子View，一個設置的固定的尺寸，一個設置的是FILL,那麼第二個視圖會將第一個視圖覆蓋，而後撐滿父容器。

下面是一些含有SIZE 和 FILL的UI組件：

SIZE views	FILL views	Mixed behavior
Button	Window	Toolbar: FILL for width, SIZE for height
Label	View	TableViewRow: FILL for width, SIZE for height
ImageView	TabGroup	Slider: FILL for width, SIZE for height
ProgressBar	TableView
Switch	WebView
TextArea	ScrollView
TextField	ScrollableView
Picker
SearchBar
ButtonBar
TableViewSection

ScrollView "auto"

在ScrollView中, contentWidth 和 contentHeight 也能夠設置爲"auto", 若是使用auto的話，建議這樣使用:

• When all children views have FILL behavior, the content area of the scroll view will be clipped to the physical size of the scroll view

• Otherwise, the content area will grow according to the bottom offset of the bottom-most View and the right offset of right-most View. In some cases the bottom-most and right-most View may be the same View.

zIndex & default stacking（Z-index屬性和默認疊加）

你能夠在一個View之上再定義個View.。若是你添加一個視圖View在如容器上面，默認的它將會覆蓋全部你以前添加的視圖View（咱們假設邊界同樣）。你能夠經過設置他們的順序（不是常常好用）或者設置Zindex屬性來控制他們疊加的順序。 就像HTML同樣，zIndex屬性接受零以上的整數，值越大離最上層越近。 

動手練習

Goal

你能夠練習一下佈局，定位和一些視圖組件。

Resources

去下載繪製網格的module. https://gist.github.com/1187384.

延伸閱讀（實例）

• Finished code(完整的代碼)

• Titanium UI 組件規範

• 解釋Titanium UI 佈局及定位的實例