UI界面設(shè)計器(Dui Designer)

Dui Designer是一款專業(yè)的UI界面設(shè)計器，修復(fù)了name屬性不能保存，控件視圖不能及時更新，不存在bkcolor3屬性，不能退出預(yù)覽等一些BUG，雖然還是有很多，但是做做布局足以。有需要的小伙伴歡迎來西西下載體驗。

軟件詳細(xì)介紹：

1、打開設(shè)計器：

在duilib源碼的bin目錄里，【DuiDesigner.exe】就是UI設(shè)計器（這個設(shè)計器需要重新編譯一次，不然打開XML會崩潰）。

2、新建項目：

菜單里選擇【文件】--【新建】--【文件】，再點擊保存將文件保存到指定路徑。

3、新建布局：

由于前面的教程已經(jīng)詳細(xì)講過布局和標(biāo)題欄，所以這里直接弄出一個標(biāo)題欄布局。

（1）加上一個VerticalLayout 布局，做為整個窗口的布局（由于設(shè)計器不能拖拽控件，所以需要先點擊工具箱里的VerticalLayout 控件，再點擊界面，即可加上控件），如圖：

（2）加上一個HorizontalLayout 布局，做為標(biāo)題欄的布局：

發(fā)現(xiàn)HorizontalLayout 布局并沒有沾滿整個窗口的寬度，所以需要調(diào)整，

在屬性里面，將【Size】展開，將【W(wǎng)idth】填為0，即可自動拉伸寬度。（注意，需要先點擊一個控件，才能設(shè)置屬性，不要點錯了控件哦~）

（3）加上兩個VerticalLayout 布局，做為標(biāo)題欄的左邊的占位布局和右邊的按鈕布局（前面已經(jīng)介紹過，VerticalLayout 和 HorizontalLayout 有時候可以互換，但是用交叉的方式一般都不會錯，交叉方式即VerticalLayout 子節(jié)點和父節(jié)點都是HorizontalLayout ，而兄弟節(jié)點是VerticalLayout ）：

右邊的布局width改為77

注意，別把布局點錯了位置，此時左邊的樹形應(yīng)該如下圖：

（4）布局好了之后，我們往上面加按鈕：

先點擊Button控件，再點擊右上角的按鈕布局，可以看到下圖：

這時可以拖拽邊框調(diào)節(jié)控件大小，也可以拖動控件的位置。

此時我們可以按Ctrl+C、Ctrl+V復(fù)制按鈕

然后把按鈕拖到相應(yīng)位置

同理，加上第三個按鈕，如下圖：

這個時候，我們可以將三個按鈕頂端對齊：

先選中三個按鈕，然后點擊【頂端對齊】按鈕

。

接著點擊【橫向】按鈕

，使三個按鈕水平方向均勻間隔開來。

方法已經(jīng)舉例說明了，具體的位置和間隔還需要小伙伴們慢慢調(diào)整。

可以看到設(shè)計器調(diào)整控件的位置和大小還是很方便的~

注意，要記住時不時的按下Ctrl + S，不然設(shè)計器崩潰了，就不好了~

下面我們來看看XML的內(nèi)容，在Tab上面右鍵，選擇【打開所在的文件夾】，

然后打開XML（發(fā)現(xiàn)只是打開文件夾，木有定位到文件o(╯□╰)o），此時的XML文件的內(nèi)容如下：

（5）其實到這里，就可以拋棄UI設(shè)計器啦~~~

但是好歹是大神花了心血搞出來的，其實多用用SVN，記得隨時Ctrl+S，還是可以放心的用的~

下面就接著介紹一些屬性吧，

在duilib源碼的目錄下，有一個文件【屬性列表.xml】，這里介紹了所有控件的屬性，雖然有一點點遺漏，但是已經(jīng)夠啦。

所以詳細(xì)屬性就請看【屬性列表.xml】，這里只介紹一些常用的屬性。

我們先給窗口背景換成綠色，

選擇整個窗口的布局后，設(shè)置【BkColor】屬性即可

同理，設(shè)置標(biāo)題欄布局的背景色，由于標(biāo)題欄布局已經(jīng)被兩個子布局遮住，所以這時需要點擊左側(cè)的樹形控件

然后給按鈕也加上背景色，

現(xiàn)在我們把標(biāo)題欄換成漸變色，

除了設(shè)置【BkColor】外，再設(shè)置【BkColor2】即可，

把窗口背景換成三色漸變，再設(shè)置【BkColor3】即可，不好意思，設(shè)計器里面木有這個屬性，需要手動在XML里添加~~~

一切就緒以后，我們可以點擊【測試窗體】按鈕看看窗口效果

按下【Esc】鍵即可關(guān)閉【測試窗體】

使用方法：

如上圖，主要分為六大模塊。

1為皮膚設(shè)計窗口，在上面添加控件規(guī)劃你的皮膚。

2為WND窗口，請單擊1與2，看屬性欄變化。

3為控件添加窗口

4為屬性設(shè)置窗口

5為窗口測試及控件對齊窗口

6為已添加控件層次查看窗口，當(dāng)然它有三個TAB，只有控件層次才最有用。

在編寫XML的時候，一定注意：

DUILIB XML一定要有一個底層 Layout�。�！

不能直接在 WND上添加控件！

說明，這個工具可能會有諸多BUG，屬性更改失效、時不時崩潰等，不過我遇到崩潰的情況比較少，新手可能會遇到較多，但不要抱怨，畢竟有這樣一個工具已經(jīng)是十分難能可貴了。

可能你已經(jīng)看了屬性欄中有諸多屬性，你可以試著添加圖片，修改顏色，修改邊框等查看一下，然后你也可以看一下WND的屬性，CAPION到底是什么，MINMAXINFO又是什么。