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

本文涉及的产品
日志服务 SLS,月写入数据量 50GB 1个月
简介: 转载请说明原文出处,谢谢~~             前些日子封装了好几天控件,把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


相关实践学习
日志服务之使用Nginx模式采集日志
本文介绍如何通过日志服务控制台创建Nginx模式的Logtail配置快速采集Nginx日志并进行多维度分析。
目录
相关文章
|
7月前
|
存储 监控 数据库
Django 后端架构开发:高效日志规范与实践
Django 后端架构开发:高效日志规范与实践
160 1
|
5月前
|
Rust 前端开发 JavaScript
Tauri 开发实践 — Tauri 日志记录功能开发
本文介绍了如何为 Tauri 应用配置日志记录。Tauri 是一个利用 Web 技术构建桌面应用的框架。文章详细说明了如何在 Rust 和 JavaScript 代码中设置和集成日志记录,并控制日志输出。通过添加 `log` crate 和 Tauri 日志插件,可以轻松实现多平台日志记录,包括控制台输出、Webview 控制台和日志文件。文章还展示了如何调整日志级别以优化输出内容。配置完成后,日志记录功能将显著提升开发体验和程序稳定性。
221 1
Tauri 开发实践 — Tauri 日志记录功能开发
|
7月前
|
SQL 关系型数据库 MySQL
【MySQL】根据binlog日志获取回滚sql的一个开发思路
【MySQL】根据binlog日志获取回滚sql的一个开发思路
|
4月前
|
监控 开发者
鸿蒙5.0版开发:使用HiLog打印日志(ArkTS)
在HarmonyOS 5.0中,HiLog是系统提供的日志系统,支持DEBUG、INFO、WARN、ERROR、FATAL五种日志级别。本文介绍如何在ArkTS中使用HiLog打印日志,并提供示例代码。通过合理使用HiLog,开发者可以更好地调试和监控应用。
360 16
|
5月前
|
开发工具 git
git显示开发日志+WinSW——将.exe文件注册为服务的一个工具+图床PicGo+kubeconfig 多个集群配置 如何切换
git显示开发日志+WinSW——将.exe文件注册为服务的一个工具+图床PicGo+kubeconfig 多个集群配置 如何切换
68 1
|
5月前
|
开发框架 缓存 安全
开发日志:IIS安全配置
开发日志:IIS安全配置
开发日志:IIS安全配置
|
7月前
|
人工智能 Java Spring
Spring框架下,如何让你的日志管理像‘AI’一样智能,提升开发效率的秘密武器!
【8月更文挑战第31天】日志管理在软件开发中至关重要,不仅能帮助开发者追踪问题和调试程序,还是系统监控和运维的重要工具。在Spring框架下,通过合理配置Logback等日志框架,可大幅提升日志管理效率。本文将介绍如何引入日志框架、配置日志级别、在代码中使用Logger,以及利用ELK等工具进行日志聚合和分析,帮助你构建高效、可靠的日志管理系统,为开发和运维提供支持。
130 0
|
17天前
|
存储 缓存 关系型数据库
图解MySQL【日志】——Redo Log
Redo Log(重做日志)是数据库中用于记录数据页修改的物理日志,确保事务的持久性和一致性。其主要作用包括崩溃恢复、提高性能和保证事务一致性。Redo Log 通过先写日志的方式,在内存中缓存修改操作,并在适当时候刷入磁盘,减少随机写入带来的性能损耗。WAL(Write-Ahead Logging)技术的核心思想是先将修改操作记录到日志文件中,再择机写入磁盘,从而实现高效且安全的数据持久化。Redo Log 的持久化过程涉及 Redo Log Buffer 和不同刷盘时机的控制参数(如 `innodb_flush_log_at_trx_commit`),以平衡性能与数据安全性。
27 5
图解MySQL【日志】——Redo Log
|
4月前
|
XML 安全 Java
【日志框架整合】Slf4j、Log4j、Log4j2、Logback配置模板
本文介绍了Java日志框架的基本概念和使用方法,重点讨论了SLF4J、Log4j、Logback和Log4j2之间的关系及其性能对比。SLF4J作为一个日志抽象层,允许开发者使用统一的日志接口,而Log4j、Logback和Log4j2则是具体的日志实现框架。Log4j2在性能上优于Logback,推荐在新项目中使用。文章还详细说明了如何在Spring Boot项目中配置Log4j2和Logback,以及如何使用Lombok简化日志记录。最后,提供了一些日志配置的最佳实践,包括滚动日志、统一日志格式和提高日志性能的方法。
1140 31
【日志框架整合】Slf4j、Log4j、Log4j2、Logback配置模板
|
3月前
|
监控 安全 Apache
什么是Apache日志?为什么Apache日志分析很重要?
Apache是全球广泛使用的Web服务器软件,支持超过30%的活跃网站。它通过接收和处理HTTP请求,与后端服务器通信,返回响应并记录日志,确保网页请求的快速准确处理。Apache日志分为访问日志和错误日志,对提升用户体验、保障安全及优化性能至关重要。EventLog Analyzer等工具可有效管理和分析这些日志,增强Web服务的安全性和可靠性。