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

简介: 转载请说明原文出处,谢谢~~             前些日子封装了好几天控件,把webkit浏览器控件,vlc视频播放控件,音频播放控件做好了,做这些控件一来是可以单独使用,用到其他项目中,而来可以直接用到这个仿酷狗播放器项目中,后期把他们结合起来就是个完整播放器了。

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

 

          前些日子封装了好几天控件,把webkit浏览器控件,vlc视频播放控件,音频播放控件做好了,做这些控件一来是可以单独使用,用到其他项目中,而来可以直接用到这个仿酷狗播放器项目中,后期把他们结合起来就是个完整播放器了。

          今天就继续前段时间的工作,继续完善仿酷狗的界面。前面的文章里已经把左侧的各个列表的外观做好了,尤其是做好了播放器列表,不过今天发现,音乐电台列表中的电台项目也是个比较复杂的控件,所以今天就把他做出来。

          虽然复杂,但是有前面的做音乐播放列表的基础,做这个就简单多了,有很多代码可以复用。


外观分析

          首先来看看原酷狗的音乐电台的外观。

          

          其中的每一个子项也是分为三种状态,普通状态下

          

          这只是个简单的横向布局,一个logo,两端文字和一个小标志图片。

          Hot和Down状态下

           

           在普通状态下,整体颜色略微加深,右侧出现了两个控制按钮,也就是在原来的基础上增加一个横向布局

          双击状态下

           

          这个状态下的子项目相比之下就复杂多了,大致的布局如下

           

          把他划分为块,从里到外一块一块做就行,我直接拿我做音乐列表项目的子控件的布局来修改一份,在布局里面要写出这三种

下的布局代码,然后我们只要在c++代码中根据控件收到的事件来动态修改控件的布局的高度和隐藏不隐藏就可以了。

         我写duilib的xml布局几乎不用float属性的绝对布局,而是用控制边距达到微调的效果,不过有例外的时候,写这个控件的hot状态的右上角的小关闭按钮我是用了float属性,因为不至于为了他而去额外使用一个布局。


代码实现

       我直接拿来原来的CMusicItemUI控件,做稍微的修改就可以了,音乐电台项目的hot状态和音乐列表的hot状态不一样,自习观察可以看到音乐列表在hot状态下外层有一个边框,而电台没有,如图

         

        另外电台的每个项目之间有一道灰色的横线分割,这个功能List控件自带了,设置分割线颜色就可以了。

        再专门为电台项目写一个RadioListItemInfo结构体来保存他的各种信息(电台名字,收听人数等)

struct RadioListItemInfo
{
	CDuiString logo;
	CDuiString logo_small;
	CDuiString music_name;
	CDuiString radio_name;
	CDuiString audience_num;
};

       然后再CMusicListUI控件   增加一个AddRadio函数,让他根据传入的RadioListItemInfo结构体,动态的根据音乐电台控件的xml文件构建电台控件,增加到电台列表里,这些代码和分析已经在做播放列表的文章里说过了,我就不再赘述了,最后把效果图贴一下,包含三种状态的控件。

          


         2014.8.1  14:30  Redrain


相关实践学习
【涂鸦即艺术】基于云应用开发平台CAP部署AI实时生图绘板
【涂鸦即艺术】基于云应用开发平台CAP部署AI实时生图绘板
目录
相关文章
|
存储 监控 数据库
Django 后端架构开发:高效日志规范与实践
Django 后端架构开发:高效日志规范与实践
463 1
|
Rust 前端开发 JavaScript
Tauri 开发实践 — Tauri 日志记录功能开发
本文介绍了如何为 Tauri 应用配置日志记录。Tauri 是一个利用 Web 技术构建桌面应用的框架。文章详细说明了如何在 Rust 和 JavaScript 代码中设置和集成日志记录,并控制日志输出。通过添加 `log` crate 和 Tauri 日志插件,可以轻松实现多平台日志记录,包括控制台输出、Webview 控制台和日志文件。文章还展示了如何调整日志级别以优化输出内容。配置完成后,日志记录功能将显著提升开发体验和程序稳定性。
1043 1
Tauri 开发实践 — Tauri 日志记录功能开发
|
前端开发 JavaScript 程序员
鸿蒙开发:console日志输出
针对初学者而言,大家只需要掌握住日志打印即可,等到了鸿蒙应用开发的时候,还有一个鸿蒙原生的打印工具HiLog,到时,我们也会详细的去讲述,也会针对HiLog,封装一个通用的工具类。
476 11
鸿蒙开发:console日志输出
|
监控 开发者
鸿蒙5.0版开发:使用HiLog打印日志(ArkTS)
在HarmonyOS 5.0中,HiLog是系统提供的日志系统,支持DEBUG、INFO、WARN、ERROR、FATAL五种日志级别。本文介绍如何在ArkTS中使用HiLog打印日志,并提供示例代码。通过合理使用HiLog,开发者可以更好地调试和监控应用。
1028 16
|
开发工具 git
git显示开发日志+WinSW——将.exe文件注册为服务的一个工具+图床PicGo+kubeconfig 多个集群配置 如何切换
git显示开发日志+WinSW——将.exe文件注册为服务的一个工具+图床PicGo+kubeconfig 多个集群配置 如何切换
334 1
|
开发框架 缓存 安全
开发日志:IIS安全配置
开发日志:IIS安全配置
开发日志:IIS安全配置
|
人工智能 Java Spring
Spring框架下,如何让你的日志管理像‘AI’一样智能,提升开发效率的秘密武器!
【8月更文挑战第31天】日志管理在软件开发中至关重要,不仅能帮助开发者追踪问题和调试程序,还是系统监控和运维的重要工具。在Spring框架下,通过合理配置Logback等日志框架,可大幅提升日志管理效率。本文将介绍如何引入日志框架、配置日志级别、在代码中使用Logger,以及利用ELK等工具进行日志聚合和分析,帮助你构建高效、可靠的日志管理系统,为开发和运维提供支持。
425 0
|
监控 安全 Apache
什么是Apache日志?为什么Apache日志分析很重要?
Apache是全球广泛使用的Web服务器软件,支持超过30%的活跃网站。它通过接收和处理HTTP请求,与后端服务器通信,返回响应并记录日志,确保网页请求的快速准确处理。Apache日志分为访问日志和错误日志,对提升用户体验、保障安全及优化性能至关重要。EventLog Analyzer等工具可有效管理和分析这些日志,增强Web服务的安全性和可靠性。
545 9
|
11月前
|
监控 容灾 算法
阿里云 SLS 多云日志接入最佳实践:链路、成本与高可用性优化
本文探讨了如何高效、经济且可靠地将海外应用与基础设施日志统一采集至阿里云日志服务(SLS),解决全球化业务扩展中的关键挑战。重点介绍了高性能日志采集Agent(iLogtail/LoongCollector)在海外场景的应用,推荐使用LoongCollector以获得更优的稳定性和网络容错能力。同时分析了多种网络接入方案,包括公网直连、全球加速优化、阿里云内网及专线/CEN/VPN接入等,并提供了成本优化策略和多目标发送配置指导,帮助企业构建稳定、低成本、高可用的全球日志系统。
1093 54