博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
窗体皮肤实现 - 增加Toolbar的交互性
阅读量:7251 次
发布时间:2019-06-29

本文共 6237 字,大约阅读时间需要 20 分钟。

稍微改造一下,让交互性更好点。增加提示和动态效果。

控件实现内容:

  • 1、加入Hint提示
  • 2、加入了简易动画效果,鼠标进入和离开会有个渐变效果。

实现方案:

  • 1、基类选用
  • 2、Action的关联
  • 3、绘制按钮
  • 4、鼠标响应
  • 5、美化(淡入淡出简易动画) OK~完成

一、基类选择

在基类选择上稍微纠结了下。Delphi大家都知道做一个显示控件一般有2种情况,一种是图形控件(VC里叫静态控件),还种种有焦点可交互的。

如果我想做个Toolbar并不需要焦点,也不需要处理键盘输入,TGraphicControl 是比较理想的继承类。不过最终还是使用了TWinControl,主要一点是TWinControl有个句柄方便处理。当然 TGraphicControl也是可以申请句柄的。这个问题就不纠结,确定使用TWinControl。

二、关联Action

说是关联其实就是Toolbar有多少个Button,需要保存这些Button的信息。在标题工具栏(四)中已经有简易实现。个人喜欢用Record来记录东西,简单方便不要管创建和释放。

TmtToolItem = record    Action: TBasicAction; Enabled: boolean; Visible: boolean; ImageIndex: Word; // 考虑到标题功能图标和实际工具栏功能使用不同图标情况,分开图标索引 Width: Word; // 实际占用宽度,考虑后续加不同的按钮样式使用 Fade: Word; // 褪色量 0 - 255 SaveEvent: TNotifyEvent; // 原始的Action OnChange事件 end;

这是一个Button的信息,记录了些基本的信息(这个和原来一样)。如果愿意可以加个样式类型(Style),来绘制更多的Button样式。

TmtCustomToolbar = class(TWinControl) private FItems: array of TmtToolItem; FCount: Integer; ... ...

FItems 和 FCount 用来记录Button的数组容器。直接使用SetLength动态设置数组的长度,简易不用创建直接使用。有了容器,Action就需要个入口来传入。

处理三件事情:

1、检测容器容量,不够增加
2、清空第Count位的Record值(清零)。这步其实对Record比较重要,如果记录中增加参数值时...给你来个随机数那就比较郁闷了。
3、填充记录
4、重算尺寸并重新绘制

procedure TmtCustomToolbar.Add(Action: TBasicAction; AImageIndex: Integer); begin if FCount >= Length(FItems) then SetLength(FItems, FCount + 5); // 保存Action信息 ZeroMemory(@FItems[FCount], SizeOf(TmtToolItem)); FItems[FCount].Action := Action; FItems[FCount].Enabled := true; FItems[FCount].Visible := true; FItems[FCount].ImageIndex := AImageIndex; FItems[FCount].Width := 20; FItems[FCount].Fade := 0; FItems[FCount].SaveEvent := TacAction(Action).OnChange; TacAction(Action).OnChange := DoOnActionChange; // 初始化状态 with FItems[FCount] do if Action.InheritsFrom(TContainedAction) then begin Enabled := TContainedAction(Action).Enabled; Visible := TContainedAction(Action).Visible; end; inc(FCount); // 更新显示尺寸 UpdateSize; end; 保存Action信息

三、绘制按钮

绘制肯定是要完全控制,画布画笔都必须牢牢的攥在手里。美与丑就的靠自己有多少艺术细胞。本人是只有艺术脓包,至于你信不信,反正我是信了。

处理两个消息:WM_Paint 和 WM_ERASEBKGND。不让父类(TWinControl)做多余的事情。

WM_ERASEBKGND 处理背景擦除,这个不必处理。直接告诉消息,不处理此消息。

procedure TmtCustomToolbar.WMEraseBkgnd(var message: TWMEraseBkgnd); begin Message.Result := 1; // 已经处理完成了,不用再处理 end;

WM_Paint消息为减少闪烁,使用Buffer进行绘制。

