第二十九篇：使用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来处理表头点击事件，以确实如何对数据排序。

至此，这个超级列表控件的使用就完成了。