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=&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~