码迷,mamicode.com
首页 > Windows程序 > 详细

窗体皮肤实现 - 增加Toolbar的交互性

时间:2016-08-19 22:15:25      阅读:308      评论:0      收藏:0      [点我收藏+]

标签:

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

控件实现内容:

  • 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_PaintWM_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样式,没有分割线没有下拉多选之类的样式。

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

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

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

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

--

开发环境:

  • Delphi XE3
  • Win7

完整源代码:

窗体皮肤实现 - 增加Toolbar的交互性

标签:

原文地址:http://www.cnblogs.com/zhoug2020/p/5789034.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!