第二十九篇：使用SOUI的SMCListView控件
列表控件是客户端应用最常用的控件之一。列表控件通常只负责显示数据，最多通知一下APP列表行的选中状态变化。
现在的UI经常要求程序猿在列表控件里不光显示内容，还要能和用户交互，显示动画等等，传统的列表控件对于这样的需求基本是无能为力了。
Android开发中很多界面都直接采用ListView实现，ListView中每一个Item中都可以容纳其它控件，这样的设计使得在表项中的交互和在主面板上交互一样简单。
虽然在列表项中容纳其它控件并不是什么新的思想，考虑到列表中的数据量是不确定的，如果给每一个表项的分配一个容器窗口，系统的内存占用及效率都成问题。
还好Andriod开源，简单看一下Android里ListView控件的源代码就可以发现，Android实现的ListView关键在于容器窗口的重用。
借鉴Andriod ListView控件的思想，在SOUI中也实现了对应的ListView控件。但是ListView只有一列，显示显示复杂内容问题不大，但是不能调整列宽等，和一个ListCtrl的功能还是有些差距。
多列列表和单列表最大的区别在于多了一个表头，核心的东西并没有区别，经过近3天的编码调试，终于完成了这个革命性的控件（至少我认为是Windows UI上革命性的）。
先看下效果：
SMCListView控件的使用：
XML配置：
要使用这个列表控件，首先应该在XML中定义该控件的位置及属性，参考下面摘自demo的代码：
<mclistview name="mclv_test" colorBkgnd="#ffffff" pos="10,10,-10,-10" headerHeight="30"> <header align="center" sortSkin="skin_lcex_header_arrow" itemSkin="skin_lcex_header" itemSwapEnable="1" fixWidth="0" font="underline:0,adding:-3" sortHeader="1" colorBkgnd="#ffffff" > <items> <item width="480">软件名称</item> <item width="95">软件评分</item> <item width="100">大小</item> <item width="100">安装时间</item> <item width="100">使用频率</item> <item width="100">操作</item> </items> </header> <template itemHeight="80" colorHover="#cccccc" colorSelected="#0000ff" id="30000"> <window name="col1"> <img name="img_icon" skin="skin_icon6" pos="10,8,@64,@64"/> <text name="txt_name" pos="[5,16" font="bold:1,adding:-1">火狐浏览器</text> <text name="txt_desc" pos="{0,36,-10,-10" font="bold:1,adding:-4" dotted="1">速度最快的浏览器</text> <text name="txt_index" pos="|0,|0" offset="-0.5,-0.5" font="adding:10" colorText="#ff000088">10</text> </window> <window name="col2"> <ratingbar name="rating_score" starSkin="skin_star1" starNum="5" value="3.5" pos="10,16" /> <text name="txt_score" pos="15,36,50,-16" font="adding:-5" >8.5分</text> <link pos="[5,36,@30,-16" cursor="hand" colorText="#1e78d5" href="www.163.com" font="adding:-5" >投票</link> </window> <window name="col3"> <text name="txt_size" pos="0,26,-0,-26" font="adding:-4" align="center" >85.92M</text> </window> <window name="col4"> <text name="txt_installtime" pos="0,26,-0,-26" font="adding:-4" align="center" >2015-01-09</text> </window> <window name="col5"> <text name="txt_usetime" pos="0,26,-0,-26" font="adding:-4" align="center" >今天</text> <animateimg pos="|0,|0" offset="-0.5,-0.5" skin="skin_busy" name="ani_test" tip="animateimg is used here" msgTransparent="0" /> </window> <window name="col6"> <imgbtn animate="1" pos="|-35,|-14" font="adding:-3" align="center" skin="skin_install" name="btn_uninstall">卸载</imgbtn> </window> </template> </mclistview>
mclistview有一个属性headerHeight，该属性定义表头的显示高度。
节点下有一个header控件，用来定义表头控件的样式，都很简单，自己看XML。
最关键的在于下面的template（模板）节点，该XML节点用来定义如何显示列表项。
模板内样式的定义其实并没有特别的规定，因为最后如何解析这个模板是由APP决定的，但推荐使用上面的样式：template节点下为每一列定义一个window节点，只需要指定一个name属性（当然也可以指定其它的窗口属性，布局属性无效）。在该window节点下可以定义任意的其它控件。
代码编写：
和listview控件一样，mclistview也需要XML和代码配合才能正确显示数据。
要使用mclistview，首先需要实现一个数据适配器（IMcAdapter，继承自SListView中实现的IAdapter)，还是先看demo中的实现：
class CTestMcAdapterFix : public SMcAdapterBase { public: struct SOFTINFO { wchar_t * pszSkinName; wchar_t * pszName; wchar_t * pszDesc; float fScore; DWORD dwSize; wchar_t * pszInstallTime; wchar_t * pszUseTime; }; static SOFTINFO s_info[]; public: CTestMcAdapterFix() { } virtual int getCount() { return 12340; } SStringT getSizeText(DWORD dwSize) { int num1=dwSize/(1<<20); dwSize -= num1 *(1<<20); int num2 = dwSize*100/(1<<20); return SStringT().Format(_T("%d.%02dM"),num1,num2); } virtual void getView(int position, SWindow * pItem,pugi::xml_node xmlTemplate) { if(pItem->GetChildrenCount()==0) { pItem->InitFromXml(xmlTemplate); } int dataSize = 7; SOFTINFO *psi = s_info+position%dataSize; pItem->FindChildByName(L"img_icon")->SetAttribute(L"skin",psi->pszSkinName); pItem->FindChildByName(L"txt_name")->SetWindowText(S_CW2T(psi->pszName)); pItem->FindChildByName(L"txt_desc")->SetWindowText(S_CW2T(psi->pszDesc)); pItem->FindChildByName(L"txt_score")->SetWindowText(SStringT().Format(_T("%1.2f 分"),psi->fScore)); pItem->FindChildByName(L"txt_installtime")->SetWindowText(S_CW2T(psi->pszInstallTime)); pItem->FindChildByName(L"txt_usetime")->SetWindowText(S_CW2T(psi->pszUseTime)); pItem->FindChildByName(L"txt_size")->SetWindowText(getSizeText(psi->dwSize)); pItem->FindChildByName2<SRatingBar>(L"rating_score")->SetValue(psi->fScore/2); pItem->FindChildByName(L"txt_index")->SetWindowText(SStringT().Format(_T("第%d行"),position)); SButton *pBtnUninstall = pItem->FindChildByName2<SButton>(L"btn_uninstall"); pBtnUninstall->SetUserData(position); pBtnUninstall->GetEventSet()->subscribeEvent(EVT_CMD,Subscriber(&CTestMcAdapterFix::OnButtonClick,this)); } bool OnButtonClick(EventArgs *pEvt) { SButton *pBtn = sobj_cast<SButton>(pEvt->sender); int iItem = pBtn->GetUserData(); SMessageBox(NULL,SStringT().Format(_T("button of %d item was clicked"),iItem),_T("uninstall"),MB_OK); return true; } SStringW GetColumnName(int iCol) const{ return SStringW().Format(L"col%d",iCol+1); } struct SORTCTX { int iCol; SHDSORTFLAG stFlag; }; bool OnSort(int iCol,SHDSORTFLAG * stFlags,int nCols) { if(iCol==5) //最后一列“操作”不支持排序 return false; SHDSORTFLAG stFlag = stFlags[iCol]; switch(stFlag) { case ST_NULL:stFlag = ST_UP;break; case ST_DOWN:stFlag = ST_UP;break; case ST_UP:stFlag = ST_DOWN;break; } for(int i=0;i<nCols;i++) { stFlags[i]=ST_NULL; } stFlags[iCol]=stFlag; SORTCTX ctx={iCol,stFlag}; qsort_s(s_info,7,sizeof(SOFTINFO),SortCmp,&ctx); return true; } static int __cdecl SortCmp(void *context,const void * p1,const void * p2) { SORTCTX *pctx = (SORTCTX*)context; const SOFTINFO *pSI1=(const SOFTINFO*)p1; const SOFTINFO *pSI2=(const SOFTINFO*)p2; int nRet =0; switch(pctx->iCol) { case 0://name nRet = wcscmp(pSI1->pszName,pSI2->pszName); break; case 1://score { float fCmp = (pSI1->fScore - pSI2->fScore); if(fabs(fCmp)<0.0000001) nRet = 0; else if(fCmp>0.0f) nRet = 1; else nRet = -1; } break; case 2://size nRet = (int)(pSI1->dwSize - pSI2->dwSize); break; case 3://install time nRet = wcscmp(pSI1->pszInstallTime,pSI2->pszInstallTime); break; case 4://user time nRet = wcscmp(pSI1->pszUseTime,pSI2->pszUseTime); break; } if(pctx->stFlag == ST_UP) nRet = -nRet; return nRet; } }; CTestMcAdapterFix::SOFTINFO CTestMcAdapterFix::s_info[] = { { L"skin_icon1", L"鲁大师", L"鲁大师是一款专业的硬件检测，驱动安装工具", 5.4f, 15*(1<<20), L"2015-8-5", L"今天" }, { L"skin_icon2", L"PhotoShop", L"强大的图片处理工具", 9.0f, 150*(1<<20), L"2015-8-5", L"今天" }, { L"skin_icon3", L"QQ7.0", L"腾讯公司出品的即时聊天工具", 8.0f, 40*(1<<20), L"2015-8-5", L"今天" }, { L"skin_icon4", L"Visual Studio 2008", L"Microsoft公司的程序开发套件", 9.0f, 40*(1<<20), L"2015-8-5", L"今天" }, { L"skin_icon5", L"YY8", L"YY语音", 9.0f, 20*(1<<20), L"2015-8-5", L"今天" }, { L"skin_icon6", L"火狐浏览器", L"速度最快的浏览器", 8.5f, 35*(1<<20), L"2015-8-5", L"今天" }, { L"skin_icon7", L"迅雷", L"迅雷下载软件", 7.3f, 17*(1<<20), L"2015-8-5", L"今天" } };
注意CTestMcAdapterFix::getView虚函数，上面提到的template会通过该函数的参数 pugi::xml_node xmlTemplate 传递过来。
在getView中，首先需要判断表项容器的子窗口是不是已经被初始化过，如果没有就执行InitFromXml如下：
if(pItem->GetChildrenCount()==0) { pItem->InitFromXml(xmlTemplate); }
在子窗口初始化完成后，还需要从数据表中获取对应项的数据填充到控件中显示：
int dataSize = 7; SOFTINFO *psi = s_info+position%dataSize; pItem->FindChildByName(L"img_icon")->SetAttribute(L"skin",psi->pszSkinName); pItem->FindChildByName(L"txt_name")->SetWindowText(S_CW2T(psi->pszName)); pItem->FindChildByName(L"txt_desc")->SetWindowText(S_CW2T(psi->pszDesc)); pItem->FindChildByName(L"txt_score")->SetWindowText(SStringT().Format(_T("%1.2f 分"),psi->fScore)); pItem->FindChildByName(L"txt_installtime")->SetWindowText(S_CW2T(psi->pszInstallTime)); pItem->FindChildByName(L"txt_usetime")->SetWindowText(S_CW2T(psi->pszUseTime)); pItem->FindChildByName(L"txt_size")->SetWindowText(getSizeText(psi->dwSize)); pItem->FindChildByName2<SRatingBar>(L"rating_score")->SetValue(psi->fScore/2); pItem->FindChildByName(L"txt_index")->SetWindowText(SStringT().Format(_T("第%d行"),position));
和主面板上的控件响应不同，要响应表项中控件的事件，没有事件映射表可以使用，可能在IMcAdapter的实现中使用控件的GetEventSet()->subscribeEvent方法来响应：
SButton *pBtnUninstall = pItem->FindChildByName2<SButton>(L"btn_uninstall"); pBtnUninstall->SetUserData(position); pBtnUninstall->GetEventSet()->subscribeEvent(EVT_CMD,Subscriber(&CTestMcAdapterFix::OnButtonClick,this));
除了getView这个方法外，相对于IAdapter，IMcAdapter还需要实现另外两个非常重要的方法：
interface IMcAdapter : public IAdapter { //获取列名 virtual SStringW GetColumnName(int iCol) const PURE; //排序接口 // int iCol:排序列 // SHDSORTFLAG * stFlags [in, out]:当前列排序标志 // int nCols:总列数,stFlags数组长度 virtual bool OnSort(int iCol,SHDSORTFLAG * stFlags,int nCols) PURE; };
实现GetColumnName方法来获取每一列对应的子窗口名称，SMcListView通过它来确实template中的子窗口哪一个应该显示在什么位置，返回在template中定义的子节点的name即可。
实现OnSort来处理表头点击事件，以确实如何对数据排序。
至此，这个超级列表控件的使用就完成了。
