关于duilib中的list的扩展探索

原文:http://blog.csdn.net/tragicguy/article/details/21893065


今天在做一个程序的界面时,需要在一个列表中显示除文字以外的其他控件,如:EditButtonCombo等;我做界面使用的是duilib,其自带的CListUI并不能满足此项功能,需要进行扩展,在此记录,以便后续使用需要。

先看一下实现的效果:

关于duilib中的list的扩展探索_第1张图片

今天我们的扩展主要包含如下部分:

1.表头支持控件

在ListUI中,表头是CListHeaderItemUI,而这个类是从CControlUI继承而来,为了能支持在其中显示其他控件,它需要是一个容器,那么需要将其父类改成CContainerUI,调整基类后,需要同时将CListHeaderItemUI类中引用CControlUI的地方全部改成CContainerUI,如:

[cpp] view plain copy 在CODE上查看代码片
  1. LPVOIDCListHeaderItemUI::GetInterface(LPCTSTRpstrName)
  2. {
  3. if(_tcscmp(pstrName,DUI_CTR_LISTHEADERITEM)==0)returnthis;
  4. returnCContainerUI::GetInterface(pstrName);
  5. }

如果此处不改,将无法从XML文件中加载内嵌控件。

还需要修改其他如DoEvent事件中的CControlUI,否则会导致表头无法拖拉,切记。

改造后,我们可以从XML文件加载了,XML文件可以这样写:

[html] view plain copy 在CODE上查看代码片
  1. <Listname="listex"bkcolor="#FFFFFFFF"inset="0,0,0,0"itemshowhtml="true"vscrollbar="true"hscrollbar="true"headerbkimage="file='list_header_bg.png'"itemhotimage="file='tree_hot.bmp'corner='2,1,2,1'"itemselectedimage="file='tree_select.bmp'corner='2,1,2,1'"itemalign="center"itembkcolor="#FFE2DDDF"itemaltbk="true"hscrollbar="false"menu="true">
  2. <ListHeaderheight="24"menu="true">
  3. <ListHeaderItemtext=""inset="1,0,1,0"minwidth="60"endellipsis="true"font="1"width="95"normalimage="headerctrl_normal.bmp"hotimage="headerctrl_hot.bmp"pushedimage="headerctrl_down.bmp"sepimage="Headerctrl_Sperator.bmp"sepwidth="2">
  4. <VerticalLayoutinset="1,0,5,0">
  5. <CheckBoxname="selall"endellipsis="true"text="全选"textcolor="#FF386382"hottextcolor="#FF386382"selectedtextcolor="#FF386382"disabledtextcolor="#FFbac0c5"textpadding="20,3,0,0"align="left"selectedimage="file='checkbox_p.png'dest='0,2,15,17'"normalimage="file='checkbox_h.png'dest='0,2,15,17'"/>
  6. </VerticalLayout>
  7. </ListHeaderItem>
  8. <ListHeaderItemtext="域名"minwidth="100"endellipsis="true"font="1"width="200"normalimage="headerctrl_normal.bmp"hotimage="headerctrl_hot.bmp"pushedimage="headerctrl_down.bmp"sepimage="Headerctrl_Sperator.bmp"sepwidth="2"/>
  9. <ListHeaderItemtext="描述"minwidth="120"endellipsis="true"font="1"width="150"normalimage="headerctrl_normal.bmp"hotimage="headerctrl_hot.bmp"pushedimage="headerctrl_down.bmp"sepimage="Headerctrl_Sperator.bmp"sepwidth="2"/>
  10. </ListHeader>


这样显示出来的效果如下:

注意:

此处需要将内嵌控件的ListHeaderItem添加一个inset属性,控制内嵌的控件不要铺满整个ListHeaderItem,否则表头拖动不了,如:

ListHeaderItemtext=""inset="1,0,1,0"

2.列表项支持控件

CListUI的某一行CListContainerElementUI继承至容器CContainerUI,这样一来我们只需要将需要的控件添加到此容器中,即可正确的显示相关的控件了,此处并不需要做调整,只是这样一来会带来一个问题,那就是所添加的列的宽度无法与表头的宽度保持一致。

