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

本文涉及的产品
日志服务 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日志并进行多维度分析。
目录
相关文章
|
2月前
|
存储 监控 数据库
Django 后端架构开发:高效日志规范与实践
Django 后端架构开发:高效日志规范与实践
46 1
|
2月前
|
SQL 关系型数据库 MySQL
【MySQL】根据binlog日志获取回滚sql的一个开发思路
【MySQL】根据binlog日志获取回滚sql的一个开发思路
|
2月前
|
JSON 中间件 Go
go语言后端开发学习(四) —— 在go项目中使用Zap日志库
本文详细介绍了如何在Go项目中集成并配置Zap日志库。首先通过`go get -u go.uber.org/zap`命令安装Zap,接着展示了`Logger`与`Sugared Logger`两种日志记录器的基本用法。随后深入探讨了Zap的高级配置,包括如何将日志输出至文件、调整时间格式、记录调用者信息以及日志分割等。最后,文章演示了如何在gin框架中集成Zap,通过自定义中间件实现了日志记录和异常恢复功能。通过这些步骤,读者可以掌握Zap在实际项目中的应用与定制方法
go语言后端开发学习(四) —— 在go项目中使用Zap日志库
|
2月前
|
小程序 前端开发 API
微信小程序全栈开发中的异常处理与日志记录是一个重要而复杂的问题。
微信小程序作为业务拓展的新渠道,其全栈开发涉及前端与后端的紧密配合。本文聚焦小程序开发中的异常处理与日志记录,从前端的网络、页面跳转等异常,到后端的数据库、API调用等问题,详述了如何利用try-catch及日志框架进行有效管理。同时强调了集中式日志管理的重要性,并提醒开发者注意安全性、性能及团队协作等方面,以构建稳定可靠的小程序应用。
47 1
|
3月前
|
开发框架 缓存 前端开发
基于SqlSugar的开发框架循序渐进介绍(8)-- 在基类函数封装实现用户操作日志记录
基于SqlSugar的开发框架循序渐进介绍(8)-- 在基类函数封装实现用户操作日志记录
|
2月前
|
人工智能 Java Spring
Spring框架下,如何让你的日志管理像‘AI’一样智能,提升开发效率的秘密武器!
【8月更文挑战第31天】日志管理在软件开发中至关重要,不仅能帮助开发者追踪问题和调试程序,还是系统监控和运维的重要工具。在Spring框架下,通过合理配置Logback等日志框架,可大幅提升日志管理效率。本文将介绍如何引入日志框架、配置日志级别、在代码中使用Logger,以及利用ELK等工具进行日志聚合和分析,帮助你构建高效、可靠的日志管理系统,为开发和运维提供支持。
36 0
|
2月前
|
JavaScript 开发工具
Electron 开发过程中主进程的无法看到 console.log 输出怎么办
Electron 开发过程中主进程的无法看到 console.log 输出怎么办
|
2月前
|
Kubernetes Ubuntu Windows
【Azure K8S | AKS】分享从AKS集群的Node中查看日志的方法(/var/log)
【Azure K8S | AKS】分享从AKS集群的Node中查看日志的方法(/var/log)
|
21天前
|
Java
日志框架log4j打印异常堆栈信息携带traceId,方便接口异常排查
日常项目运行日志,异常栈打印是不带traceId,导致排查问题查找异常栈很麻烦。
|
1月前
|
存储 监控 数据可视化
SLS 虽然不是直接使用 OSS 作为底层存储,但它凭借自身独特的存储架构和功能,为用户提供了一种专业、高效的日志服务解决方案。
【9月更文挑战第2天】SLS 虽然不是直接使用 OSS 作为底层存储,但它凭借自身独特的存储架构和功能,为用户提供了一种专业、高效的日志服务解决方案。
63 9
下一篇
无影云桌面