开发者社区> redrain.> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

关于duilib中的list的扩展探索

简介: 原文地址:http://blog.csdn.net/tragicguy/article/details/21893065 今天在做一个程序的界面时,需要在一个列表中显示除文字以外的其他控件,如:Edit、Button、Combo等;我做界面使用的是duilib,其自带的CListUI并不能满足此项功能,需要进行扩展,在此记录,以便后续使用需要。
+关注继续查看

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


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

 

先看一下实现的效果:

 

 

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

1. 表头支持控件

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

 

  1. LPVOID CListHeaderItemUI::GetInterface(LPCTSTR pstrName)  
  2. {  
  3.     if( _tcscmp(pstrName, DUI_CTR_LISTHEADERITEM) == 0 ) return this;  
  4.     return CContainerUI::GetInterface(pstrName);  
  5. }  

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

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

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

[html] view plaincopy在CODE上查看代码片派生到我的代码片
  1. <List name="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. <ListHeader height="24" menu="true">  
  3. <ListHeaderItem text="" 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. <VerticalLayout inset="1,0,5,0">  
  5. <CheckBox name="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. <ListHeaderItem text="域名" 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. <ListHeaderItem text="描述" 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 ,否则表头拖动不了,如:

ListHeaderItem text="" inset="1,0,1,0"

 

2. 列表项支持控件

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

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

  1. void SetPos(RECT rc)  
  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. int nCount = m_items.GetSize();  
  11. for (int i = 0; i < nCount; i++)  
  12. {  
  13. CControlUI *pHorizontalLayout = static_cast<CControlUI*>(m_items[i]);  
  14. // if (pHorizontalLayout != NULL)  
  15. // {  
  16. // RECT rtHeader = pHeaderItem->GetPos();  
  17. // RECT rt = pHorizontalLayout->GetPos();  
  18. // rt.left = pInfo->rcColumn[i].left;  
  19. // rt.right = pInfo->rcColumn[i].right;  
  20. // pHorizontalLayout->SetPos(rt);  
  21. // }  
  22.    
  23. CListHeaderItemUI *pHeaderItem = static_cast<CListHeaderItemUI*>(m_pHeader->GetItemAt(i));  
  24. if (pHorizontalLayout != NULL && pHeaderItem != NULL)  
  25. {  
  26. RECT rtHeader = pHeaderItem->GetPos();  
  27. RECT rt = pHorizontalLayout->GetPos();  
  28. rt.left = rtHeader.left;  
  29. rt.right = rtHeader.right;  
  30. pHorizontalLayout->SetPos(rt);  
  31. }  
  32. }  
  33.     }  
  34. CListHeaderUI *m_pHeader;  

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

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

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

[html] view plaincopy在CODE上查看代码片派生到我的代码片
  1. <?xml version="1.0" encoding="UTF-8"?>  
  2. <Window>  
  3.   <ListContainerElement >  
  4. <CheckBox name="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. <HorizontalLayout inset="4,4,4,4">  
  6. <Edit text="测试文本" bordersize="1" height="20" bordercolor="#FF4775CC" name="domain" ></Edit>  
  7. </HorizontalLayout>  
  8. <HorizontalLayout >  
  9. <VerticalLayout>  
  10. <Button text="按钮1" width="50" pushedimage="button_down.bmp" hotimage="button_over.bmp" normalimage="button_nor.bmp" name="ttt" ></Button>  
  11. <Button text="按钮2" width="50" pushedimage="button_down.bmp" hotimage="button_over.bmp" normalimage="button_nor.bmp" name="ttt" ></Button>  
  12. <Label text="这是从XML文件中加载的列表项"></Label>  
  13. </VerticalLayout>  
  14. </HorizontalLayout>  
  15.   </ListContainerElement>  
  16. </Window>  
注意,此处需要确保ListContainerElement 的子控件个数不少于列表的列数

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

  1. CListUIEx *pList = static_cast<CListUIEx*>(m_PaintManager.FindControl(_T("listex")));  
  2. CDialogBuilder builder;  
  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). 以下代码用于动态的添加列:

  1. BOOL CListUIEx::InsertColumn(  
  2.  int nCol,  
  3.  CListHeaderItemUI *pHeaderItem  
  4.  )  
  5. {  
  6. CListHeaderUI *pHeader = CListUI::GetHeader();  
  7. if (pHeader == NULL)  
  8. {  
  9. return FALSE;  
  10. }  
  11. if (pHeader->AddAt(pHeaderItem, nCol))  
  12. {  
  13. return TRUE;  
  14. }  
  15.    
  16. delete pHeaderItem;  
  17. pHeaderItem = NULL;  
  18. return FALSE;  
  19. }  
  20.    
  21. BOOL CListUIEx::SetHeaderItemData(int nColumn, CControlUI* pControl)  
  22. {  
  23. CListHeaderUI *pHeader = CListUI::GetHeader();  
  24. if (pHeader == NULL)  
  25. {  
  26. return FALSE;  
  27. }  
  28. CListHeaderItemUI *pHeaderItem = (CListHeaderItemUI *)pHeader->GetItemAt(nColumn);  
  29. pHeaderItem->Add(pControl);  
  30. }  
