上一個教程講解了怎麼佈局最大化、最小化、關閉按鈕,但是如果手動去計算這三個按鈕的位置和大小的話,非常的不直觀,也很不方便。
所以這一章準備介紹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~