轉載請說明原出處，謝謝~~
我使用duilib快3個月了，總體感覺duilib的使用還是較為簡單的，隻是剛入門時可能有些摸不清頭腦。今天寫一篇關于duilib的入門日志，大緻說一下duilib中的各個布局的作用，以及很關鍵的相對布局與絕對布局的意義與用法。希望可以幫到使用duilib的新手朋友們。duilib高手就可以直接省略這篇文章了！
我剛使用duilib的時候非常依賴duilib自帶的設計器，用他可以拖拉控件，可視化的做出自己想要的界面。可是用一段時間就會發現原帶的設計器有很多bug，時不時會崩潰，支援的控件數量有限，屬性數量也有限，導出的代碼備援。當時問了幾個高手，大家建議不要使用設計器而應該自己手寫xml代碼。起初手寫時感覺特别麻煩，可是用幾天後你會發現手寫要比使用設計器好得多：你可以更加了解duilib，熟悉每個控件的各個屬性，對控件的控制也更加友善。而如果想稱心如意的脫離設計器去編寫xml檔案，有非常有必要弄明白各個布局的用法和布局技巧。我現在可以完全靠手寫xml來做出一個程式的界面，相信用了一段duilib的朋友也是這樣。
在這裡提醒一下新手朋友，在duilib的根目錄有一個屬性清單.xml的檔案，他包含了絕大多數控件的絕大多數屬性的介紹，有不懂的屬性記得時常翻看他，同時不得不說這個檔案包含的屬性的确是不全面的，想要知道最全面的屬性資訊，可以看每個控件的源代碼，在SetAttribute函數中可以看到最全面的屬性資訊！
要想手寫xml，當然必須有一個編寫工具，原則上隻要是可以編寫文本的工具都可以，大家根據習慣自己挑選适合的工具，我目前在使用的是sublime這款工具，感覺編寫xml非常友善，使用界面也不錯。
6大布局的作用：
duilib的Layout目錄專門放置布局相關的容器控件，這6個布局分别為：Container、VerticalLayout、HorizaontalLayout、TileLayout、TabLayout、ChildLayout。容器之間可以任意互相嵌套，我分别說明他們的用法。
首先我要說明一下，下面介紹的時候，我都預設認為每個控件的float屬性為false，也就是不使用絕對定位，這個屬性會打破各個布局的作用。
Container：
Container布局是其他所有布局以及含有容器特性（如CList、CListContainerElement）的控件的基類，而實際上開發過程中很少使用這個布局，隻用他來做其他更進階的布局的基類。因為Container布局中的所有控件都會自動填充滿整個布局，所有的控件都疊到了一起，假如恰好有什麼需求要讓子控件都覆寫起來，而且可以随着容器的改變而自适應填充的話，Container就是不二之選。而除了這個效果之外，一般我們不使用它。
VerticalLayout、HorizaontalLayout：
VerticalLayout與HorizaontalLayout布局無疑是duilib中最常使用的兩個布局，巧妙的使用這兩個布局可以滿足大多數的布局需求。從單詞的意思上不難看出VerticalLayout是縱向布局，HorizaontalLayout是橫向布局。這門兩個直接繼承自Container布局。
VerticalLayout布局會讓他包含的元素都縱向排列開，HorizaontalLayout布局會讓給他包含的元素都橫向排列開：如圖
我故意沒讓控件填滿整個容器，為了說明這兩個布局不會強行讓子元素的總和去填滿容器，縱向布局會從上到下根據每個控件的高度讓他們排到一起，橫向布局會從左到右根據每個控件的寬度讓他們排到一起。另外可以看到，縱向布局隻關心子元素的高度，而不會強行讓子元素的寬度等于容器的寬度，這點從圖檔可以看到，橫向布局同理也是隻關心子元素的寬度。而這兩個布局經常會嵌套使用，如下效果：
可以看到我最外層使用了一個縱向布局，他包含了橫縱橫三個布局(分别為紅綠藍顔色)，每個橫向布局裡又分别包含了幾個按鈕。我們在編寫界面時經常用到這個方法！以下是這個布局效果圖對應的xml代碼：
TileLayout：
TileLayout布局是用來做類似360工具箱的效果：
columns和itemsize屬性，這兩個屬性不能一起用，應該隻是用其中的一個。使用columns屬性可以來設定每行中包含的列數，他會自動把包含的元素從左到右從上到下按照columns屬性的設定排列起來，他把每行的列數固定死了。而itemsize有兩個字段，通過我讀源碼，發現第二個字段是無效的，我們隻要使用第一個字段就行了，他會設定每個元素所占的區域，比如容器的寬度是500，給itemsize設定為 100 x 10，那個每行就會容納5個元素，當我們拉伸了窗體讓容器寬度變為700，那麼每行就會自動容納7個元素，這意味着使用這個屬性會讓每行容納的元素個數是自動可變的！這在很多情況下是很有用的屬性。注意itemsize并不是直接設定了子控件的大小，而隻是限制了子控件的最大區域。比如itemsize為100x100，而子控件設定為50x50，那麼 最終的子控件大小為50x50，而子控件的位置會按照100x100來計算。這個希望讀者自己實踐一下來了解這個效果！
TabLayout：
TabLayout布局同樣常用，他就像MFC的頁籤CTabCtrl控件，如圖：
但是在duilib中TabLayout隻是下面的布局界面，而不包含頂端的頁籤按鈕，是以經常用Option控件配合他一起使用，使用他時他會把他包含的下一級元素作為一個頁面，是以我們通常在他裡面放入橫縱向布局來作為一個頁面，在橫縱向布局裡再規劃每個頁面的外觀。
這個控件的詳細使用方法大家可以看duilib自帶的360demo，我就不贅述了！
ChildLayout：
ChildLayout布局比較少用，因為他的功能可以用其他布局來代替，他的作用就是從一個xml檔案中加載布局來嵌入到ChildLayout布局所在的地方，使用這個布局一般隻需要指定xmlfile屬性來設定xml檔案位置就可以了。他的意義在于可以把繁雜的大量xml代碼分隔開。比如他和TabLayout布局結合，讓TabLayout布局包含5個ChildLayout布局，而每個ChildLayout布局分别從5個xml檔案加載自己的布局檔案，這樣就可以分塊化的編寫布局代碼。
實際上有個比他更好用的标簽，就是Include标簽，Include不屬于布局，但他的作用在布局方面非常類似ChildLayout，指定他的Source屬性到某個xml檔案就可以了。相對ChildLayout，Include的優點是可以自動識别自定義控件，而ChildLayout不可以！
在這裡要提一下360Demo的自定義控件，這個demo的自定義控件做法誤導了很多人，裡面使用了自定義控件的方法，把一個xml布局檔案嵌入到界面裡，這種做法完全沒必要，直接使用Include标簽，一句xml代碼可以完全代替自定義控件。
這裡給出一個Include的用法：
其中source屬性指定xml檔案的路徑，count指定解析的次數。
絕對布局的意義與用法：
在知道了6大布局的用法之後，知道了各種樣式的界面外觀的大緻布局方法，而這還遠不夠讓我們寫出漂亮的布局外觀，隻有配合相對布局與絕對布局才可以更好的控制界面的元素。值得一提的是，我這裡說的相對布局和絕對布局并不是一個容器或者控件，這隻是一種技巧和使用方法，用在容器布局所包含的控件上，常用到橫縱向布局中。
我先來介紹絕對布局，籠統上說絕對布局和相對布局其實隻有一個差别，也就是我在前面提到的float屬性，容器中包含的控件float屬性為真就是絕對布局，為假就是相對布局。不要小看這一個屬性，他帶來的效果可以天壤之别！
給控件的float屬性設為真後，就使用了絕對布局，故名意思，絕對布局就是讓控件的坐标絕對化，這樣這個控件就不受他的容器的束縛而可以自己随意設定自己的位置！比如在橫縱向布局中給他們包含的子控件設定float屬性，這個控件就不會被自動橫縱向排列。而我的建議是，能不用絕對布局就别用絕對布局！原因有三個：
1）絕對布局破壞了各個容器的特性，而不受容器的束縛。
2）絕對布局讓控件的坐标固定，不利于控件自動調節位置。
3）後面提到的相對布局幾乎可以完成絕對布局的所有特性。
雖然不建議使用，但我也得說一下絕對布局相關的屬性和使用技巧。
1）把float屬性設定為真。
2）設定pos屬性，這個屬性在float為真時才有效，他包含四個字段，分别以為了控件的左上右下下個坐标的位置，但是建議隻指定前兩個字段來設定控件的左上角的坐标，控件的寬度用width和height屬性來控制，這樣做的好處是避免了計算右下角坐标的繁瑣！以後修改的時候也很清晰！
舉出一個例子：
這裡設定了一個Label控件，左上角放到100，100的坐标上，控件高22，寬26
不得不提一個很有用的屬性，那就是relativepos屬性，屬性清單沒有列出這個屬性，這是我自己總結的
這樣就介紹完了絕對布局，然後就是整片文章的最重要部分，相對布局！
相對布局的意義與用法：
我把相對布局的介紹放到最後，因為它很重要！
在容器内部使用控件或者容器時，float屬性設定為flase（duilib預設為false）就是相對布局了。這是我非常推薦使用的，前面我也說了我在寫仿酷狗的整個布局中，上百個控件中我隻給兩個控件使用了絕對布局，其餘都是相對布局。他的優點如下：
1）布局和控件是可以根據窗體的大小改變而自動調整位置的，這點很重要
2）不需要絕對布局那樣麻煩的計算各個控件的位置
3）在容器中調整前一個控件的位置，後面的控件都會自動調整坐标
其實總得來說使用相對布局意義就是使用布局控件的自動排列特性！
使用了相對布局後，就不用設定float屬性和pos屬性，一般隻設定甚至不設定width和height屬性。這點很重要，如果你的控件或者布局的大小是固定的，那麼就設定width和height屬性，如果想讓控件或者布局根據窗體的大小而自動調整大小和位置，就不設定這兩個屬性。如果隻設定了一個屬性，比如width設定為100，而height不設定，那麼他的高度是自動調整的而寬度是固定的。父容器會自動安排他包含的元素，讓含有width和height屬性的控件占據相應的大小，把剩下的空間都配置設定給沒有設定wieth和height屬性的容器或者控件裡。看下面一個例子：
可以看到窗體的大小為300x300，而最外層的是一個名為Fahter的縱向容器，包含三個子容器。而Father沒有指定width和height，是以當我改變了窗體的大小時，Father會自動調整自己的大小到和窗體大小相同，而三個子容器我都眉頭指定width屬性，是以三個子容器的寬度和Father是一樣，也就是他們的寬度都是和窗體寬度一樣，并且會自動調整。Sub1和Sub3的高度設定為50，是以他們的高度就固定了，而Sbu2的高度也沒有指定，那他會自動占據了除了Sub1和Sub2的所有空間!其實這個例子的布局是非常常見的界面布局例子，比如說酷狗，sub1和sub3分别表示标題欄和狀态欄，sub2為程式的主界面：
把這些知識綜合起來，現在就可以寫出一個自動調整大小的大緻布局了，但是還沒法精确控制每個控件的位置。
利用上面介紹的自動占位的特性，我這裡舉一個标題欄編寫的例子：
這個例子是我的仿酷狗播放器的換膚窗體的标題欄。他的外層是一個橫向布局，高度為30，寬度随窗體調整。讓标題文字居于左側，關閉按鈕在最右側，如果讓窗體調整寬度後文字和關閉按鈕自動調整位置，就需要把中間的空位占滿。這時我們就需要一個占位控件，不給他設定width和height屬性，這樣子他就會自動占據剩餘的空間！就達到了相對布局的自動調整位置的效果。這個使用方法是相對布局裡非常常用的！而這個占位控件在沒有什麼其他要求時建議像我給出的例子那樣，使用Control控件，因為他是所有控件和容器的祖先基類，代碼和屬性相對是最少的，這樣有利于提高程式的效率！
在充分了解了占位的技巧後，再配合一些微調屬性，就可以完美控制各個控件了，這幾個微調屬性分别是inset、padding、childpadding，這幾個屬性的介紹如下：
在float為假，也就是相對布局中，這幾個屬性才起效。
inset屬性
這是給容器控件使用的，使用後他所包含的所有使用相對布局的元素，都會被限制在設定的範圍内，适合對容器内所用元素進行整體的坐标控制。比如在前面提到的做360工具箱時，我們使用TileLayout容器來存放每一個工具，我們首先設定inset屬性，就可以讓所有的工具項限制在一定範圍内，例子如下：
通過設定inset屬性，讓所有元素限制在一定範圍内而不用重複設定每個元素的屬性。
childpadding屬性：
childpadding屬性設定容器内每個元素之間的間距，這個比較容易了解，上面的例子中也用到了childpadding屬性。這個屬性在不同容器中代表不同意思，在橫向布局中代表子控件之間的橫向間隔，在縱向布局中代表子控件之間的縱向間隔，在TileLayout容器中代碼行與行之間的間隔！
padding屬性：
padding屬性是相對布局中最常用的屬性！用來設定相對于前一個控件的位置，這個屬性的控件位置微調的關鍵。一般隻用他的前兩個字段，設定左邊距和上邊距，後兩個字段是無效的，或者說存在問題(為什麼會有問題？請看源碼)。不過使用這兩個字段就夠了。這是我的仿酷狗播放器的狀态的布局代碼：
使用padding屬性，這是底部這四個按鈕的相對位置。如果我想整體讓這四個控件向右位移10像素，那麼我隻要設定第一個按鈕的padding屬性為padding="10,0,0,0"，就可以了，其他布局完全不需要修改！
結束語
說到這裡也就把布局的知識總結得差不多了，對于duilib的新手朋友，建議多看看各個demo的布局檔案，他們幾乎涵蓋了所有知識點。然後結合我總結的東西自己手動寫幾個布局代碼，相信很快就可以熟練編寫界面布局了。另外我的前面部落格裡經常會分析布局，大家也可以看看。
我使用duilib的時間也不算長，水準有限，文章中有什麼錯誤或者描述不清，請留言給我，我會及時糾正！
Redrain 2014.8.13