要解决这个问题,需要给CListContainerElementUI添加SetPos函数,在此函数中,重新校正数据列宽与表头宽度一致,具体如下:

[cpp] view plain copy 在CODE上查看代码片
  1. voidSetPos(RECTrc)
  2. {
  3. CContainerUI::SetPos(rc);
  4. if(m_pOwner==NULL)return;
  5. if(m_pHeader==NULL)
  6. {
  7. return;
  8. }
  9. TListInfoUI*pInfo=m_pOwner->GetListInfo();
  10. intnCount=m_items.GetSize();
  11. for(inti=0;i<nCount;i++)
  12. {
  13. CControlUI*pHorizontalLayout=static_cast<CControlUI*>(m_items[i]);
  14. //if(pHorizontalLayout!=NULL)
  15. //{
  16. //RECTrtHeader=pHeaderItem->GetPos();
  17. //RECTrt=pHorizontalLayout->GetPos();
  18. //rt.left=pInfo->rcColumn[i].left;
  19. //rt.right=pInfo->rcColumn[i].right;
  20. //pHorizontalLayout->SetPos(rt);
  21. //}
  22. CListHeaderItemUI*pHeaderItem=static_cast<CListHeaderItemUI*>(m_pHeader->GetItemAt(i));
  23. if(pHorizontalLayout!=NULL&&pHeaderItem!=NULL)
  24. {
  25. RECTrtHeader=pHeaderItem->GetPos();
  26. RECTrt=pHorizontalLayout->GetPos();
  27. rt.left=rtHeader.left;
  28. rt.right=rtHeader.right;
  29. pHorizontalLayout->SetPos(rt);
  30. }
  31. }
  32. }
  33. CListHeaderUI*m_pHeader;

此处往列表项中添加了表头的指针,需要在插入一行的时候,将表头的指针传递进来,用于在SetPos的时候获取表头宽度。

注意以上代码中的注释部分,原本打算从TListInfoUI的rcColumn中获取表头项宽度的,但发现新添加行时,rcCulumn中的值全是0,需要在插入行前主动调用一次CListUI::SetPos(GetPos());才能正常,使用起来较麻烦,且容易忘记;即使是添加上了,测试发现获取到的位置有一定的偏移,所以采用将Header传入,实时获取了。

以下是一行数据的XML文件描述:

[html] view plain copy 在CODE上查看代码片
  1. <?xmlversion="1.0"encoding="UTF-8"?>
  2. <Window>
  3. <ListContainerElement>
  4. <CheckBoxname="selectme"endellipsis="true"text="亲,选我吧!"textcolor="#FF386382"hottextcolor="#FF386382"selectedtextcolor="#FF386382"disabledtextcolor="#FFbac0c5"textpadding="20,3,0,0"align="left"selectedimage="file='checkbox_p.png'dest='0,2,15,17'"normalimage="file='checkbox_h.png'dest='0,2,15,17'"/>
  5. <HorizontalLayoutinset="4,4,4,4">
  6. <Edittext="测试文本"bordersize="1"height="20"bordercolor="#FF4775CC"name="domain"></Edit>
  7. </HorizontalLayout>
  8. <HorizontalLayout>
  9. <VerticalLayout>
  10. <Buttontext="按钮1"width="50"pushedimage="button_down.bmp"hotimage="button_over.bmp"normalimage="button_nor.bmp"name="ttt"></Button>
  11. <Buttontext="按钮2"width="50"pushedimage="button_down.bmp"hotimage="button_over.bmp"normalimage="button_nor.bmp"name="ttt"></Button>
  12. <Labeltext="这是从XML文件中加载的列表项"></Label>
  13. </VerticalLayout>
  14. </HorizontalLayout>
  15. </ListContainerElement>
  16. </Window>
注意,此处需要确保 ListContainerElement 的子控件个数不少于列表的列数

在代码中加载此XML文件,将行数据添加到列表中:

