Duilib六大布局及絕對佈局和相對佈局
阿新 • • 發佈：2019-02-20
duilib的Layout目錄專門放置佈局相關的容器控制元件，這6個佈局分別為：Container、VerticalLayout、HorizontalLayout、TileLayout、TabLayout、ChildLayout。容器之間可以任意相互巢狀。
一、Container（容器控制元件）：
Container佈局是其他所有佈局以及含有容器特性（如CList、CListContainerElement）的控制元件的基類，而實際上開發過程中很少使用這個佈局，只用他來做其他更高階的佈局的基類。因為Container佈局中的所有控制元件都會自動填充滿整個佈局，所有的控制元件都疊到了一起。而這個效果一般不是我們想要的。我目前想得到的他的唯一用途就是用於絕對佈局，而且裡面的所有元素都使用絕對佈局。
容器控制元件有什麼用呢？ 它的用處就是可以使子視窗的行為隨著Container一致變化。比如我們的視窗有10個按鈕，如果沒放在Container裡的話，那麼想要隱藏所有控制元件，就必須呼叫10次隱藏函式，如果想將所有控制元件往左移的話，也需要操作10次，同樣，上面因為有3個圖片，所以為了讓他們都適應視窗大小，我們做了3次佈局。而如果這些控制元件都在Container裡的話，那就方便多了，就算有100個按鈕，如果要隱藏的話，我們只需要呼叫1次隱藏函式，即隱藏Container控制元件即可，這樣它的子控制元件都會隱藏。
二、VerticalLayout（縱向佈局）、HorizaontalLayout（橫向佈局）：
VerticalLayout與HorizontalLayout佈局無疑是duilib中最常使用的兩個佈局，巧妙的使用這兩個佈局可以滿足大多數的佈局需求。從單詞的意思上不難看出VerticalLayout是縱向佈局，HorizaontalLayout是橫向佈局。這門兩個直接繼承自Container佈局。
VerticalLayout佈局會讓他包含的元素都縱向排列開，HorizaontalLayout佈局會讓給他包含的元素都橫向排列開：如圖
三、TileLayout：
TileLayout佈局是用來做類似360工具箱的效果：
四、ChildLayout：
ChildLayout佈局比較少用，因為他的功能可以用其他佈局來代替，他的作用就是從一個xml檔案中載入佈局來嵌入到ChildLayout佈局所在的地方，使用這個佈局一般只需要指定xmlfile屬性來設定xml檔案位置就可以了。他的意義在於可以把繁雜的大量xml程式碼分隔開。比如他和TabLayout佈局結合，讓TabLayout佈局包含5個ChildLayout佈局，而每個ChildLayout佈局分別從5個xml檔案載入自己的佈局檔案，這樣就可以分塊化的編寫佈局程式碼。
絕對佈局的意義與用法：
絕對佈局，籠統上說絕對佈局和相對佈局其實只有一個差別，也就是我在前面提到的float屬性，容器中包含的控制元件float屬性為真就是絕對佈局。
因為要讓控制元件重疊起來組合出新的控制元件才使用了絕對佈局，如果不讓控制元件重疊或者沒有特殊需求，最好別用絕對佈局。
雖然不建議使用，但我也得說一下絕對佈局相關的屬性和使用技巧。
1）把float屬性設定為真。
2）設定pos屬性，這個屬性在float為真時才有效，他包含四個欄位，分別以為了控制元件的左上右下下個座標的位置，但是建議只指定前兩個欄位來設定控制元件的左上角的座標，控制元件的寬度用width和height屬性來控制，這樣做的好處是避免了計算右下角座標的繁瑣！以後修改的時候也很清晰！
<Label name="MusicName" float="true" pos="100,100" width="26" height="22" textcolor="#FF505050" endellipsis="true" />
相對佈局的意義與用法：
在容器內部使用控制元件或者容器時，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的所有空間!其實這個例子的佈局是非常常見的介面佈局例子。
在充分理解了佔位的技巧後，再配合一些微調屬性，就可以完美控制各個控制元件了，這幾個微調屬性分別是inset、padding、childpadding，這幾個屬性的介紹如下：
在float為假，也就是相對佈局中，這幾個屬性才起效。
inset屬性
這是給容器控制元件使用的，使用後他所包含的所有使用相對佈局的元素，都會被限制在設定的範圍內，適合對容器內所用元素進行整體的座標控制。比如在前面提到的做360工具箱時，我們使用TileLayout容器來存放每一個工具，我們首先設定inset屬性，就可以讓所有的工具項限制在一定範圍內，例子如下：
padding屬性：
padding屬性是相對佈局中最常用的屬性！用來設定相對於前一個控制元件的位置，這個屬性的控制元件位置微調的關鍵。一般只用他的前兩個欄位，設定左邊距和上邊距，後兩個欄位是無效的，使用padding屬性，這是底部這四個按鈕的相對位置。如果我想整體讓這四個控制元件向右位移10畫素，那麼我只要設定第一個按鈕的padding屬性為padding="10,0,0,0"，就可以了，其他佈局完全不需要修改！
一、Container（容器控制元件）：
Container佈局是其他所有佈局以及含有容器特性（如CList、CListContainerElement）的控制元件的基類，而實際上開發過程中很少使用這個佈局，只用他來做其他更高階的佈局的基類。因為Container佈局中的所有控制元件都會自動填充滿整個佈局，所有的控制元件都疊到了一起。而這個效果一般不是我們想要的。我目前想得到的他的唯一用途就是用於絕對佈局，而且裡面的所有元素都使用絕對佈局。
容器控制元件有什麼用呢？ 它的用處就是可以使子視窗的行為隨著Container一致變化。比如我們的視窗有10個按鈕，如果沒放在Container裡的話，那麼想要隱藏所有控制元件，就必須呼叫10次隱藏函式，如果想將所有控制元件往左移的話，也需要操作10次，同樣，上面因為有3個圖片，所以為了讓他們都適應視窗大小，我們做了3次佈局。而如果這些控制元件都在Container裡的話，那就方便多了，就算有100個按鈕，如果要隱藏的話，我們只需要呼叫1次隱藏函式，即隱藏Container控制元件即可，這樣它的子控制元件都會隱藏。
二、VerticalLayout（縱向佈局）、HorizaontalLayout（橫向佈局）：
VerticalLayout與HorizontalLayout佈局無疑是duilib中最常使用的兩個佈局，巧妙的使用這兩個佈局可以滿足大多數的佈局需求。從單詞的意思上不難看出VerticalLayout是縱向佈局，HorizaontalLayout是橫向佈局。這門兩個直接繼承自Container佈局。
VerticalLayout佈局會讓他包含的元素都縱向排列開，HorizaontalLayout佈局會讓給他包含的元素都橫向排列開：如圖
三、TileLayout：
TileLayout佈局是用來做類似360工具箱的效果：
四、ChildLayout：
ChildLayout佈局比較少用，因為他的功能可以用其他佈局來代替，他的作用就是從一個xml檔案中載入佈局來嵌入到ChildLayout佈局所在的地方，使用這個佈局一般只需要指定xmlfile屬性來設定xml檔案位置就可以了。他的意義在於可以把繁雜的大量xml程式碼分隔開。比如他和TabLayout佈局結合，讓TabLayout佈局包含5個ChildLayout佈局，而每個ChildLayout佈局分別從5個xml檔案載入自己的佈局檔案，這樣就可以分塊化的編寫佈局程式碼。
絕對佈局的意義與用法：
絕對佈局，籠統上說絕對佈局和相對佈局其實只有一個差別，也就是我在前面提到的float屬性，容器中包含的控制元件float屬性為真就是絕對佈局。
因為要讓控制元件重疊起來組合出新的控制元件才使用了絕對佈局，如果不讓控制元件重疊或者沒有特殊需求，最好別用絕對佈局。
雖然不建議使用，但我也得說一下絕對佈局相關的屬性和使用技巧。
1）把float屬性設定為真。
2）設定pos屬性，這個屬性在float為真時才有效，他包含四個欄位，分別以為了控制元件的左上右下下個座標的位置，但是建議只指定前兩個欄位來設定控制元件的左上角的座標，控制元件的寬度用width和height屬性來控制，這樣做的好處是避免了計算右下角座標的繁瑣！以後修改的時候也很清晰！
<Label name="MusicName" float="true" pos="100,100" width="26" height="22" textcolor="#FF505050" endellipsis="true" />
相對佈局的意義與用法：
在容器內部使用控制元件或者容器時，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的所有空間!其實這個例子的佈局是非常常見的介面佈局例子。
在充分理解了佔位的技巧後，再配合一些微調屬性，就可以完美控制各個控制元件了，這幾個微調屬性分別是inset、padding、childpadding，這幾個屬性的介紹如下：
在float為假，也就是相對佈局中，這幾個屬性才起效。
inset屬性
這是給容器控制元件使用的，使用後他所包含的所有使用相對佈局的元素，都會被限制在設定的範圍內，適合對容器內所用元素進行整體的座標控制。比如在前面提到的做360工具箱時，我們使用TileLayout容器來存放每一個工具，我們首先設定inset屬性，就可以讓所有的工具項限制在一定範圍內，例子如下：
padding屬性：
padding屬性是相對佈局中最常用的屬性！用來設定相對於前一個控制元件的位置，這個屬性的控制元件位置微調的關鍵。一般只用他的前兩個欄位，設定左邊距和上邊距，後兩個欄位是無效的，使用padding屬性，這是底部這四個按鈕的相對位置。如果我想整體讓這四個控制元件向右位移10畫素，那麼我只要設定第一個按鈕的padding屬性為padding="10,0,0,0"，就可以了，其他佈局完全不需要修改！