電腦軟件推薦： Dui Designer v1.3.6.158 綠色版 網(wǎng)易CC語音PC版 v1.11 同花順遠(yuǎn)航版 v8.2.1.4 官方版 AutoCAD Electrical 2015 破解版本 (含注冊機與補丁)

Dui Designer是一款功能強大的UI設(shè)計工具，操作簡單便捷。只需通過幾個簡單步驟，你就能設(shè)計出各種簡潔且美觀的UI素材，即便是沒有設(shè)計經(jīng)驗的用戶，也能夠輕松上手。如果你還沒有找到合適的UI素材，不妨嘗試使用Dui Designer來親自設(shè)計一個。需要的朋友趕快下載體驗吧！

Dui Designer使用教程

1、啟動設(shè)計器：

首先在duilib源碼的bin文件夾中找到【DuiDesigner.exe】，這就是UI設(shè)計器（注意：如果不重新編譯，打開XML時可能會崩潰）。

2、創(chuàng)建新項目：

在菜單欄選擇【文件】-->【新建】-->【文件】，然后選擇保存路徑保存文件。

3、添加布局：

前文已詳細(xì)介紹過布局和標(biāo)題欄的設(shè)置，這里我們將直接創(chuàng)建一個包含標(biāo)題欄的布局。

(1)添加一個VerticalLayout布局作為整個窗口的布局（由于設(shè)計器不能直接拖拽控件，因此先點擊工具箱中的VerticalLayout控件，再點擊界面進(jìn)行添加）。

(2)再添加一個HorizontalLayout布局作為標(biāo)題欄的布局。

發(fā)現(xiàn)HorizontalLayout布局沒有填滿整個窗口寬度，需要調(diào)整。在屬性設(shè)置中，將【Size】展開，然后將【W(wǎng)idth】設(shè)置為0，這樣它會自動拉伸到整個寬度。（請確保選擇正確的控件進(jìn)行設(shè)置哦）

(3)接下來添加兩個VerticalLayout布局，一個用于標(biāo)題欄左側(cè)的占位區(qū)域，另一個用于右側(cè)的按鈕區(qū)域。注意，VerticalLayout和HorizontalLayout有時可以互換，但交叉方式一般更有效。

將右側(cè)按鈕布局的寬度設(shè)置為77。

確保布局沒有錯位，左側(cè)樹形結(jié)構(gòu)應(yīng)該如下所示：

(4)完成布局后，我們可以開始添加按鈕：

點擊按鈕控件，然后點擊右上角的按鈕布局，像下面這樣：

此時你可以拖動邊框來調(diào)整控件的大小，或移動控件的位置。

你也可以使用Ctrl+C和Ctrl+V復(fù)制按鈕。

然后將按鈕放置在適當(dāng)?shù)奈恢谩?/p>

依此類推，再添加第三個按鈕，效果如下：

此時可以將三個按鈕頂部對齊：

選擇三個按鈕：

然后點擊【頂端對齊】按鈕。

接下來點擊【橫向】按鈕，使按鈕在水平方向上均勻分布。

以上方法已經(jīng)示范，具體的位置和間距可以根據(jù)需要做適當(dāng)調(diào)整。

設(shè)計器在調(diào)整控件大小和位置時非常方便。

記得定期保存，使用Ctrl + S，避免設(shè)計器崩潰時丟失工作。

現(xiàn)在，讓我們看看XML文件的內(nèi)容。右鍵點擊Tab，選擇【打開所在的文件夾】。

然后打開XML文件（請注意，這里只是打開了文件夾，并未直接定位到文件）。此時，XML文件內(nèi)容如下：

(5)至此，你可以選擇停止使用UI設(shè)計器了。不過，考慮到這個工具是由大佬精心開發(fā)的，建議多加利用，記得按Ctrl+S，使用起來還是很靠譜的。

接下來我們繼續(xù)介紹一些常用屬性：

在duilib源碼目錄下，有一個名為【屬性列表.xml】的文件，詳細(xì)列出了所有控件的屬性。雖然有些屬性可能缺失，但已經(jīng)足夠用了。

在此，我們只介紹一些常用的屬性。

首先我們將窗口的背景色設(shè)置為綠色。

選擇整個窗口布局后，在屬性欄設(shè)置【BkColor】屬性。

同樣地，設(shè)置標(biāo)題欄的背景色。如果標(biāo)題欄布局被兩個子布局遮擋，可以通過點擊左