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差不多的,可以切换到代码页面,先复制粘贴几个,再回到设计页面调整。
工具栏这部分就完成了。效果如下:
今天就先写到这里了。谢谢。