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

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

前些日子封装了好几天控件，把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

转载于:https://www.cnblogs.com/redrainblog/p/4275836.html

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

仿酷狗音乐播放器开发日志二十三修复Option控件显示状态不全的bug（附源码）...
转载请说明原出处,谢谢~~ 整个仿酷狗工程的开发将近尾声,现在还差选项设置窗体的部分,显然在设置窗体里用的最多的就是OptionUI控件,我在写好大致的布局后去测试效果,发现Option控件的显示效果 ...
仿酷狗音乐播放器开发日志十四——右侧乐库的实现
在使用酷狗播放器时,左侧功能块和右侧乐库功能是最常用的了,如果要下载音乐或者搜索自己喜欢的歌曲那就少不了右侧乐库.原版的乐库的截图如下他拥有5个分类,分别是乐库.电台.MV.直播.歌词.从外 ...
仿酷狗音乐播放器开发日志十八——换肤功能的实现二：改变控件和窗体透明度（附挂件类源码）...
转载请说明原出处,谢谢~~ 昨天把大致布局分析了一下,昨天晚上把布局写好实现了,今天把大致的功能完成了一下,现在的外观已经和原酷狗的换肤界面完全一样,其中的调整播放列表透明度和设置整个软件透明度的代码 ...
仿酷狗音乐播放器开发日志十八——换肤功能的实现二：改变控件和窗体透明度（附挂件类源码）
转载请说明原出处,谢谢~~ 昨天把大致布局分析了一下,昨天晚上把布局写好实现了,今天把大致的功能完成了一下,现在的外观已经和原酷狗的换肤界面完全一样,其中的调整播放列表透明度和设置整个软件透明度的代码 ...
仿酷狗音乐播放器开发日志二十二动态调色板控件第二版（性能大幅提升附源码）...
转载请说明原出处,谢谢~~ 在上次写的博客<仿酷狗音乐播放器开发日志二十一开发动态调色板控件(附源码)>发布后,我在群里和网友讨论这个控件的性能和优缺点,发现了他很多不足,还有很多提升 ...
仿酷狗音乐播放器开发日志二十一开发动态调色板控件（附源码）
转载请说明原出处,谢谢~~ 上一篇仿酷狗日志结束后,整个换肤功能就只剩下调色板功能没有做了,我本以为会很简单,但是研究了酷狗的调色板功能后发现不是那么简单的事情.首先看一下酷狗的调色板的样子: 我原本 ...
仿酷狗音乐播放器开发日志二十一开发动态调色板控件（附源代码）
转载请说明原出处,谢谢~~ 上一篇仿酷狗日志结束后,整个换肤功能就仅仅剩下调色板功能没有做了.我本以为会非常easy.可是研究了酷狗的调色板功能后发现不是那么简单的事情.首先看一下酷狗的调色板的样子: ...
仿酷狗音乐播放器开发日志——整体框架分析
转载请说明出处,谢谢~~ 学习duilib界面库有一段时间了,除了仓鼠软件共享以外还没用它开发过什么完整的软件项目.今天看到酷狗音乐播放器做得不错,经过几年的改革,酷狗现在的UI已经相当不错了.在这个 ...
仿酷狗音乐播放器开发日志二十四选项设置窗体的实现（附328行xml布局源码）
转载请说明原出处,谢谢~~ 花了两天时间把仿酷狗的选项设置窗体做出来了,当然了只是做了外观.现在开学了,写代码的时间减少,所以整个仿酷狗的工程开发速度减慢了.今天把仿酷狗的选项设置窗体的布局代码分享出 ...

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

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

最新文章

热门文章