代码下载:http://download.csdn.net/detail/qq316293804/6483905

  上一个教程中,界面已经和迅雷一模一样啦,大小和位置一个像素都不差哟,亏得Alberl调了好久,不过既然决定要山寨了,那当然得学习下华强北~O(∩_∩)O~

  那么现在只剩下播放列表和四个网页啦,那四个网页很简单,用ActiveX控件和Tab控件就搞定了,具体参见《2013 duilib入门简明教程 -- 复杂控件介绍 (13)》,那么接下来就来介绍播放列表的实现。

  看到播放列表,小伙伴们可能有各种实现方式:

  1、用3个Tab控件,每个Tab控件里放一个List控件,不过这里用Tab控件很不方便,因为点击其中一个Tab时,要对另外两个Tab进行展开、折叠。

  2、全部用List实现,可以看到duilib的QQDemo和GameDemo,都是全部用List实现的。不过这种方法要自己写很多很多代码,而且还要非常熟悉List,还要非常熟悉duilib。大神们不是已经写好了么,我们拿来用就行了呗。虽然大神们实现了QQDemo和GameDemo,但是可以看到那两个自己扩展的List都是不通用的,所以如果用那两个扩展List来实现这个播放列表,肯定也要做很多工作。因此也不采用这种方法。

  3、全部用TreeView控件实现,这个有一个TestApp1的Demo,初步看起来还不错,和我们要做的播放列表很接近哦,展开折叠神马的都有。因此就采用这种方法啦。

  一、TreeView简单用法:

<TreeView bkcolor="#ff00ff00" >
<TreeNode text="A1" />
<TreeNode text="B1" >
<TreeNode text="B2" />
</TreeNode>
</ TreeView>

  这样就能显示三个节点啦。

  二、TreeView复杂用法:

  由于前面有了很详细的入门教程,因此进阶教程不再重复介绍,这里直接给出迅雷播放列表的代码:

            <TreeView name="treePlaylist" padding="4,0,2,0" itemtextcolor="#FFC8C6CB" itemhottextcolor="#FFC8C6CB" selitemtextcolor="#FFC8C6CB" itemhotbkcolor="#FF1B1B1B" itemselectedbkcolor="#FF151C2C" vscrollbar="true" >
<TreeNode text="播放列表" height="33" bkimage="skin/treeview_header.png">
<TreeNode height="40">
<Combo name="comboPlaylist" float="true" pos="15,10,0,0" width="50" height="20" dropboxsize="63,63" itemtextcolor="#FFC8C6CB" itemselectedtextcolor="#FFC8C6CB" itemhottextcolor="#FFC8C6CB" itembkcolor="#FF2E2E2E" itemselectedbkcolor="#FF2E2E2E" itemhotbkcolor="#FF191919" normalimage="file='skin/combo_right.png' source='0,0,20,20' dest='22,0,42,20' " hotimage="file='skin/combo_right.png' source='21,0,41,20' dest='22,0,42,20' " pushedimage="file='skin/combo_right.png' source='42,0,82,20' dest='22,0,42,20' " >
<ListLabelElement text="全部"/>
<ListLabelElement text="在线"/>
<ListLabelElement text="本地" selected="true" />
</Combo>
<Button name="btnPlayMode" float="true" pos="153,12,0,0" width="18" height="18" textcolor="#FF000000" disabledtextcolor="#FFA7A6AA" align="center" normalimage="file=&apos;skin\btn_play_mode.png&apos; source=&apos;0,0,18,18&apos;" hotimage="file=&apos;skin\btn_play_mode.png&apos; source=&apos;19,0,37,18&apos;" pushedimage="file=&apos;skin\btn_play_mode.png&apos; source=&apos;38,0,56,18&apos;" />
<Button name="btnAdd" float="true" pos="174,12,0,0" width="18" height="18" textcolor="#FF000000" disabledtextcolor="#FFA7A6AA" align="center" normalimage="file=&apos;skin\btn_add.png&apos; source=&apos;0,0,18,18&apos;" hotimage="file=&apos;skin\btn_add.png&apos; source=&apos;19,0,37,18&apos;" pushedimage="file=&apos;skin\btn_add.png&apos; source=&apos;38,0,56,18&apos;" />
<Button name="btnDelete" float="true" pos="195,12,0,0" width="18" height="18" textcolor="#FF000000" disabledtextcolor="#FFA7A6AA" align="center" normalimage="file=&apos;skin\btn_delete.png&apos; source=&apos;0,0,18,18&apos;" hotimage="file=&apos;skin\btn_delete.png&apos; source=&apos;19,0,37,18&apos;" pushedimage="file=&apos;skin\btn_delete.png&apos; source=&apos;38,0,56,18&apos;" />
</TreeNode>
<TreeNode text="迅雷下载" height="22" textcolor="#FFC8C6CB" folderattr="padding=&quot;0,4,0,0&quot; width=&quot;14&quot; height=&quot;14&quot; normalimage=&quot;file='skin/treeview_expand.png' source='0,0,14,14' &quot; selectedimage=&quot;file='skin/treeview_expand.png' source='0,24,14,38' &quot;">
<TreeNode text="下载1" />
<TreeNode text="下载2" />
</TreeNode>
</TreeNode>
<TreeNode text="在线媒体" height="33" bkimage="skin/treeview_header.png" >
<TreeNode text="今日热播" height="22" textcolor="#FFC8C6CB" folderattr="padding=&quot;0,4,0,0&quot; width=&quot;14&quot; height=&quot;14&quot; normalimage=&quot;file='skin/treeview_expand.png' source='0,0,14,14' &quot; selectedimage=&quot;file='skin/treeview_expand.png' source='0,24,14,38' &quot;">
<TreeNode text="八公" />
<TreeNode text="HACHI" />
</TreeNode>
<TreeNode text="热点新闻" height="22" textcolor="#FFC8C6CB" folderattr="padding=&quot;0,4,0,0&quot; width=&quot;14&quot; height=&quot;14&quot; normalimage=&quot;file='skin/treeview_expand.png' source='0,0,14,14' &quot; selectedimage=&quot;file='skin/treeview_expand.png' source='0,24,14,38' &quot;">
<TreeNode text="八公" />
<TreeNode text="HACHI" />
</TreeNode>
</TreeNode>
<TreeNode text="娱乐中心" height="33" bkimage="skin/treeview_header.png" >
<TreeNode text="短视频广场" height="22" textcolor="#FFC8C6CB" folderattr="padding=&quot;0,4,0,0&quot; width=&quot;14&quot; height=&quot;14&quot; normalimage=&quot;file='skin/treeview_expand.png' source='0,0,14,14' &quot; selectedimage=&quot;file='skin/treeview_expand.png' source='0,24,14,38' &quot;">
<TreeNode text="热门视频" />
<TreeNode text="美女视频" />
</TreeNode>
<TreeNode text="直播频道" />
</TreeNode>
</TreeView>

  需要说明的是,TreeView控件的Bug很多,而且很多属性都无效,比如itemfont、itemalign等等,这个将在下一节介绍,现在主界面和迅雷一模一样,播放列表也看起来差不多啦,离成功不远啦~O(∩_∩)O~