procedure TmtCustomToolbar.WMPaint(var message: TWMPaint); var DC, hPaintDC: HDC; cBuffer: TBitmap; PS: TPaintStruct; R: TRect; w, h: Integer; begin /// /// 绘制客户区域 /// R := GetClientRect; w := R.Width; h := R.Height; DC := Message.DC; hPaintDC := DC; if DC = 0 then hPaintDC := BeginPaint(Handle, PS); // 创建个画布,在这个上面绘制。 cBuffer := TBitmap.Create; try cBuffer.SetSize(w, h); PaintBackground(cBuffer.Canvas.Handle); PaintWindow(cBuffer.Canvas.Handle); // 绘制完成的图形,直接拷贝到界面。这就是传说中的双缓冲技术木? BitBlt(hPaintDC, 0, 0, w, h, cBuffer.Canvas.Handle, 0, 0, SRCCOPY); finally cBuffer.free; end; if DC = 0 then EndPaint(Handle, PS); end;

最有就是绘制界面上的Action。只要循环绘制完所有按钮就OK了

处理过程:

1、是否要绘制,隐藏跳过
2、根据鼠标事件状态绘制按钮底纹。(按钮在Hot状态还是鼠标按下状态)
3、获得Action的图标,在2的基础上绘制。

OK~完成,偏移位置继续画下个。

获取按钮的状态绘制,默认状态,按下状态和鼠标滑入的状态。

function GetActionState(Idx: Integer): TSkinIndicator; begin Result := siInactive; if (Idx = FPressedIndex) then Result := siPressed else if (Idx = FHotIndex) and (FPressedIndex = -1) then Result := siHover; end;

具体绘制色块型的是非常简单,根据不同类型获取状态颜色。

function GetColor(s: TSkinIndicator): Cardinal; inline; begin case s of siHover : Result := SKINCOLOR_BTNHOT; siPressed : Result := SKINCOLOR_BTNPRESSED; siSelected : Result := SKINCOLOR_BTNPRESSED; siHoverSelected : Result := SKINCOLOR_BTNHOT; else Result := SKINCOLOR_BTNHOT; end; end;

然后就是直接填充颜色

procedure DrawStyle(DC: HDC; const R: TRect; AColor: Cardinal); inline; var hB: HBRUSH; begin hB := CreateSolidBrush(AColor); FillRect(DC, R, hB); DeleteObject(hB); end;

获得图标就不多说啦。直接根据Action的信息获得。

这里主要注意的是,图标是有透明层。需要使用绘制透明函数AlphaBlend处理。

class procedure TTreeViewSkin.DrawIcon(DC: HDC; R: TRect; ASrc: TBitmap; const Opacity: Byte = 255); var iXOff: Integer; iYOff: Integer; begin /// /// 绘制图标 /// 绘制图标是会作居中处理 iXOff := r.Left + (R.Right - R.Left - ASrc.Width) div 2; iYOff := r.Top + (r.Bottom - r.Top - ASrc.Height) div 2; DrawTransparentBitmap(ASrc, 0, 0, DC, iXOff, iYOff, ASrc.Width, ASrc.Height, Opacity); end;

四、鼠标事件响应

鼠标的响应,处理移动、按下、弹起。其他就不需要了。在鼠标移动时检测所在的按钮,按下是一样确定按下的是那个Button,弹开时执行Button的Action事件。不同状态的切换,需要告诉界面进行重新绘制。

在鼠标移动时,除了检测所在按钮外。FHotIndex记录当前光标所在的按钮索引。如果没有按下的状态,需要告诉系统我要显示提示(Hint)。

procedure TmtCustomToolbar.WMMouseMove(var message: TWMMouseMove); var iSave: Integer; begin iSave := FHotIndex; HotIndex := HitTest(message.XPos, message.YPos); // 在没有按下按钮时触发Hint显示 if (iSave <> FHotIndex) and (FHotIndex >= 0) and (FPressedIndex = -1) then Application.ActivateHint(message.Pos); end;

按下时检测,按下的那个按钮。FPressedIndex记录按下的按钮索引(就是数组索引)

弹起时处理按钮事件。这里稍微需要处理一下,就是按下鼠标后不松开移动鼠标到其他地方~~ 结果~~。一般系统的处理方式是不执行那个先前被按下的按钮事件。

