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

                                DuiEditor简易教程（二）

接上文。

3，设计工具栏。这个工具栏分2部分，左边是工具栏按钮，右边是一个大的logo图片。

选中工具栏这一块的HorizontalLayout，为了方便述说，取名为HC。在HC中插入2个HorizontalLayout子控件，分别取名为HD,HE。

设置HE的属性width=150，在HE中插入一个按钮，给按钮设置bkimage=logo.png。当然也可以不插入按钮而是直接给HE设备背景图片，其实这个按钮的作用是让用户不小心点到时打开公司主页用的，所以还是插入Button，按照范例吧。

选中HD，设置属性inset=“10,0,10,0”，childpadding=10，childValign=vcenter。

在HD中插入一个Option控件,取名为OA，设置width=65,height=62。selectedimage=toolbar_pushed.png，normalimage=toolbar_normal.png，hotimage=toolbar_hover.png，pushedimage=toolbar_pushed.png。

给OA设置foreimage，点开图片选择窗口。选择图片commmon.png，设置dest="10,5,50,45”，上一节中有用到source属性，按字节面意思理解就可以了，在实际应用中这个技巧会经常用到，这里的微调都是可以在设计器窗口实时预览的。

选中OA，设置属性，text="常用"，font="0"，textpadding=“0,40,0,0”。selected=true，默认第一个是选中的。效果如下图。

剩下的5个option差不多的，可以切换到代码页面，先复制粘贴几个，再回到设计页面调整。

工具栏这部分就完成了。效果如下：

今天就先写到这里了。谢谢。