仿酷狗音乐播放器开发日志十八——换肤功能的实现二:改变控件和窗体透明度(附挂件类源码)

转载请说明原出处,谢谢~~

         昨天把大致布局分析了一下,昨天晚上把布局写好实现了,今天把大致的功能完成了一下,现在的外观已经和原酷狗的换肤界面完全一样,其中的调整播放列表透明度和设置整个软件透明度的代码已经完成了,先把效果图贴一下,然后开发说开发过程。

  

开发步骤一:

       布局的部分我就不说了,昨天已经分析了,只要用好素材,花点时间就能把界面效果做出来,其中“官方皮肤”和

“我的皮肤”调用CTabLayout可以实现两个界面的切换,如图:

  

      原酷狗在切换这两个界面时是有动画效果的,所以在这个地方我是用来 扩展后的CTabLayout控件

CUIAnimationTabLayout,实现了切换时的动画效果。

开发步骤二:

     接下来我先把设置播放列表透明度和设置皮肤透明度的功能完成。

       在点击了列表透明的组合框后会弹出个含有滑动条控件的界面来设置透明度,当鼠标移出它的范围时会自动销毁

      

      从功能外观上这是属于组合框的范畴,但是在和duilib的组合框的功能对比后发现,duilib无法实现这样的效果,实际上duilib的组合框CComboUI的弹出界面是出现在下方而不是上方,第二CComboUI的内容一般是多个文字选项,第

三CComboUI的文字需要通过点击它下拉菜单的选项来改变而无法单独设置。综上三点不适合用CComboUI来做这部

分。

      那应该怎么做?我首先想到的是使用已经写好的菜单控件来做这个功能,的确,菜单从功能上还是外观都可以胜

任,不过有一点就是菜单不会在鼠标移除范围时自动销毁。反过来一想我又觉得用菜单不合适,一来菜单的功能比这

个复杂得多,编写菜单用了1000多行代码,用在这里感觉降低程序性能,二来不至于为了自动销毁功能再去修改菜单

的代码。所以干脆我又写了一个名叫CPopupWidget的专门用于弹出小挂件的类,这个类就是个简单的弹出窗体类,

继承了CWindowWnd和INotifyUI。整个类代码只用了大概250行,和其他窗体类没什么太大区别。

      自动销毁这个功能很容易实现,只要在HandleMessage函数中处理WM_MOUSERLEAVE消息,调用close()函数

就可以了。使用这个CPopupWidget类的时候传入xml布局文件进去来决定他的外观。

      在这个窗体中有一个CSliderUI控件,这个控件在滑动时会去改变主窗体的播放列表的透明度,为此我需要把

CSliderUI控件的滑动事件通知到主窗体,这部分的实现代码已经在《为duilib的MenuDemo增加消息响应,优化代

码和显示效果点击打开链接,这里讲过了,使用的是第一种消息通知方法。

       主窗体接收到了_T("valuechanged") 或者 _T("movevaluechanged")消息后,先判断是否是要改变播放列表透明

度的事件,确认后去改变透明度。有些朋友不知道怎么去改变duilib的一个控件的透明度,其实很简单:为对应的控件

设置一个背景图并且设置fade属性,比如bkimage="file='UI\LeftTab\List_bk.png' fade='122'",背景图是任意的,关键

在于fade属性,他是改变图片透明度的属性,所以只要动态修改这个属性的值就可以改变任意控件的背景的透明度

了。

        最终的设置列表透明度的效果如下:

     

开发步骤三:

       接下来完成设置窗体透明度的部分,在原酷狗里面,这个窗体透明度的的弹出窗体的外观和设置播放列表的透明

度的外观是一样的,这就大大减少了我的工作量,如图

       

         同样的原理,在主窗体接收到滑动消息后,先确认是改变窗体透明度的消息,然后开始设置,在duilib的

CPaintManager类中已经有现成的函数SetTransparent,直接拿来用就可以改变整个窗体的透明度,不用想也知道其

实就是调用了 系统的SetLayeredWindowAttributes函数实现的。我就不赘述了。

         比较麻烦的一点就是,在主窗体、皮肤设置窗体和小挂件窗体之间有许多共享的信息,这些信息的沟通就只能

靠传递相应的参数来实现了,主窗体的指针要传到皮肤设置窗体,好让皮肤设置窗体得知一些主窗体的透明度信息来

初始化自己的控件,小挂件窗体需要获取主窗体的CPaintManager实例的指针来发送消息,同时也需要皮肤设置窗体

的指针来改变这两个组合框内的值,。小挂件的参数的传递主要都在他

的Init函数中,Init函数的参数我已经做了注释,大家可以自己看源码。

       实际上,那个看似组合框的控件并不是组合框,而是一个按钮,只不过背景图片中添加了个小箭头来达到视觉上

的效果。^_^~~

开发步骤四:

     做完了两个功能,接下来把自定义皮肤按钮的功能做一下,在单击自定义皮肤按钮时会弹出系统的打开对话框去选

择一个图片来做皮肤,这个功能实现起来最简单,只需要用GetOpenFileName函数来封装一个打开对话框的函数去调

用就可以了,最后把返回的路径的值处理一下就可以用了。

结束:

     今天就写这么多代码吧,另外还有几个没实现的功能等明天再做。第一个没实现的功能是调色板功能,原酷狗的调

色板如下:

    

      在这里任意选择颜色后可以应用到整个窗体。

       第二个没做其实就是换肤,实际上我还没有写换肤的代码,就是点击一个图片就让整个软件的所有窗口的背景图

统一变换。但是实际这个最简单的功能,无非就是通知所有窗口换个背景图,所以不着急做这个功能。

      第三个没有做的是每个显示的背景图的小图的动态外观,原酷狗的背景图的小图标,有normal、hover、down等

多种状态,如图

      当鼠标经过时会有个黑色图片覆盖,并且在他上面显示出作者的一些信息。要实现这个效果应该另外开发一个控

件来支持动态的信息展示效果,不过这个控件的开发难度比起播放列表控件要简单得多,应该很容易做出来。

      CWidgetPopup类的下载地址:点击打开链接

     Redrain  2014.8.7  18:15

   

时间: 2024-08-01 19:48:03

仿酷狗音乐播放器开发日志十八——换肤功能的实现二:改变控件和窗体透明度(附挂件类源码)的相关文章

仿酷狗音乐播放器开发日志十九——CTreeNodeUI的bug修复二(附源码)

转载请说明原出处,谢谢        今天本来打算把仿酷狗播放列表的子控件拖动插入功能做一下,但是仔细使用播放列表控件时发现了几个逻辑错误,由于我的播放 列表控件是基于CTreeViewUI和CTreeNodeUI做得,所以产生这几个bug的原因还在于他们两个,在<仿酷狗音乐播放器开发日志十一 --CTreeNodeUI的bug修复>中已经修复过一个动态添加控件的相关bug,这属于第二次修复了.关于第一次bug的修复,后来 Duilib扩展群的 joe 又进行过比我更全面的修复,我现在使用的C

仿酷狗音乐播放器开发日志十五——音乐电台列表控件的实现

转载请说明原文出处,谢谢~~             前些日子封装了好几天控件,把webkit浏览器控件,vlc视频播放控件,音频播放控件做好了,做这些控件一来是可以单独使用,用到其他项目中,而来可以直接用到这个仿酷狗播放器项目中,后期把他们结合起来就是个完整播放器了.           今天就继续前段时间的工作,继续完善仿酷狗的界面.前面的文章里已经把左侧的各个列表的外观做好了,尤其是做好了播放器列表,不过今天发现,音乐电台列表中的电台项目也是个比较复杂的控件,所以今天就把他做出来.    

仿酷狗音乐播放器开发日志十六——各个右键菜单的实现

转载请说明原出处,谢谢~~         整个软件主体做完了,现在就开始做各个零碎的部分了,首先拿各个菜单开刀.做这个菜单要比做前面的功能简单多,因为我已经写好了一个通用菜单可以直接拿来用.没看过我的菜单的那篇文章的请点这里:点击打开链接.我看了一下,酷狗的各种菜单共有6个,主界面的 右键菜单,托盘菜单,音乐列表项右键菜单,音乐分组菜单,电台列表项右键菜单,定位功能菜单,下载列表右键菜单.        我大致给截图看一下几个主要的菜单的效果.        主界面右键菜单:        

仿酷狗音乐播放器开发日志十二——播放列表的实现六

转载请说明出处,谢谢~~      前天和昨天只顾看电视剧了,没有写程序,好在把<孤岛飞鹰>看完了,这下在可以安心写代码了 ^_^     上次说道还要开发分组控件,分组控件的开发过程要比其他两个控件要简单得多,因为他的功能相对要少,而且自身的状态不像音乐播放项目哪个多,所以外观的编写比较简单,主要的功能就是所以一个容器来盛放音乐播放项目CMusicListItemUI控件.     他同样是继承自CTreeNodeUI控件,然后我重写了DoEvent函数,过滤了几个消息的处理,让他的行为和原

仿酷狗音乐播放器开发日志十——播放列表的实现五

  之前做好了CMusicListItemUI控件,昨天晚上经过修改后现在已经把一些bug修复,可以正常工作了.所以开始开发播放列表CMusicListUI控件.    但是今天早上经过我分析后,发现我目前继承自CListUI的CMusicListUI控件,我虽然给他添加了可以设置分组的功能,并且能正常工作,但是再和酷狗的播放列表比起来发现缺点就比较多了,下面我先对比一下酷狗和我做的CMusicListUI控件.    //////////////////////////////////////

仿酷狗音乐播放器开发日志二十一 开发动态调色板控件(附源码)

转载请说明原出处,谢谢~~           上一篇仿酷狗日志结束后,整个换肤功能就只剩下调色板功能没有做了,我本以为会很简单,但是研究了酷狗的调色板功能后发现不是那么简单的事情.首先看一下酷狗的调色板的样子:         我原本以为酷狗的主界面只是一张图片,然后通过鼠标坐标来选择颜色,简单粗暴.等我开始做这部分时发现情况不一样.         可以看到,酷狗的调色板分为两部分,上半部分是调色板的主界面,下半部分是调整亮度的工具栏,我这里分别给他们起名为Pallet和Bar方便说明.这个

仿酷狗音乐播放器开发日志二十二 动态调色板控件第二版(性能大幅提升附源码)

转载请说明原出处,谢谢~~         在上次写的博客<仿酷狗音乐播放器开发日志二十一 开发动态调色板控件(附源码)>发布后,我在群里和网友讨论这个控件的性能和优 缺点,发现了他很多不足,还有很多提升空间,之后我简单的修改了代码提升了控件的响应速度.        昨天网友"风之羽翼"联系到我,他在我原来写的控件基础上,对绘图的算法进行重写,大幅提升了控件的绘制速度,算法也精准了很多,最终的控 件效果要比原酷狗更加流畅,于是今天把新的控件代码上传,供感兴趣的朋友使用.在

仿酷狗音乐播放器开发日志二十——换肤功能背景图片控件的制作(附源码)

转载请说明原出处,谢谢~~           <仿酷狗音乐播放器开发日志二十>里做了换肤功能的一部分,今天完成其他的部分.酷狗的换肤窗口里的背景图可以让用户选择来换图,原酷狗的背景图的小图标,有normal.hover.down等多种状态,鼠标移动上去便会发生变化.如图        当鼠标经过时会有个黑色图片覆盖,边框变为浅蓝色.并且在他上面显示出作者的一些信息.要实现这个效果应该另外开发一个控件来支持动态的信息展示效果.我把这个小控件的开发过程和源码发一下,给学习做duilib控件的新手

仿酷狗音乐播放器开发日志——整体框架分析

转载请说明出处,谢谢~~ 学习duilib界面库有一段时间了,除了仓鼠软件共享以外还没用它开发过什么完整的软件项目.今天看到酷狗音乐播放器做得不错,经过几年的改革,酷狗现在的UI已经相当不错了.在这个假期,我决定做一个仿酷狗音乐播放器,模仿酷狗的软件界面,并加入基本的音乐播放功能,在QQ空间写出开发日志以作记录~~     首先分析一下酷狗播放器的界面布局.     很简单明了的布局方式,我把它先大致分为3部分,在Firework里贴上酷狗的软件的截图,然后使用切片工具对三部分进行精确分割,得到