[cpp] view plain copy 在CODE上查看代码片
  1. CListUIEx*pList=static_cast<CListUIEx*>(m_PaintManager.FindControl(_T("listex")));
  2. CDialogBuilderbuilder;
  3. CListContainerElementUI*pLine=(CListContainerElementUI*)(builder.Create(_T("sigle_list_item_column.xml"),(UINT)0,this));
  4. if(pLine!=NULL)
  5. {
  6. pList->InsertItem(0,60,pLine);//此函数是经过二次封装的
  7. }
加载的效果如下:

这样我们可以在列表的不同项中显示任意内容,甚至是一个完整的窗口了。

3.通过代码动态添加列及列表项

以上的处理均是调整后从XML加载相应的加载已经配置好的列表进行显示,在完成上述工作后,我这边进一步封装了几个函数,以便于动态的添加列[指定内嵌控件]、动态的插入行以及动态的在某一行列中添加控件。

1).以下代码用于动态的添加列:

[cpp] view plain copy 在CODE上查看代码片
  1. BOOLCListUIEx::InsertColumn(
  2. intnCol,
  3. CListHeaderItemUI*pHeaderItem
  4. )
  5. {
  6. CListHeaderUI*pHeader=CListUI::GetHeader();
  7. if(pHeader==NULL)
  8. {
  9. returnFALSE;
  10. }
  11. if(pHeader->AddAt(pHeaderItem,nCol))
  12. {
  13. returnTRUE;
  14. }
  15. deletepHeaderItem;
  16. pHeaderItem=NULL;
  17. returnFALSE;
  18. }
  19. BOOLCListUIEx::SetHeaderItemData(intnColumn,CControlUI*pControl)
  20. {
  21. CListHeaderUI*pHeader=CListUI::GetHeader();
  22. if(pHeader==NULL)
  23. {
  24. returnFALSE;
  25. }
  26. CListHeaderItemUI*pHeaderItem=(CListHeaderItemUI*)pHeader->GetItemAt(nColumn);
  27. pHeaderItem->Add(pControl);
  28. }
调用代码如下 [ 添加一列,并且向此列中嵌入一个 CheckBox]

[cpp] view plain copy 在CODE上查看代码片
  1. CListHeaderItemUI*pHeaderItem=newCListHeaderItemUI;
  2. pHeaderItem->SetTextStyle(DT_RIGHT|DT_VCENTER|DT_SINGLELINE);
  3. pHeaderItem->SetText("新增列");
  4. pHeaderItem->SetAttribute(_T("sepimage"),_T("Headerctrl_Sperator.bmp"));
  5. pHeaderItem->SetAttribute(_T("sepwidth"),_T("1"));
  6. pHeaderItem->SetAttribute(_T("pushedimage"),_T("headerctrl_down.bmp"));
  7. pHeaderItem->SetAttribute(_T("hotimage"),_T("headerctrl_hot.bmp"));
  8. pHeaderItem->SetAttribute(_T("normalimage"),_T("headerctrl_normal.bmp"));
  9. pHeaderItem->SetFixedWidth(150);
  10. pList->InsertColumn(3,pHeaderItem);
  11. CCheckBoxUI*pBtnUI=newCCheckBoxUI;
  12. pBtnUI->SetText("选择");
  13. pBtnUI->SetAttribute(_T("selectedimage"),_T("file='checkbox_p.png'dest='0,2,15,17'"));
  14. pBtnUI->SetAttribute(_T("normalimage"),_T("file='checkbox_h.png'dest='0,2,15,17'"));
  15. pBtnUI->SetAttribute(_T("textpadding"),_T("20,3,0,0"));
  16. pBtnUI->SetAttribute(_T("align"),_T("right"));
  17. pBtnUI->SetFloat(true);
  18. pBtnUI->SetAttribute("pos","20,3,65,20");
  19. pList->SetHeaderItemData(3,pBtnUI);
2). 以下代码用于动态的添加行,动态的指定一列的内容:

