代码下载: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. 分布式队列ZooKeeper的实现

    一.背景 有一些时候,多个团队需要共同完成一个任务,比如,A团队将Hadoop集群计算的结果交给B团队继续计算,B完成了自己任务再交给C团队继续做.这就有点像业务系统的工作流一样,一环一环地传下 去, ...

  2. JDBC(5)—DatabaseMetaData

    1.简介: 使用元数据已实现通用的查询方法.元数据介绍:使用jdbc获得连接之后,得到一个Connection对象,可以通过这个对象获得DataBaseMetaData对象,该对象可以获得有关数据库管 ...

  3. 怎样使用ZOL一键安装器下载中关村在线的源安装包

    怎样使用ZOL一键安装器下载中关村在线的源安装包 马根峰               (广东联合电子服务股份有限公司, 广州 510300) 摘要    中关村在线近期開始推出ZOL一键安装器,用户直 ...

  4. 详解Paint的setColorFilter(ColorFilter filter)

    一.简介 setColorFilter(ColorFilter filter) 设置颜色过滤,这个方法需要我们传入一个ColorFilter参数同样也会返回一个ColorFilter实例.我们在set ...

  5. Js 判断浏览器类型整理

    判断原理 JavaScript是前端开发的主要语言,我们可以通过 编写JavaScript程序来判断浏览器的类型及版本.JavaScript判断浏览器类型一般有两种办法,一种是根据各种浏览器独有的属性 ...

  6. Go语言之高级篇beego框架之model设计构造查询

    一.model设计构造查询 QueryBuilder 提供了一个简便,流畅的 SQL 查询构造器.在不影响代码可读性的前提下用来快速的建立 SQL 语句. QueryBuilder 在功能上与 ORM ...

  7. 如何在 Github 上发现优秀的开源项目?

    之前发过一系列有关 GitHub 的文章,有同学问了,GitHub 我大概了解了,Git 也差不多会使用了,但是还是搞不清 GitHub 如何帮助我的工作,怎么提升我的工作效率? 问到点子上了,Git ...

  8. Seaslog安装和参数配置

    详细文档访问:https://github.com/Neeke/SeasLog/blob/master/README_zh.md 源码安装步骤: 1.先下载Seaslog源码,下载地址:http:// ...

  9. Windows安装Flask Traceback (most recent call last):

    Exception: File "c:\users\appdata\local\programs\python\python36-32\lib\site-packages\pip\compa ...

  10. MySQL-8.0.x 新特性之索引页合并

    [背景] 索引的重要是在些不表.在这里我想说的另一个问题:索引和数据一样在innodb中都是以page的形式来组织的,那么问题就来了. 比如果说索引 ix_person_name 的内容只要8个页面就 ...