上一個教程講解了怎麼佈局最大化、最小化、關閉按鈕，但是如果手動去計算這三個按鈕的位置和大小的話，非常的不直觀，也很不方便。
所以這一章準備介紹duilib的UI設計器，由於這個設計器很不完善，也有很多bug，有時候會導致XML數據丟失，所以很多大神都不建議用，不過我每次寫代碼都會用SVN，而且會原子提交，所以即使丟失也可以恢復。不過這不代表我贊同一直使用這個UI設計器，我建議大家佈局的時候用設計器，佈局完畢之後手寫XML。這樣按鈕的大小和位置都很直觀，很方便的可以確定，就用不着手動去計算了，當然，如果是美工給的界面，就沒必要用設計器了，因爲他們會把位置和大小都給過來。
1、打開設計器：
在duilib源碼的bin目錄裏，【DuiDesigner.exe】就是UI設計器（這個設計器需要重新編譯一次，不然打開XML會崩潰）。
2、新建項目：
菜單裏選擇【文件】--【新建】--【文件】，再點擊保存將文件保存到指定路徑。
3、新建佈局：
由於前面的教程已經詳細講過佈局和標題欄，所以這裏直接弄出一個標題欄佈局。
（1）加上一個VerticalLayout 佈局，做爲整個窗口的佈局（由於設計器不能拖拽控件，所以需要先點擊工具箱裏的VerticalLayout 控件，再點擊界面，即可加上控件），如圖：
（2）加上一個HorizontalLayout 佈局，做爲標題欄的佈局：
發現HorizontalLayout 佈局並沒有沾滿整個窗口的寬度，所以需要調整，
在屬性裏面，將【Size】展開，將【Width】填爲0，即可自動拉伸寬度。（注意，需要先點擊一個控件，才能設置屬性，不要點錯了控件哦~）
（3）加上兩個VerticalLayout 佈局，做爲標題欄的左邊的佔位佈局和右邊的按鈕佈局（前面已經介紹過，VerticalLayout 和 HorizontalLayout 有時候可以互換，但是用交叉的方式一般都不會錯，交叉方式即VerticalLayout 子節點和父節點都是HorizontalLayout ，而兄弟節點是VerticalLayout ）：
右邊的佈局width改爲77
注意，別把佈局點錯了位置，此時左邊的樹形應該如下圖：
（4）佈局好了之後，我們往上面加按鈕：
先點擊Button控件，再點擊右上角的按鈕佈局，可以看到下圖：
這時可以拖拽邊框調節控件大小，也可以拖動控件的位置。
此時我們可以按Ctrl+C、Ctrl+V複製按鈕
然後把按鈕拖到相應位置
同理，加上第三個按鈕，如下圖：
這個時候，我們可以將三個按鈕頂端對齊：
先選中三個按鈕
，
然後點擊【頂端對齊】按鈕
。
接着點擊【橫向】按鈕
，使三個按鈕水平方向均勻間隔開來。
方法已經舉例說明了，具體的位置和間隔還需要小夥伴們慢慢調整。
可以看到設計器調整控件的位置和大小還是很方便的~
注意，要記住時不時的按下Ctrl + S，不然設計器崩潰了，就不好了~
下面我們來看看XML的內容，在Tab上面右鍵，選擇【打開所在的文件夾】，
然後打開XML（發現只是打開文件夾，木有定位到文件o(╯□╰)o），此時的XML文件的內容如下：
（5）其實到這裏，就可以拋棄UI設計器啦~~~
但是好歹是大神花了心血搞出來的，其實多用用SVN，記得隨時Ctrl+S，還是可以放心的用的~
下面就接着介紹一些屬性吧，
在duilib源碼的目錄下，有一個文件【屬性列表.xml】，這裏介紹了所有控件的屬性，雖然有一點點遺漏，但是已經夠啦。
所以詳細屬性就請看【屬性列表.xml】，這裏只介紹一些常用的屬性。
我們先給窗口背景換成綠色，
選擇整個窗口的佈局後，設置【BkColor】屬性即可
同理，設置標題欄佈局的背景色，由於標題欄佈局已經被兩個子佈局遮住，所以這時需要點擊左側的樹形控件
然後給按鈕也加上背景色，
現在我們把標題欄換成漸變色，
除了設置【BkColor】外，再設置【BkColor2】即可，
把窗口背景換成三色漸變，再設置【BkColor3】即可，不好意思，設計器裏面木有這個屬性，需要手動在XML裏添加~~~
一切就緒以後，我們可以點擊【測試窗體】按鈕看看窗口效果
按下【Esc】鍵即可關閉【測試窗體】
好啦，UI設計器介紹完畢，休息下先~O(∩_∩)O~
