佈局類組件介紹

DeviceOne平臺包含2個基礎的佈局組件，do_ALayout和do_Linearlayout。所謂佈局組件就是在IDE里設計界面，可以拖拽別的組件加到這個佈局組件里作為這個佈局組件內的一個部分。

註意：do_ScrollView也算是佈局，也可以往裡面拖拽其他組件，不過它比較特殊，它有且只有一個子節點。我們這裡暫時不討論。

do_ALayout組件

這個是最基礎最常用的佈局組件，這裡的 ALayout是AbsoluteLayout的縮寫，表示絕對佈局。絕對佈局使用很簡單，它內部的所有組件的佈局都是絕對坐標值，不過這個坐標值是相對ALayout來說的，不是相對整個屏幕。
如下圖，按鈕的x，y坐標都是100，是相對於按鈕所在的ALayout的左上角。

這個組件的API可以參考這裡.我們重點的介紹幾個重要的特性：

1. do_ALayout可以設置背景圖片，這個功能比較常見，就是設置bgImage屬性。

2. do_ALayout支持touch,touchDown,touchUp事件，這裡有一個技巧就是，在do_ALayout上添加一個do_Imageview, 如果在imageview上添加點擊事件，用戶手指必須點中圖片才能激活，但是如果把事件加到imageview所在的ALayout，那麼可點擊區域就很大了，用戶體驗會好很多。
   如下圖，上面的touch事件加在iamgeview上，手指會很難點中。示例代碼下載參考這裡
   

3. 屬性isStretch和layoutAlign，這二個屬性很重要，涉及到屏幕適配的一個方式，解決在不同的手機屏幕寬高比不一樣導致的變形問題。更詳細的說明參考這裡

4. add方法,do_ALayout和do_LinearLayout都具有這個方法，原理也一樣。add這個方法也非常重要，通過這個方法可以在app運行是動態增加ui。應用的場景就是一些ui可以重覆使用，比如一個app中所有的頁面的header都是類似的，可以通過add動態添加，然後更新數據。更大的好處是能把這個add進去的ui對應的邏輯代碼寫在這個ui對應的js文件里。可以降低代碼的耦合度。
   參考這個示例，主要代碼如:

var nf = sm("do_Notification");
var page = sm("do_Page");
var layout = ui("ALayout_1");
// 把header.ui的根節點（是一個id為root的ALayout）加到當前index.ui的0，0位置
// 並且重新給它命名一個新的唯一標示id "header_id", 這個id不要和index.ui里已有的ui組件的id重覆
var addedheader = layout.add("header_id", "source://view/header.ui", 0, 0);
// 獲取header.ui的根節點對象（是一個id為root的ALayout），但是我們不能通過
// var header = ui("root");來獲取這個對象，因為root這個id的作用域是在header.ui,而不是在index.ui.js
// 正確的寫法是有2種，第一是：
var header1 = ui("header_id");
// 第二是：
var header2 = ui(addedheader);
// 判斷這二個對象是否相同，可以通過getAddress方法
nf.toast(header1.getAddress() == header2.getAddress());
// 進一步我們還可以獲取到header.ui根節點之下的子節點，比如statusbar是header.ui最上面的一部分組件的id
var statusbar = ui(addedheader + ".statusbar");
statusbar.bgColor = "FF0000FF";
// 我們並不推薦在index.ui里直接獲取header.ui 的子對象，這不符合降低耦合度的原則
// index.ui不能直接調用header.ui里的函數，因為它們處於不同的js運行環境
// 要實現這二者之間的數據交換，可以通過二種方式
// 第一:通過數據bind，在header.ui.js里setmapping,然後通過binddata給header賦值
var hashdata = mm("do_HashData");
header1.bindData(hashdata);
hashdata.addData({
    "title_value" : "我是首頁",
    "menu_bg_value" : "FF0000FF"
})
header1.refreshData();
// 第二：通過消息機制，訂閱和觸發消息都在page對象，因為header.ui和index.ui在同一page下
page.on("click_menu", function(data) {
    nf.alert(data);
})

do_LinearLayout組件

LinearLayout組件叫線性佈局，意思就是裡面的組件按線性排列，可以上下，可以左右排列。裡面所有的子view的x，y沒有意義，因為它們是一個接一個，無縫的拼接在一起。
這個組件的API可以參考這裡.
我們重點的介紹幾個重要的特性：

1. LinearLayout很少設置固定的高度和寬度，它最大的優勢是可以動態根據內容來變化width和height,自適應大小，強制性地使視圖擴展以便顯示其全部內容，也就是WRAP_CONTENT。Do平臺有不少組件支持這種方式，參考文檔.
   具體就是設置LinearLayout的width或height為-1表示自適應。那麼LinearLayout顯示的真實高度和寬度就是由它裡面的所有子view疊加起來的。

2. padding和margin屬性，其實margin是所有ui都具有的公共屬性，但是它只能在Linearlayout里有效，所以在這裡一起提一下。
   padding就是在LinearLayout的內邊距，margin就是LinearLayout里的一個子view和相鄰的組件的距離，比如：
   

3. add方法，LinearLayout 原理和do_ALayout完全一樣，只不過就是參數x，y改成一個id值，表示加到現有一個組件的後面或下麵。
   參考這個示例