调用代码如下[添加一列,并且向此列中嵌入一个CheckBox]

  1. CListHeaderItemUI *pHeaderItem = new CListHeaderItemUI;  
  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.    
  12. CCheckBoxUI *pBtnUI = new CCheckBoxUI;  
  13. pBtnUI->SetText("选择");  
  14. pBtnUI->SetAttribute(_T("selectedimage"), _T("file='checkbox_p.png' dest='0,2,15,17'"));  
  15. pBtnUI->SetAttribute(_T("normalimage"), _T("file='checkbox_h.png' dest='0,2,15,17'"));  
  16. pBtnUI->SetAttribute(_T("textpadding"), _T("20,3,0,0"));  
  17. pBtnUI->SetAttribute(_T("align"), _T("right"));  
  18. pBtnUI->SetFloat(true);  
  19. pBtnUI->SetAttribute("pos""20,3, 65, 20");  
  20.    
  21. pList->SetHeaderItemData(3, pBtnUI);  
2). 以下代码用于动态的添加行,动态的指定一列的内容: 

  1. int CListUIEx::InsertItem(int nItem, int nHeight)  
  2. {  
  3. CListContainerElementUIEx *pListItem = new CListContainerElementUIEx;  
  4. pListItem->SetFixedHeight(nHeight);/*固定一个行高*/  
  5. pListItem->SetList(this);  
  6.    
  7. CListHeaderUI *pHeader = CListUI::GetHeader();  
  8. if (NULL != pHeader)  
  9. {  
  10. int nHeaderCount = pHeader->GetCount();  
  11. for (int i = 0; i < nHeaderCount; i++)  
  12. {  
  13. pListItem->InsertColumn(i);  
  14. }  
  15. }  
  16. if ( !CListUI::AddAt(pListItem, nItem) )  
  17. {  
  18. delete pListItem;  
  19. pListItem = NULL;  
  20. return -1;  
  21. }  
  22. return nItem;  
  23. }  
  24.    
  25. void CListUIEx::SetItemData(int nItem,  
  26. int nColumn,  
  27. LPCTSTR Text, LPCTSTR Name)  
  28. {  
  29. //存放文本  
  30. CHorizontalLayoutUI *pSubHor = GetListSubItem(nItem, nColumn);  
  31. CLabelUI *pLabel = new CLabelUI;  
  32. pLabel->SetText(Text);//控件属性就根据需求设置吧,我简单设置一下  
  33. pLabel->SetTextStyle(DT_CENTER);  
  34. pLabel->SetAttribute("endellipsis""true");  
  35. pSubHor->SetAttribute("inset""3,1,3,1");  
  36. pLabel->SetName(Name);  
  37. pSubHor->Add(pLabel);//添加到父控件  
  38. }  
  39.    
  40. void CListUIEx::SetItemData(int nItem, int nColumn,CControlUI* pControl)  
  41. {  
  42. CHorizontalLayoutUI *pSubHor = GetListSubItem(nItem, nColumn);  
  43. pSubHor->SetAttribute("inset""3,0,3,1");  
  44. pSubHor->Add(pControl);//添加到父控件  
  45. }  

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

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

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

 

 

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

  

后记:

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

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

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

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

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
VB编程:将文本控件添加到集合Collection中-19
VB编程:将文本控件添加到集合Collection中-19
0 0
SwiftUI—使用List列表在垂直方向显示一系列的内容
SwiftUI—使用List列表在垂直方向显示一系列的内容
0 0
VB编程:将文本控件添加到集合Collection中
VB编程:将文本控件添加到集合Collection中
0 0
UWP 扩展/自定义标题栏的方法,一些概念和一些注意事项
原文 UWP 扩展/自定义标题栏的方法,一些概念和一些注意事项 在 Windows 10 的前几个版本中将页面内容扩展到标题栏上还算简单,主要是没什么坑。直到一些新控件的引入和一些外观设计趋势变化之后,扩展标题栏开始出现一些坑了。
900 0
重新想象 Windows 8.1 Store Apps (77) - 控件增强: 文本类控件的增强, 部分控件增加了 Header 属性和 HeaderTemplate 属性, 部分控件增加了 PlaceholderText 属性
原文:重新想象 Windows 8.1 Store Apps (77) - 控件增强: 文本类控件的增强, 部分控件增加了 Header 属性和 HeaderTemplate 属性, 部分控件增加了 PlaceholderText 属性 [源码下载] 重新想象 Windows 8.
630 0
一步一步学List Control控件的用法(第三步)----设置风格 .
第三步 设置风格 1、 通过第一步和第二步,我们已经创建出了一个有一行并且有四列的内容的REPORT风格的List Control。可是,只是简单的方框中有一行数据而已,我们能不能让它们看起来更漂亮呢?或者我们能不能让它们可以被选取从而让我们可以做一些别的操作呢?当然可以,这一步我们就来看看简单的风格设置。
729 0
一步一步学List Control控件的用法(第三步)----设置风格
第三步  设置风格 1、  通过第一步和第二步,我们已经创建出了一个有一行并且有四列的内容的REPORT风格的List Control。可是,只是简单的方框中有一行数据而已,我们能不能让它们看起来更漂亮呢?或者我们能不能让它们可以被选取从而让我们可以做一些别的操作呢?当然可以,这一步我们就来看看简单的风格设置。
666 0
Delphi中通用控件安装、删除方法
//==========通用控件安装方法:----------基本安装1、对于单个控件,Componet-->install component..-->PAS或DCU文件-->install;2、对于带*.dpk文件的控件包,File-->Open(下拉列表框中选*.dpk)-->install即可;3、对于带*.bpl文件的控件包,Install Packag
508 0
+关注
redrain.
世上最可怕的事情就是比你优秀的人同时比你更努力!
文章
问答
文章排行榜
最热
最新
相关电子书
更多
UI2CODE智能生成flutter代码--整体架构 【上叶】
立即下载
继承与功能组合
立即下载
用RxSwift写易维护易读的愉悦代码
立即下载