duilib进阶教程 -- TreeView控件(6)的更多相关文章

  1. duilib进阶教程 -- TreeView控件的不足 (7)

    上一个教程中,虽然播放列表的框架和迅雷一样了,但是字体大小.文字居中还没有解决.如果是刚学duilib,搞定这个可不容易,因为在有了入门教程的指导后,很容易就想到去看[属性列表.XML],但是当你试了 ...

  2. duilib进阶教程 -- TreeView控件的bug (9)

    一.不自动调整子控件的宽度(TreeView宽度小于260时) 相信亲们用同样的代码,显示效果肯定和Alberl不一样吧~O(∩_∩)O~ 嘿嘿,仔细对比下,看看你们的列表头背景图片是下面这样的么? ...

  3. duilib进阶教程 -- Container控件的bug (14)

    在<duilib进阶教程 -- TreeView控件的bug (9)>里,Alberl发现了两个bug,并解决了其中一个,现在教程已经接近尾声啦,所以Alberl就解决了另外一个bug. ...

  4. duilib进阶教程 -- 各种控件的响应 (10)

    到上一个教程为止,界面显示的代码就都介绍完啦,现在开始介绍控件的响应,其实在<2013 duilib入门简明教程 -- 事件处理和消息响应 (17)>里已经列出了duilib自己定义的所有 ...

  5. duilib进阶教程 -- Label控件的bug (8)

    上个教程说到了TreeView的文字不能垂直居中的问题,而我们用LabelUI其实是可以垂直居中的,为什么不说是TreeView的bug,而说是Label控件的bug呢?因为影响TreeView垂直居 ...

  6. duilib进阶教程 -- Container控件 (3)

    前面两个教程的目的是教大家与MFC结合,那么从这篇起,将不再使用MFC,而使用纯win32项目,本文的所有知识已经在<duilib入门教程>里面讲过了,因此基础知识不再赘述. 代码下载:h ...

  7. 【ASP.NET 进阶】TreeView控件学习

    这几天上班没事做,也不好打酱油,学点没接触过的新东西吧,基本了解了下TreeView控件. TreeView 控件用于在树结构中显示分层数据,例如目录或文件目录等. 下面看代码吧: 1.效果图 2.静 ...

  8. 百度地图Api进阶教程-默认控件和自定义控件2.html

    <!DOCTYPE html> <html> <head> <meta name="viewport" content="ini ...

  9. duilib进阶教程 -- 总结 (17)

    整个教程的代码下载:http://download.csdn.net/detail/qq316293804/6502207 (由于duilib进阶教程主要介绍界面,所以这个教程只给出界面相关的代码,完 ...

随机推荐

  1. 实现Qemu aarch32虚拟开发板ping www.baidu.com

    环境 Qemu: 2.8.0 开发板: vexpress-ca9 概述 如果要玩物联网,至少应该让开发板实现联网,让qemu支持联网在之前的博文中已经有介绍了,但是如果只能在自己的局域网内玩耍就太没意 ...

  2. C#高级编程----反射的小结

    C#反射的应用小结 1.何谓反射? 反射就是在运行的时候发现对象的相关信息.根据这些信息可以动态的执行对象的方法以及获取对象的属性所存储的值.使用.NET编写的代码时自动反射的,或者说是自我描述的.之 ...

  3. [CGAL]带岛多边形三角化

    CGAL带岛多边形三角化,并输出(*.ply)格式的模型 模型输出的关键是节点和索引 #include <CGAL/Triangulation_vertex_base_with_id_2.h&g ...

  4. MySQL到底能支持多大的数据量?

    MySQL是中小型网站普遍使用的数据库之一,然而,很多人并不清楚MySQL到底能支持多大的数据量,再加上某些国内CMS厂商把数据承载量的责任推给它,导致很多不了解MySQL的站长对它产生了很多误解,那 ...

  5. Java并发编程系列之三十二:丢失的信号

    这里的丢失的信号是指线程必须等待一个已经为真的条件,在開始等待之前没有检查等待条件.这样的场景事实上挺好理解,假设一边烧水,一边看电视,那么在水烧开的时候.由于太投入而没有注意到水被烧开. 丢失的信号 ...

  6. 部分Linux时区改为东八区的方法

    直接上命令 CentOS: timedatectl set-timezone Asia/Shanghai timedatectl status date Alphine: apk add tzdata ...

  7. settings.xml配置详解

    简单值 一半顶层settings元素是简单值,它们表示的一系列值可以配置Maven的核心行为:settings.xml中的简单顶层元素 < settings xmlns="http:/ ...

  8. iOS蓝色和黄色文件夹新建方式区别(区别之前)

    关于这个问题,好像xcode9之前还是多少来着,创建方式是这样: 1.New Group创建的黄色文件夹是“假”文件夹,也就是说 show in finder 是看不到的 解释:这个文件夹并不是真正的 ...

  9. LaTeX :font size 修改字体大小的几种方式

    调整字体大小的几种方式,大小依次增大,具体如下: \tiny \scriptsize \footnotesize \small \normalsize \large \Large \LARGE \hu ...

  10. awk学习[参考转载]

    一.基本示例 1.last -n 5 | awk '{print $1}'   $0代表全部 2.last -n 5 | awk -F:  '{print $1}'    -F代表设置分割符, :代表 ...