duilib设计器 DuiEditor简易教程 (DuiDesigner) （三）

                              DuiEditor简易教程（三）

4，设计主界面

继续。

上一章有个错漏的地方，没有给工具栏按钮设置group属性。

回到界面设计，工具栏下来是一条水平分割线。它只需要3个属性就搞定了。

接下来是主界面，这里有两排，一排Option和Tablayout页面。我们原先插入的是HorizontalLayout控件，应该是错了。点击设计器工具栏的代码按钮，如图，把箭头所指HorizontalLayout改成VerticalLayout。取名为VA。

选中VA，设置属性，inset="5,0,5,0"，插入一个HorizontalLayout，取名为HG，再插入一个TabLayout, 取名为T1。顺便把最下方的状态栏高度设置一下，height=24。

选中HG，height=26。插入一个Option控件，取名为examine，设置相关属性。

相同的，把其他几个option也加进去。操作技巧是，去代码页面复制粘贴，修改text属性就好了。别忘了它们的group属性。

选中T1，设置属性bkcolor=ffffff。插入8个HorizontalLayout，这表示tablayout有8个分页，分别对应上面8个Option控件。

选中T1下面的第一个HorizontalLayout，控件箱选中CustomControl，在设计页面点鼠标左键，插入一个自定义控件。

注意，在duilib附带的demo中，这是个自定义控件，我们这里直接输入控件名ComputerExamine。 这里的父控件名，只在设计器中使用，不影响程序中duilib的解析。

效果和demo有点不一样啊，暂时不管它。这个子窗口其实写的并不好，原demo中大量使用了float属性，这样很不好的。实际应用中，非不得已，不要用float属性。

接着，在剩下的7个HorizontalLayout插入Text控件，并设置文本、字体、对齐等属性。

这里有个技巧，在控件树中，右键Tablayout，可以切换页面，方便我们设计页面。

主界面应该算完成了。

5，状态栏。 这个简单，只是在HorizontalLayout里面插入了几个Text控件和按钮控件。不赘述，有兴趣的自己练习吧。

 

DuiEditor的初级教程到这里就结束了。总结一下，使用设计器确实可以提高效率，我们使用中也经常在设计和代码两者间频繁切换，这就要求你会一点点手写，至少要能看懂吧。对于新手来说，不需要记忆那么多控件名和属性名，提高入门速度。

还有，谢谢观看。