所以在弹起时也要检测一下。原先按下的和现在的按钮是否一致,不一致就不处理Action。

五、美化,加入简易动画效果

为了能看起来不是很生硬,在进入按钮和离开时增加点动画效果。当然这个还是比较菜的效果。如果想很炫那就的现象一下,如何才能很炫。然后用你手里攥着的画笔涂鸦把!

动画效果主要加入一个90毫秒的一个定时器,90毫秒刷一次界面~。这样就能感觉有点像动画的效果,要更加精细的话可以再短些。

CONST  TIMID_FADE = 1; // Action褪色 procedure TmtCustomToolbar.SetHotIndex(const Value: Integer); begin if FHotIndex <> Value then begin FHotIndex := Value; Invalidate; // 鼠标的位置变了,启动定时器 // 有Handle 就不用再独立创建一个Timer,可以启动很多个用ID区分。 if not(csDestroying in ComponentState) and HandleAllocated then SetTimer(Handle, TIMID_FADE, 90, nil); end; end;

到点刷新界面,在Timer中增加褪色刷新处理

// 是褪色定时器,那么刷新界面if message.TimerID = TIMID_FADE then UpdateFade;

褪色值其实就是一个0~255的一个透明Alpha通道值,每次绘制底色时根据这个阀值来绘制透明背景Button底纹。所有都为透明时,关闭动画时钟。

procedure TmtCustomToolbar.UpdateFade; var I: Integer; bHas: boolean; begin bHas := False; for I := 0 to FCount - 1 do if FItems[I].Visible and FItems[I].Enabled then begin // 设置褪色值 // 鼠标:当前Button,那么趋向不透明(255) // 不再当前位置,趋向透明(0) if FHotIndex = I then FItems[I].Fade := GetShowAlpha(FItems[I].Fade) else if FItems[I].Fade > 0 then FItems[I].Fade := GetFadeAlpha(FItems[I].Fade); bHas := bHas or (FItems[I].Fade > 0); end; Invalidate; if not bHas and HandleAllocated then KillTimer(Handle, TIMID_FADE); end;

完成啦~

工具条效果图

这个简易Toolbar只实现了Button样式,没有分割线没有下拉多选之类的样式。

”这么弱的东西有毛用?“

其实这个工具条主要目的是用于附着在其他控件上使用,比如某些控件的标题区域位置。当然如果想要搞的强大,那么代码量肯定会膨胀。但在实际项目中使用往往都比较简单,并不需要太过复杂的功能,和做通过控件是完全不同的概念。

到此  的基本处理完结。客户区实际会备停靠框架挤占,所以客户木内容。

后续会介绍一些其他控件的实现。由于某些原有,代码会直接使用写,不再使用

--

开发环境:

  • Delphi XE3
  • Win7

完整源代码:

本文转自莫水千流博客园博客,原文链接:http://www.cnblogs.com/zhoug2020/p/5789034.html,如需转载请自行联系原作者
你可能感兴趣的文章
XCode v9.6.2017.0830
查看>>
ES不设置副本是非常脆弱的,整个文章告诉了你为什么
查看>>
设置nmon 每天自动收集性能信息
查看>>
python写一段脚本代码自动完成输入(目录下的所有)文件的数据替换(修改数据和替换数据都是输入的)【转】...
查看>>
JVM的内存分配与垃圾回收策略
查看>>
分布式设计与开发(二)------几种必须了解的分布式算法
查看>>
IT高管和易筋经的故事
查看>>
ASP.NET 2.0新控件、管理外观、布局及其它用户体验
查看>>
Javascript分号,加还是不加?
查看>>
[Ubuntu Setup] Ubuntu 14.10 LTS 中文输入法的安装
查看>>
Selenium获取当前窗口句柄与切换回原窗口句柄
查看>>
迁移 SQL Server 到 Azure SQL 实战
查看>>
Linux 内核中断内幕【转】
查看>>
Learning Perl 第3章习题答案
查看>>
ReportView 添加自动增长序号
查看>>
关于在IBatis中返回DataSet
查看>>
Android -- TypedArray
查看>>
android开发系列文章集合
查看>>
rsync+inotify实时同步环境部署记录
查看>>
Memcached Java Client API详解
查看>>