DuiLib（7）——CTreeViewUI使用攻略

DuiLib中自带的QQ和Game示例程序，用CListUI实现了TreeView的效果，不过比较麻烦，难以通用。

最新的DuiLib库里已经新增了TreeView这个控件，基本上实现了MFC中tree控件的功能，而且效果更炫丽。

一、TreeView控件的组成

CTreeViewUI继承自CListUI

CTreeNodeUI是由下面4个控件组成，CLabel包含了前面3个。

• 折叠图标（CButtonUI）是1个按钮，有2种状态，一个是折起，一个是展开。
• 复选框（CCheckBoxUI）
• 选择切换控件（COptionUI）
• 标签控件（CLabel）

二、TreeView控件的属性说明

1. 共有属性

• itemfont（item的字体）
• itemalign（item的对其方式）
• itemendellipsis（文字超长时是否以省略号代替）
• itemtextpadding（文字显示的外边距）
• itemtextcolor（item的字体颜色）
• itembkcolor（item的背景颜色）
• itembkimage（item的背景图片）
• itemaltbk（item隔行交替显示背景）
• itemselectedtextcolor（item选中的字体颜色）
• itemselectedbkcolor（item选中的背景颜色）
• itemselectedimage（item选中的背景图片）
• itemhottextcolor（鼠标悬浮时的字体颜色）
• itemhotbkcolor（鼠标悬浮时的背景颜色）
• itemhotimage（鼠标悬浮时的背景图片）
• itemdisabledtextcolor（item被禁用时的字体颜色）
• itemdisabledbkcolor（item被禁用时的背景颜色）
• itemdisabledimage（item被禁用时的背景图片）
• itemlinecolor（item之间的分割线的颜色）
• itemshowhtml（item使用富文本html绘制）
• multiexpanding（是否支持多个item同时展开）

2、CTreeViewUI的私有属性

• multipleitem（是否允许item多选）
• itemcheckimgsize（item复选框的图片大小）
• itemiconimgsize（item折叠图标的大小）
• visiblefolderbtn（是否显示折叠图标）
• visiblecheckbtn（是否显示复选框）
• itemminwidth（设置item的最小宽度，hscrollbar为true时，大于width后，显示水平滚动条）
• selitemtextcolor（item被选中时的字体颜色）
• itemtextcolor（item未被选中时的字体颜色）
• itemhottextcolor（item未被选中，鼠标悬浮时的字体颜色）
• selitemhottextcolor（item被选中，鼠标悬浮时的字体颜色）

3、CTreeNodeUI的私有属性

• dotlineattr（item之间的分割线属性设置）
• folderattr（用来设置折叠图标CButtonUI的属性）
• checkboxattr（用来设置复选框CCheckBoxUI的属性）
• itemattr（用来设置CLabel的属性）
• textcolor（字体的颜色）
• texthotcolor（鼠标悬浮时的字体颜色）
• selitemtextcolor（被选中时的字体颜色）
• selhotitemtextcolor（被选中时，鼠标悬浮的字体颜色）

三、xml中属性设置示例

1. TreeView

   <TreeView name="tree_list" hscrollbar="true" itemtextcolor="#FFFFFFFF" 
   	itemhottextcolor="#FFC8C6CB" selitemtextcolor="FFC8C6CB" 
   	itemhotbkcolor="#FF1B1B1B" itemselectedbkcolor="#FF151C2C" 
   	visiblecheckbtn="false">
   </TreeView>

   
   设置了3种字体颜色，分别是普通、鼠标悬浮、选中时的颜色。设置了2种背景颜色，分别是鼠标悬浮与选中的背景颜色
   
2. TreeNode

   <TreeNode height="33" name="movie" text="电影" bkimage="skin/treeview_header.png" folderattr="padding="5,9,5,0" width="14" height="14" normalimage="file='skin/treeview_expand.png' source='0,24,14,38' " selectedimage="file='skin/treeview_expand.png' source='0,0,14,14' "">
   	<TreeNode name="movie1" textcolor="#FFC8C6CB" height="25" text="电影1" itemattr="align="center"" >
   	</TreeNode>
   	<TreeNode text="电影2" folderattr="width="0" float="true" " itemattr="padding="16,0,0,0" align="left"" />
   	<TreeNode text="电影3" checkboxattr="width="16" height="16" normalimage="file='skin/unchecked.png' " selectedimage="file='skin/checked.png' "" />
   </TreeNode>

   
   电影1中的itemattr把字体设置成了居中显示，电影2中的folderattr把折叠图标隐藏了，电影3中checkboxattr设置了复选框的选框图片，bkimage设置了整行的背景图片。

示例图如下：

四、使用代码插入一个TreeNode

AddAt只能从0到倒数第二个位置，插入一个节点

Add只能插入到最后一个位置

不能插在整个treeview最后一个位置，这应该是一个bug，可以在结尾加一个隐藏的TreeNode

	CTreeNodeUI* node = new CTreeNodeUI;
	CTreeNodeUI* pParentTree = static_cast<CTreeNodeUI*>(m_PaintManager.FindControl(_T("movie")));
	node->SetItemTextColor(0xFFFFFFFF);
	node->SetItemHotTextColor(0xFFC8C6CB);
	node->SetSelItemTextColor(0xFFC8C6CB);
	node->SetAttribute(_T("folderattr"), _T("width=\"0\" float=\"true\" "));
	node->SetAttribute(_T("itemattr"), _T("padding=\"16,0,0,0\" align=\"left\" "));
	node->SetItemText(_T("电影4"));
	//pParentTree->AddAt(node,2);//只能插入0到倒数第二个位置
	pParentTree->Add(node); //可以插入到最后一个位置
	// PS:不能插在整个treeview最后一个位置，这应该是一个bug，可以在结尾加一个隐藏的TreeNode