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

article/2025/5/20 7:50:36

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

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

  


开发步骤一:

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

“我的皮肤”调用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

   


http://chatgpt.dhexx.cn/article/Df9WHVZY.shtml

相关文章

stylish网站换肤与网站分析妙用

作者:吴甜甜 个人博客网站: wutiantian.github.io 微信公众号: 吴甜甜的博客 stylish是火狐浏览器等平台的换肤插件 结合F12开发者功能可以进行: 背景色看起来不舒服,想换种颜色页面有一些内容你不想看到&#xff0c…

Unity3D 模型换肤技术

最近在看Unity3D的人物模型和动画。所以今天先说下人物的换装吧。相信大家都玩过网游吧,没有玩过的也相信见过,就是网游或者单机游戏里的人物会有更换服装,更换武器的功能。如果外形(mesh)是一样的,那么把贴图换下就好&#xff0c…

C++ QT结合FFmpeg实战开发视频播放器-13视频播放器换肤功能实现(1)背景属性添加

视频播放器换肤功能实现(1)背景属性添加 作者:虚坏叔叔 博客:https://xuhss.com 早餐店不会开到晚上,想吃的人早就来了!😄 视频播放器换肤功能实现(1)背景属性添加 回到我们的编辑器源码中, 运行程序&am…

iOS端实现节日换肤

本文是我在网上看到一篇不错的文章,因为之前没接触过,所以特意转过来,和大家一起分享下..以下正文:一、问题的提出  不知道大家有没有发现, 元旦期间, 很多APP界面里的图标都换成了具有节日气氛的样式,而在过了元旦节之后, 这些图标又悄无声息的变回了本来的面貌.   这些具…

换肤 与 静态库

一 换肤 基本的换肤功能实现选中皮肤保存至系统偏好 // 记录用户选中的皮肤[[NSUserDefaults standardUserDefaults] setObject:skinColor forKey:"skinColor"];[[NSUserDefaults standardUserDefaults] synchronize];123123 抽取SkinTools单例,简化视图…

C++ QT结合FFmpeg实战开发视频播放器-15换肤功能的后台实现

作者:虚幻私塾 博客:https://xuhss.com 早餐店不会开到晚上,想吃的人早就来了!😄 一、换肤功能的后台实现 定义changeBackground函数,让qml去调用这个函数来实现换肤功能, 函数的实现调用了set…

Element UI主题换肤功能(基于vue-element-admin框架)

环境信息: 日期:2022-08-05 node版本:v14.15.4 "sass": "1.26.8", "sass-loader": "8.0.2", 本次实现的是基于花裤衩大佬的 vue-element-admin 或者 vue-admin-template 的前端框架实现的主题换肤功…

JavaScript:演示Ajax的get和post请求,练习选顶卡和换肤案例

JavaScript:演示Ajax的get和post请求,练习选顶卡和换肤案例 Ajax 异步请求 特别提示: 异步请求不要使用live server插件,必须创建一个本地服务器环境 同步与异步 以前端请求,后端响应为例 同步: 前端发请求, 必须等到后端响应完成,才允许发送另一个请求异步: 前端…

Android换肤之Android-skin-support

前言 之前做个APP需要用到换肤,在githup上面找了很久,终于找到一款功能强大、基本能够满足产品需求的换肤框架,那就是Android-skin-support,这个框架换肤功能很强大、不管是白天、黑夜还是任意颜色、图片的皮肤包都可以&#xff…

对 Android 应用换肤方案的总结

作者:me 虽然现在已经有很多不错的换肤方案,但是这些方案或多或少都存在自己的问题。在这篇文章中,我将对 Android 现有的一些动态换肤方案进行梳理,对其底层实现原理进行分析,然后对开发一个新的换肤方案的可能性进行…

前端换肤,聊一聊主题切换那些事

一些网站通常会提供白天、夜间模式,以及自定义主题等等,这种主题切换也就是本文说的前端换肤。 这次案例用的是白天和夜间模式的切换,在做换肤之前,得先知道一件事情:css的变量定义,对变量定义不熟悉的同学…

android 皮肤,Android换肤

前言 之前做个APP需要用到换肤,在githup上面找了很久,终于找到一款功能强大、基本能够满足产品需求的换肤框架,那就是Android-skin-support,这个框架换肤功能很强大、不管是白天、黑夜还是任意颜色、图片的皮肤包都可以&#xff0…

Android 应用换肤方案的总结

虽然现在已经有很多不错的换肤方案,但是这些方案或多或少都存在自己的问题。在这篇文章中,我将对 Android 现有的一些动态换肤方案进行梳理,对其底层实现原理进行分析,然后对开发一个新的换肤方案的可能性进行总结。 1、通过自定…

Android 插件化换肤方案

效果 实现流程 实现LayoutInflater.Factory2这个接口,实现onCreateView方法(主要仿照系统原来LayoutInflater.createView()方法的实现),此处可以拿到页面中所有的View,判断有没有需要换肤的View,并且保存下来;在Activ…

墨迹天气桌面挂件换肤分析

该篇文章需要准备如下工具: 1、墨迹皮肤文件,下载地址。 Andorid换肤在网上搜索出来的结果,大概有三种: 1、应用本身带有写好的布局 优点:开发难度低 缺点:灵活性低,用户不能自定义皮肤。 2、使…

前端换肤的一些思考

先看看大家怎么做的。下面是两篇别人写的文章,最后是我自己的方法。 第一篇:聊一聊前端换肤 之前在做网站换肤,所以想谈谈网站换肤的实现。网页换肤就是修改颜色值,因此重点就在于怎么来替换。 一般实现 如上图,我们…

Visio保存为网页出错

visio 试图保存文档时出错。已创建的页面可能无效。 试图保存文档时出错。以创建的页面可能无效。最近在用Visio作图的时候时长发生的问题。 经过摸索,不覆盖保存没有问题,如果覆盖保存,有时会有这个问题。解决办法就是把以前生成的网页和相关…

Visio 2016软件

Visio 2016是微软官方最新发布的一款领先的图表解决方案,它可以帮助企业制作定义流程、编辑最佳方案的同时还可以建立可视化计划变革的一款实用工具。这款软件目前提供了:上手图例(starter diagrams)、成百上千的智能形状、一步数…

解决visio和office365冲突,无法安装visio问题

本教程用于解决office365和visio冲突,无法安装visio问题 目前系统中已经安装Office365 尚未安装visio专业版本 1、下载office增强工具。 office增强工具下载地址 右键解压,此处要记得解压的目录(建议在当前目录下)。 根据自…

Visio软件

Visio使用小技巧 上标、下标快捷键 上标:CtrlShift“”下标:Ctrl“” 自定义图形旋转角度 当点击菜单栏上的视图——任务窗格——大小和位置选项,在页面编辑区的左下方出现一个大小和位置窗口。 大小和位置窗口如下: 自…