OrangeUI-开放-免费

如下图所示,这是一个非常普通的页面,

在界面顶部的工具栏左边有一个按钮,
如下图所示:

它的左边是按钮的图标,右边是按钮的标题,
用于返回上一页面,
 
实现的步骤如下:
拖一个Button到工具栏上,
宽度设置为73,
Align设置为alLeft,
标题设置为”返回所有文件”,
图标Icon设置为白色箭头图标,
如下图所示:

再把标题的字体颜色设置成白色,
属性为SelfOwnMaterial.DrawCaptionParam.DrawFont.FontColor.Color,

把图标绘制参数设置为自适应,
属性为SelfOwnMaterial.DrawIconParam.IsAutoFit,

效果如下:

现在只需要把标题移动到箭头图标的右边就可以了,
有两种方法,
第一种方法,
是把标题设置居中显示:


第二种方法,
需要涉及到调整标题的绘制矩形了,
就是要把标题绘制在箭头图标右边,
标题的绘制矩形是在SelfOwnMaterial.DrawCaptionParam.DrawRectSetting中设置,
DrawRectSetting的属性有:
Left:左边距,
Top:上边距,
Right:右边距,
Bottom:底边距,
Width:绘制区域的宽度,
Height: 绘制区域的高度,
设置的步骤如下:
先把DrawCaptionParam.FontHorzAlign设置为fhaLeft,
再把DrawRectSetting的Enabled设置为True,
表示使用DrawRectSetting中设置的绘制区域来绘制标题,
把SizeType设置为dpstPixel,
表示它的位置和尺寸属性(Left,Top,Right,Bottom,Width,Height)的单位为像素,
(注:SizeType为dpstPencent时,位置和尺寸属性单位为整个控件的百分比),
最后把Left设置为22,因为箭头图标差不多占了左边22个像素,

再看下显示的效果: