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

本文涉及的产品
日志服务 SLS,月写入数据量 50GB 1个月
简介: 转载请说明原出处,谢谢~~           《仿酷狗音乐播放器开发日志二十》里做了换肤功能的一部分,今天完成其他的部分。酷狗的换肤窗口里的背景图可以让用户选择来换图,原酷狗的背景图的小图标,有normal、hover、down等多种状态,鼠标移动上去便会发生变化。

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

 

        《仿酷狗音乐播放器开发日志二十》里做了换肤功能的一部分,今天完成其他的部分。酷狗的换肤窗口里的背景图可以让用户选择来换图,原酷狗的背景图的小图标,有normal、hover、down等种状态,鼠标移动上去便会发生变化。如图


       当鼠标经过时会有个黑色图片覆盖,边框变为浅蓝色。并且在他上面显示出作者的一些信息。要实现这个效果应该另外开发一个控件来支持动态的信息展示效果。我把这个小控件的开发过程和源码发一下,给学习做duilib控件的新手朋友做个例子,控件的整体代码很少,熟悉duilib的朋友就不用看这篇博客了。

      我继承CButtonUI类来做这个控件,起名为CSkinPikerPictureItemUI,这个控件的行为和Button是相似的,唯一的区别就是鼠标移动和单击他的时候会显示出额外的信息的图片样式。

      我本来想通过写一个布局,利用多个控件的组合来完成这个效果,但是回头一想,这个控件的效果并不复杂,使用布局去添加多个控件实在是杀鸡用牛刀,而且浪费资源。所以还是觉得直接把这个效果绘制出来。想要改变控件在hot和down状态下的显示效果,只要重写CButtonUI类的PaintStatusImage函数就可以了,编程的方法可以参考CButtonUI类的代码。

       另外,由于这个控件上要显示出这个图片的名字和作者的名字,所以就应该为这个控件增加两个属性,用来在xml文件中设置这两个值,为此需要重写SetAttribute函数。先声明两个成员变量保存这两个值:

	CDuiString m_BkName;
	CDuiString m_Author;

      SetAttribute函数的代码

void CSkinPikerPictureItemUI::SetAttribute(LPCTSTR pstrName, LPCTSTR pstrValue)
{
	if( _tcscmp(pstrName, _T("bkname")) == 0 ) m_BkName = pstrValue;
	else if( _tcscmp(pstrName, _T("author")) == 0 ) m_Author += pstrValue;
	CButtonUI::SetAttribute(pstrName, pstrValue);
}


        PaintStatusImage函数的代码

void CSkinPikerPictureItemUI::PaintStatusImage(HDC hDC)
{
	CButtonUI::PaintStatusImage(hDC);

	if( IsFocused() ) m_uButtonState |= UISTATE_FOCUSED;
	else m_uButtonState &= ~ UISTATE_FOCUSED;
	if( !IsEnabled() ) m_uButtonState |= UISTATE_DISABLED;
	else m_uButtonState &= ~ UISTATE_DISABLED;

	if( (m_uButtonState & UISTATE_PUSHED) != 0 || (m_uButtonState & UISTATE_HOT) != 0) {

		DrawImage(hDC, kSkinPickerPictureItemForeImage) ;

		//计算作者信息文字和背景图片名字文字的显示位置,这里是用了硬编码,请使用者自己修改
		RECT rcBkName = m_rcItem;
		LONG nTextPadding = (m_rcItem.right - m_rcItem.left  - CRenderEngine::GetTextSize(hDC, GetManager(),\
			m_BkName.GetData(), m_iFont, m_uTextStyle).cx) / 2;
		rcBkName.left += nTextPadding;
		rcBkName.right -= nTextPadding;
		rcBkName.top += 15;
		rcBkName.bottom = rcBkName.top + 20;

		RECT rcAuthor = m_rcItem;
		nTextPadding = (m_rcItem.right - m_rcItem.left - CRenderEngine::GetTextSize(hDC, GetManager(),\
			m_Author.GetData(), m_iFont, m_uTextStyle).cx) / 2;
		rcAuthor.left += nTextPadding;
		rcAuthor.right -= nTextPadding;
		rcAuthor.top += 40;
		rcAuthor.bottom = rcAuthor.top + 20;

		CRenderEngine::DrawText(hDC, m_pManager, rcBkName, m_BkName, kBkNameColor, m_iFont, m_uTextStyle);
		CRenderEngine::DrawText(hDC, m_pManager, rcAuthor, m_Author, kAuthorColor, m_iFont, m_uTextStyle);
		CRenderEngine::DrawRect(hDC, m_rcItem, 2, kBorderColor);

	
	}
}

       这个控件的编写非常简单,我也就不多说什么了,不知道让duilib调用自定义控件的可以看看duilib自带的360demo和QQDemo,我这里给写出CreateControl的代码:

CControlUI* CSkinPicker::CreateControl(LPCTSTR pstrClass) 
{
	if (_tcsicmp(pstrClass, kSkinPickerPictureItemInterface) == 0)
		return	new CSkinPikerPictureItemUI();

	return NULL;
}

        效果图:


  

            有朋友在和我聊天中提起我博客里一些原理写的多,但是发的代码不够,我以后尽量多发布源代码出来~~

        这个控件的源码:点击打开链接



     Redrain  2014.8.7  18:15

相关实践学习
日志服务之使用Nginx模式采集日志
本文介绍如何通过日志服务控制台创建Nginx模式的Logtail配置快速采集Nginx日志并进行多维度分析。
目录
相关文章
|
2月前
|
存储 监控 数据库
Django 后端架构开发:高效日志规范与实践
Django 后端架构开发:高效日志规范与实践
46 1
|
2月前
|
SQL 关系型数据库 MySQL
【MySQL】根据binlog日志获取回滚sql的一个开发思路
【MySQL】根据binlog日志获取回滚sql的一个开发思路
|
1月前
|
存储 监控 数据可视化
SLS 虽然不是直接使用 OSS 作为底层存储,但它凭借自身独特的存储架构和功能,为用户提供了一种专业、高效的日志服务解决方案。
【9月更文挑战第2天】SLS 虽然不是直接使用 OSS 作为底层存储,但它凭借自身独特的存储架构和功能,为用户提供了一种专业、高效的日志服务解决方案。
63 9
|
2月前
|
存储 监控 Serverless
函数计算发布功能问题之用户在使用主流函数计算产品的日志服务时可能会遇到使用成本的问题如何解决
函数计算发布功能问题之用户在使用主流函数计算产品的日志服务时可能会遇到使用成本的问题如何解决
|
2月前
|
监控 Serverless 开发者
函数计算发布功能问题之查看函数的调用日志的问题如何解决
函数计算发布功能问题之查看函数的调用日志的问题如何解决
|
2月前
|
人工智能 Java Spring
Spring框架下,如何让你的日志管理像‘AI’一样智能,提升开发效率的秘密武器!
【8月更文挑战第31天】日志管理在软件开发中至关重要,不仅能帮助开发者追踪问题和调试程序,还是系统监控和运维的重要工具。在Spring框架下,通过合理配置Logback等日志框架,可大幅提升日志管理效率。本文将介绍如何引入日志框架、配置日志级别、在代码中使用Logger,以及利用ELK等工具进行日志聚合和分析,帮助你构建高效、可靠的日志管理系统,为开发和运维提供支持。
36 0
|
2月前
|
Kubernetes Ubuntu Windows
【Azure K8S | AKS】分享从AKS集群的Node中查看日志的方法(/var/log)
【Azure K8S | AKS】分享从AKS集群的Node中查看日志的方法(/var/log)
|
21天前
|
Java
日志框架log4j打印异常堆栈信息携带traceId,方便接口异常排查
日常项目运行日志,异常栈打印是不带traceId,导致排查问题查找异常栈很麻烦。
|
2月前
|
开发框架 .NET Docker
【Azure 应用服务】App Service .NET Core项目在Program.cs中自定义添加的logger.LogInformation,部署到App Service上后日志不显示Log Stream中的问题
【Azure 应用服务】App Service .NET Core项目在Program.cs中自定义添加的logger.LogInformation,部署到App Service上后日志不显示Log Stream中的问题
|
2月前
|
存储 监控 安全
下一篇
无影云桌面