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

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

軟件詳細(xì)介紹：

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

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

2、新建項(xiàng)目：

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

3、新建布局：

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

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

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

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

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

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

右邊的布局width改為77

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

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

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

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

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

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

同理，加上第三個(gè)按鈕，如下圖：

這個(gè)時(shí)候，我們可以將三個(gè)按鈕頂端對(duì)齊：

先選中三個(gè)按鈕，然后點(diǎn)擊【頂端對(duì)齊】按鈕

。

接著點(diǎn)擊【橫向】按鈕

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

一切就緒以后，我們可以點(diǎn)擊【測(cè)試窗體】按鈕看看窗口效果

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

使用方法：

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

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

2為WND窗口，請(qǐng)單擊1與2，看屬性欄變化。

3為控件添加窗口

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

5為窗口測(cè)試及控件對(duì)齊窗口

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

在編寫XML的時(shí)候，一定注意：

DUILIB XML一定要有一個(gè)底層 Layout�。。�

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

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

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