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

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

 

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