[cpp] view plain copy 在CODE上查看代码片
  1. intCListUIEx::InsertItem(intnItem,intnHeight)
  2. {
  3. CListContainerElementUIEx*pListItem=newCListContainerElementUIEx;
  4. pListItem->SetFixedHeight(nHeight);/*固定一个行高*/
  5. pListItem->SetList(this);
  6. CListHeaderUI*pHeader=CListUI::GetHeader();
  7. if(NULL!=pHeader)
  8. {
  9. intnHeaderCount=pHeader->GetCount();
  10. for(inti=0;i<nHeaderCount;i++)
  11. {
  12. pListItem->InsertColumn(i);
  13. }
  14. }
  15. if(!CListUI::AddAt(pListItem,nItem))
  16. {
  17. deletepListItem;
  18. pListItem=NULL;
  19. return-1;
  20. }
  21. returnnItem;
  22. }
  23. voidCListUIEx::SetItemData(intnItem,
  24. intnColumn,
  25. LPCTSTRText,LPCTSTRName)
  26. {
  27. //存放文本
  28. CHorizontalLayoutUI*pSubHor=GetListSubItem(nItem,nColumn);
  29. CLabelUI*pLabel=newCLabelUI;
  30. pLabel->SetText(Text);//控件属性就根据需求设置吧,我简单设置一下
  31. pLabel->SetTextStyle(DT_CENTER);
  32. pLabel->SetAttribute("endellipsis","true");
  33. pSubHor->SetAttribute("inset","3,1,3,1");
  34. pLabel->SetName(Name);
  35. pSubHor->Add(pLabel);//添加到父控件
  36. }
  37. voidCListUIEx::SetItemData(intnItem,intnColumn,CControlUI*pControl)
  38. {
  39. CHorizontalLayoutUI*pSubHor=GetListSubItem(nItem,nColumn);
  40. pSubHor->SetAttribute("inset","3,0,3,1");
  41. pSubHor->Add(pControl);//添加到父控件
  42. }

通过如下代码来添加一行数据:

[cpp] view plain copy 在CODE上查看代码片
  1. CListUIEx*pList=static_cast<CListUIEx*>(m_PaintManager.FindControl(_T("listex")));
  2. intnIndex=pList->GetCount();
  3. pList->InsertItem(nIndex);
  4. CEditUI*pControl=newCEditUI;
  5. pControl->SetText("");
  6. pControl->SetName("edit");
  7. pControl->SetBorderColor(RGB(255,0,0));
  8. pControl->SetAttribute("bordersize","1");
  9. pControl->SetAttribute("bordercolor","#FF4775CC");
  10. pList->SetItemData(nIndex,0,pControl);
  11. CButtonUI*pBtnUI=newCButtonUI;
  12. pBtnUI->SetText("添加");
  13. pBtnUI->SetFixedWidth(60);
  14. pBtnUI->SetAttribute(_T("pushedimage"),_T("button_down.bmp"));
  15. pBtnUI->SetAttribute(_T("hotimage"),_T("button_over.bmp"));
  16. pBtnUI->SetAttribute(_T("normalimage"),_T("button_nor.bmp"));
  17. pList->SetItemData(nIndex,1,pBtnUI);
  18. pList->SetItemData(nIndex,2,"这是一行动态添加的数据","testid");
  19. if(pList->GetHeader()->GetCount()>3)
  20. {
  21. pList->SetItemData(nIndex,3,"新增列数据","testid1");
  22. }

至此,ListUI的扩展就告一段落了,目前已经完全满足了的使用需求,相信也能满足绝大部分其他人的需求了,测试程序的完整效果图如下:

关于duilib中的list的扩展探索_第2张图片

测试程序代码下载地址:http://download.csdn.net/detail/tragicguy/7087559

后记:

扩展此控件,参考了文章:http://blog.csdn.net/xdrt81y/article/details/17588961

此份测试代码改自 群友【朗】的ListExtension.

同时特别感谢群友tojen的帮助!

duilib功能确实很强大,给我这种UI小白带来了希望,希望有越来越多的高级控件能纳入的基础源码库中,方便大众;也希望其他扩展过duilib功能的大侠,放出代码来,造福众人。


你可能感兴趣的:(关于duilib中的list的扩展探索)