稍微改造一下,让交互性更好点。增加提示和动态效果。
控件实现内容:
- 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
完整源代码: