duilib进阶教程 -- TreeView控件的不足 (7)
上一个教程中,虽然播放列表的框架和迅雷一样了,但是字体大小、文字居中还没有解决。如果是刚学duilib,搞定这个可不容易,因为在有了入门教程的指导后,很容易就想到去看【属性列表.XML】,但是当你试了一圈之后,发现font、itemfont、align、itemalign等等,都没有效果!
这个时候就只有去看duilib内部的代码了,和上个教程一样,虽然小伙伴们花一个晚上或者几个晚上就能搞出来,但一样没什么含金量,纯体力活,所以Alberl在这里告知一下小伙伴,省得重复掉坑。
虽然CTreeViewUI继承于CListUI,但是其font、itemfont、align、itemalign等属性并不生效,因为TreeView是由TreeNode组成,但写这个类的大神并没有将TreeView的item属性应用到TreeNode中,所以大部分属性需要到TreeNode里设置,而CTreeNodeUI 继承于CListContainerElementUI,是不是和List同一个结构呢~ 但由于TreeView比较复杂,而完善TreeView对大神们也是体力活,没有含金量,最重要的是,天朝的开源状况已经让大神们心都凉了,Alberl在写这些教程的时候,看到有些回复和聊天记录也有些心凉了,刚入门的码农不了解开源状况就不计较了,但是有些工作两三年甚至更久的,好吧,也不计较了。。。
嗯,TreeView不完善的原因也说明了,那么在这个不完善的基础上,可用性还是很不错的,至少一下子就搞出了迅雷那样的播放列表,只是细节问题需要花点时间而已,而Alberl已经花了这个时间了,就为后面的小伙伴们节省下时间吧。
CTreeNodeUI 主要由CCheckBoxUI、CLabelUI、COptionUI等控件组成,要调整文字的话,就要设置COptionUI(注意:不是CLabelUI)的属性了,而此COptionUI的属性通过设置itemattr生效,<TreeNode itemattr="align="center" font="4"" />即代表TreeNode的文字居中,且字体序号是4,这样就可以看到字体加粗了,不过可以发现文字只是水平居中,并没有垂直居中,这也是duilib的一个bug,后面教程将会给出解决方案。
如果要设置展开与折叠图标,就要设置folderattr属性,这个在duilib的TestApp1里已经有例子了,而本节最后也会给出完整代码,因此就不介绍了,不过需要说明的是,并不是每个节点都需要显示图标,虽然不设置folderattr属性就不会显示图标,但是你会发现,当我们双击节点的时候,会显示一个色块,也就是在图标的位置,这是因为虽然没显示图标,但其实CCheckBoxUI还是显示了的,这时我们需要隐藏这个CCheckBoxUI,怎么办呢? 你会发现<TreeNode folderattr ="visible="false"" />是无法解决这个问题的,因为在读取了XML的属性之后,Treeview还自行设置了visible属性,这也算是一个bug,但是在不改代码的前提下,我们也是有解决方案的,在Treeview里加上visiblefolderbtn属性,<Treeview visiblefolderbtn="false" />就隐藏了折叠按钮,这时再双击,就不会出现色块了。
但是呢,这样就让所有的折叠按钮都隐藏了,而我们又需要显示某些节点的折叠按钮,这个时候我们加上<TreeNode folderattr ="visible="true"" />,会发现也是无效的,嗯,这就是TreeView的bug,看来不能用visiblefolderbtn属性,Alberl的解决方法是,将折叠按钮的宽度设置为0,即<TreeNode folderattr ="width="0" float="true"" />,这样就可以完美隐藏折叠按钮啦。 由于我们有很多个节点都需要同样的设置,那咱们来设置一下Default属性呗~O(∩_∩)O~
不好意思,Treeview的folderattr 等属性好像在Default设置不了,因为Default属性是用value=""来设置了,这就决定了里面最多能套一层双引号,如果我们这样设置
<Default name="TreeView" value=" folderattr ="width="0" float="true"" ">,那么duilib并不能解析出来,因为他的逻辑是于下一个双引号匹配,虽然改逻辑可以解决这个问题,但是不建议这样做,我们可以用{}等符号代替,既方便又安全。但是Alberl只是个入门者而已,必然不建议去改代码,因此只能在每个节点都加上folderattr 属性啦。
到这里,我们就实现了和迅雷一样的播放列表啦,包括字体大小,文字居中等等。
![](http://images0.cnblogs.com/blog/570549/201311/01172719-b899d55687e14a5d83667b2c55998325.png)
完整XML如下(这里只需要将XML替换到上一个教程中即可,因此不再给出代码下载):
<TreeView name="treePlaylist" childpadding="4" multipleitem="true" inset="4,0,3,0" bordersize="1" bordercolor="#FF2B2B2B" itemtextcolor="#FFC8C6CB" itemhottextcolor="#FFC8C6CB" selitemtextcolor="#FFC8C6CB" itemhotbkcolor="#FF1B1B1B" itemselectedbkcolor="#FF151C2C" vscrollbar="true" hscrollbar="true" > <TreeNode name="nodePlaylist" text="播放列表" height="33" bkimage="treeview_header.png" itemattr="valign="vcenter" font="1" textpadding="12,0,0,0"" folderattr="width="0" float="true""> <TreeNode height="34" folderattr="width="0" float="true""> <Combo name="comboPlaylist" float="true" pos="12,7,0,0" valign="vcenter" width="70" height="20" dropboxsize="63,63" itemfont="0" itemtextcolor="#FFC8C6CB" itemselectedtextcolor="#FFC8C6CB" itemhottextcolor="#FFC8C6CB" itembkcolor="#FF2E2E2E" itemselectedbkcolor="#FF2E2E2E" itemhotbkcolor="#FF191919" normalimage="file='combo_right.png' source='0,0,20,20' dest='27,0,47,20' " hotimage="file='combo_right.png' source='21,0,41,20' dest='27,0,47,20' "> <ListLabelElement text="全部" font="0"/> <ListLabelElement text="在线" font="0"/> <ListLabelElement text="本地" font="0" selected="true" /> </Combo> <VerticalLayout width="65"> <Button name="btnPlayMode" tooltip="播放模式" float="true" pos="0,8,0,0" width="18" height="18" textcolor="#FF000000" disabledtextcolor="#FFA7A6AA" align="center" normalimage="file='btn_play_mode.png' source='0,0,18,18'" hotimage="file='btn_play_mode.png' source='19,0,37,18'" pushedimage="file='btn_play_mode.png' source='38,0,56,18'" /> <Button name="btnAdd" float="true" pos="21,8,0,0" width="18" height="18" textcolor="#FF000000" disabledtextcolor="#FFA7A6AA" align="center" normalimage="file='btn_add.png' source='0,0,18,18'" hotimage="file='btn_add.png' source='19,0,37,18'" pushedimage="file='btn_add.png' source='38,0,56,18'" /> <Button name="btnDelete" float="true" pos="42,8,0,0" width="18" height="18" textcolor="#FF000000" disabledtextcolor="#FFA7A6AA" align="center" normalimage="file='btn_delete.png' source='0,0,18,18'" hotimage="file='btn_delete.png' source='19,0,37,18'" pushedimage="file='btn_delete.png' source='38,0,56,18'" /> </VerticalLayout> </TreeNode> <TreeNode text="迅雷下载" inset="-8,0,0,0" height="22" itemattr="valign="vcenter" font="0" textpadding="4,0,0,0"" folderattr="padding="0,5,0,0" width="12" height="12" selectedimage="file='treeview_expand.png' source='0,0,12,12' " normalimage="file='treeview_expand.png' source='13,0,25,12' ""> <TreeNode text="下载1" height="22" inset="7,0,0,0" itemattr="valign="vcenter" font="4"" folderattr="width="0" float="true""/> <TreeNode text="下载2" height="22" inset="7,0,0,0" itemattr="valign="vcenter" font="4"" folderattr="width="0" float="true""/> </TreeNode> </TreeNode> <TreeNode text="在线媒体" height="33" bkimage="treeview_header.png" itemattr="valign="vcenter" font="1" textpadding="12,0,0,0"" folderattr="width="0" float="true""> <TreeNode text="今日热播" inset="-8,0,0,0" height="22" itemattr="valign="vcenter" font="0" textpadding="4,0,0,0"" folderattr="padding="0,5,0,0" width="12" height="12" selectedimage="file='treeview_expand.png' source='0,0,12,12' " normalimage="file='treeview_expand.png' source='13,0,25,12' ""> <TreeNode text="八公" height="22" inset="7,0,0,0" itemattr="valign="vcenter" font="4"" folderattr="width="0" float="true""/> <TreeNode text="HACHI" height="22" inset="7,0,0,0" itemattr="valign="vcenter" font="4"" folderattr="width="0" float="true""/> </TreeNode> <TreeNode text="热点新闻" inset="-8,0,0,0" height="22" itemattr="valign="vcenter" font="0" textpadding="4,0,0,0"" folderattr="padding="0,5,0,0" width="12" height="12" selectedimage="file='treeview_expand.png' source='0,0,12,12' " normalimage="file='treeview_expand.png' source='13,0,25,12' ""> <TreeNode text="八公" height="22" inset="7,0,0,0" itemattr="valign="vcenter" font="4"" folderattr="width="0" float="true""/> <TreeNode text="HACHI" height="22" inset="7,0,0,0" itemattr="valign="vcenter" font="4"" folderattr="width="0" float="true""/> </TreeNode> </TreeNode> <TreeNode text="娱乐中心" height="33" bkimage="treeview_header.png" itemattr="valign="vcenter" font="1" textpadding="12,0,0,0"" folderattr="width="0" float="true""> <TreeNode text="短视频广场" inset="-8,0,0,0" height="22" itemattr="valign="vcenter" font="0" textpadding="4,0,0,0"" folderattr="padding="0,5,0,0" width="12" height="12" selectedimage="file='treeview_expand.png' source='0,0,12,12' " normalimage="file='treeview_expand.png' source='13,0,25,12' ""> <TreeNode text="热门视频" height="22" inset="7,0,0,0" itemattr="valign="vcenter" font="4"" folderattr="width="0" float="true""/> <TreeNode text="美女视频" height="22" inset="7,0,0,0" itemattr="valign="vcenter" font="4"" folderattr="width="0" float="true""/> </TreeNode> <TreeNode text="直播频道" height="22" inset="8,0,0,0" itemattr="valign="vcenter" font="0"" folderattr="width="0" float="true""/> </TreeNode> </TreeView>
不过亲们可以发现如果你们自行编译的话,文字不会垂直居中,并且发现Alberl用了valign属性,嗯,这个将在下一个教程介绍~O(∩_∩)O~