duilib进阶教程 -- TreeView控件(6)
代码下载：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='skin\btn_play_mode.png' source='0,0,18,18'" hotimage="file='skin\btn_play_mode.png' source='19,0,37,18'" pushedimage="file='skin\btn_play_mode.png' source='38,0,56,18'" /> <Button name="btnAdd" float="true" pos="174,12,0,0" width="18" height="18" textcolor="#FF000000" disabledtextcolor="#FFA7A6AA" align="center" normalimage="file='skin\btn_add.png' source='0,0,18,18'" hotimage="file='skin\btn_add.png' source='19,0,37,18'" pushedimage="file='skin\btn_add.png' source='38,0,56,18'" /> <Button name="btnDelete" float="true" pos="195,12,0,0" width="18" height="18" textcolor="#FF000000" disabledtextcolor="#FFA7A6AA" align="center" normalimage="file='skin\btn_delete.png' source='0,0,18,18'" hotimage="file='skin\btn_delete.png' source='19,0,37,18'" pushedimage="file='skin\btn_delete.png' source='38,0,56,18'" /> </TreeNode> <TreeNode text="迅雷下载" height="22" textcolor="#FFC8C6CB" folderattr="padding="0,4,0,0" width="14" height="14" normalimage="file='skin/treeview_expand.png' source='0,0,14,14' " selectedimage="file='skin/treeview_expand.png' source='0,24,14,38' ""> <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="0,4,0,0" width="14" height="14" normalimage="file='skin/treeview_expand.png' source='0,0,14,14' " selectedimage="file='skin/treeview_expand.png' source='0,24,14,38' ""> <TreeNode text="八公" /> <TreeNode text="HACHI" /> </TreeNode> <TreeNode text="热点新闻" height="22" textcolor="#FFC8C6CB" folderattr="padding="0,4,0,0" width="14" height="14" normalimage="file='skin/treeview_expand.png' source='0,0,14,14' " selectedimage="file='skin/treeview_expand.png' source='0,24,14,38' ""> <TreeNode text="八公" /> <TreeNode text="HACHI" /> </TreeNode> </TreeNode> <TreeNode text="娱乐中心" height="33" bkimage="skin/treeview_header.png" > <TreeNode text="短视频广场" height="22" textcolor="#FFC8C6CB" folderattr="padding="0,4,0,0" width="14" height="14" normalimage="file='skin/treeview_expand.png' source='0,0,14,14' " selectedimage="file='skin/treeview_expand.png' source='0,24,14,38' ""> <TreeNode text="热门视频" /> <TreeNode text="美女视频" /> </TreeNode> <TreeNode text="直播频道" /> </TreeNode> </TreeView>
需要说明的是，TreeView控件的Bug很多，而且很多属性都无效，比如itemfont、itemalign等等，这个将在下一节介绍，现在主界面和迅雷一模一样，播放列表也看起来差不多啦，离成功不远啦~O(∩_∩)O~
