duilib关于学习Demo中的QQ

该demo是模拟QQ的界面和相应的操作。

1、该主界面的列表使用了自定义listui的操作。在 createcontrol中进行自定义创建。

CControlUI* MainFrame::CreateControl(LPCTSTR pstrClass)
{
    if (_tcsicmp(pstrClass, _T("FriendList")) == 0)
    {
        return new CFriendsUI(m_PaintManager);
    }
    else if (_tcsicmp(pstrClass, _T("GroupList")) == 0)
    {
        return new CGroupsUI(m_PaintManager);
    }
    else if (_tcsicmp(pstrClass, _T("MicroBlog")) == 0)
    {
        return new CMicroBlogUI(m_PaintManager);
    }

    return NULL;
}

View Code

2、背景的动态切换。使用了观察者模式，当背景切换时候，所有对应的窗口和子窗口都得到切换。那么所有的子窗口都要继承SkinChangedReceiver，然后重写virtual BOOL Receive(SkinChangedParam param)。因为在触发颜色或者背景切换的时候会触发本身窗口的改变然后广播所有的子窗口，具体的则会调用对应的Receive

void MainFrame::SetBkColor(DWORD dwBackColor)
{
    CControlUI* background = m_PaintManager.FindControl(kBackgroundControlName);
    if (background != NULL)
    {
        background->SetBkImage(_T(""));
        background->SetBkColor(dwBackColor);
        background->NeedUpdate();

        SkinChangedParam param;
        param.bkcolor = background->GetBkColor();
        param.bgimage = background->GetBkImage();
        skin_changed_observer_.Broadcast(param);
    }
}

View Code

3、关于重写listui时的item左边部分位置无法响应。而GameDemo的全部位置都能响应。不存在类似与QQdemo的盲区。

关于该区别需要看addnode的部分代码

QQ：

CDuiRect rect = text_padding_;
rect.left += (parent->Data().level_+1) * left_offset_;
element->SetPadding(rect);

如QQdemo所示，很见到就知道为什么item的左部分无法响应了。

GameDemo:

CDuiString html_text;
html_text += _T("<x 6>");
for( int i = 0; i < node->data()._level; ++i ) {
html_text += _T("<x 24>");
}

通过这两份代码可以知道为什么了。所以在平时的项目中可以根据不同的需求进行相应的操作。

 

 

=========================================================

关于在写QQDemo的时候发现的一个可能的HorizontalLayout的异常现象。

 

官方的Main_frame.xml配置：

<HorizontalLayout inset="0,0,0,0">
          <HorizontalLayout pos="0,0,1,0" width="1" inset="0,0,0,0" />
          <VerticalLayout name="LeftMainPanel" width="35" inset="0,0,0,0">
            <VerticalLayout width="29" bkimage="file='bjLeftPanel.png' corner='2,100,2,2'" padding="5,0,0,0">
              <Label height="5" />
              <Button width="24" height="24" bkimage="file='mainleft_Qzonebtn24_qzonebtn1.png' mask='0xffffffff'" textcolor="#FF000000" disabledtextcolor="#FFA7A6AA" align="center" normalimage="file='mainleft_Qzonebtn24_qzonebtn1.png' mask='0xffffffff'" hotimage="file='allbtn_over.png' mask='0xffffffff'" pushedimage="file='allbtn_down.png' mask='0xffffffff'" />
              <Label height="5" />
              <Button width="24" height="24" bkimage="file='mainleft_QQTradeCenter1.png' mask='0xffffffff'" textcolor="#FF000000" disabledtextcolor="#FFA7A6AA" align="center" normalimage="file='mainleft_QQTradeCenter1.png' mask='0xffffffff'" hotimage="file='allbtn_over.png' mask='0xffffffff'" pushedimage="file='allbtn_down.png' mask='0xffffffff'" />
              <Label height="5" />
              <Button width="24" height="24" bkimage="file='paipai1.png' mask='0xffc0c0c0'" textcolor="#FF000000" disabledtextcolor="#FFA7A6AA" align="center" normalimage="file='paipai1.png' mask='0xffc0c0c0'" hotimage="file='allbtn_over.png' mask='0xffc0c0c0'" pushedimage="file='allbtn_down.png' mask='0xffc0c0c0'" />
              <Label height="5" />
              <Button width="24" height="24" bkimage="file='PaiPaiChongzhi1.png' mask='0xffffffff'" textcolor="#FF000000" disabledtextcolor="#FFA7A6AA" align="center" normalimage="file='PaiPaiChongzhi1.png' mask='0xffffffff'" hotimage="file='allbtn_over.png' mask='0xffffffff'" pushedimage="file='allbtn_down.png' mask='0xffffffff'" />
              <Label height="5" />
              <Button width="24" height="24" bkimage="file='add.png' mask='0xffffffff'" textcolor="#FF000000" disabledtextcolor="#FFA7A6AA" align="center" normalimage="file='add.png' mask='0xffffffff'" hotimage="file='allbtn_over.png' mask='0xffffffff'" pushedimage="file='allbtn_down.png' mask='0xffffffff'" />
              <Label height="5" />
            </VerticalLayout>
          </VerticalLayout>
          <TabLayout name="tabs" bkimage="file='list_bk.png'">
            <HorizontalLayout>
              <FriendList name="friends" header="hidden" itemshowhtml="true" vscrollbar="true"  />
            </HorizontalLayout>
            <HorizontalLayout>
              <GroupList name="groups" header="hidden" itemshowhtml="true" vscrollbar="true"  />
            </HorizontalLayout>
            <HorizontalLayout>
              <MicroBlog name="microblog" header="hidden" itemshowhtml="true" vscrollbar="true"  />
            </HorizontalLayout>
          </TabLayout>
          <HorizontalLayout width="1" inset="0,1,1,0">
          </HorizontalLayout>
        </HorizontalLayout>

View Code

 

我自己的xml配置MainFrame.xml配置：

<HorizontalLayout >
                <VerticalLayout name="LeftMainPanel" width="35" padding="5,0,0,0" childpadding="5" >
                    <Button width="24" height="24" bkimage="file='mainleft_Qzonebtn24_qzonebtn1.png' mask='0xffffffff'" textcolor="#FF000000" disabledtextcolor="#FFA7A6AA" align="center" normalimage="file='mainleft_Qzonebtn24_qzonebtn1.png' mask='0xffffffff'" hotimage="file='allbtn_over.png' mask='0xffffffff'" pushedimage="file='allbtn_down.png' mask='0xffffffff'" />
                    <Button width="24" height="24" bkimage="file='mainleft_QQTradeCenter1.png' mask='0xffffffff'" textcolor="#FF000000" disabledtextcolor="#FFA7A6AA" align="center" normalimage="file='mainleft_QQTradeCenter1.png' mask='0xffffffff'" hotimage="file='allbtn_over.png' mask='0xffffffff'" pushedimage="file='allbtn_down.png' mask='0xffffffff'" />
                    <Button width="24" height="24" bkimage="file='paipai1.png' mask='0xffc0c0c0'" textcolor="#FF000000" disabledtextcolor="#FFA7A6AA" align="center" normalimage="file='paipai1.png' mask='0xffc0c0c0'" hotimage="file='allbtn_over.png' mask='0xffc0c0c0'" pushedimage="file='allbtn_down.png' mask='0xffc0c0c0'" />
                    <Button width="24" height="24" bkimage="file='PaiPaiChongzhi1.png' mask='0xffffffff'" textcolor="#FF000000" disabledtextcolor="#FFA7A6AA" align="center" normalimage="file='PaiPaiChongzhi1.png' mask='0xffffffff'" hotimage="file='allbtn_over.png' mask='0xffffffff'" pushedimage="file='allbtn_down.png' mask='0xffffffff'" />
                    <Button width="24" height="24" bkimage="file='add.png' mask='0xffffffff'" textcolor="#FF000000" disabledtextcolor="#FFA7A6AA" align="center" normalimage="file='add.png' mask='0xffffffff'" hotimage="file='allbtn_over.png' mask='0xffffffff'" pushedimage="file='allbtn_down.png' mask='0xffffffff'" />
                </VerticalLayout>
                <TabLayout name="tabs" bkimage="list_bk.png">
                    <HorizontalLayout>
                        <FriendList name="friends" header="hidden" itemshowhtml="true" vscrollbar="true" />
                    </HorizontalLayout>
                    <HorizontalLayout>
                    </HorizontalLayout>
                    <HorizontalLayout>
                    </HorizontalLayout>
                </TabLayout>
            </HorizontalLayout>

View Code

使用官方的xml界面显示时候最右边不会出现一道蓝边，而是用我的xml则会出现一道蓝边。很奇怪为何会出现该情况。

查看了HorizontalLayout的SetPos代码，发现错误的可能原因是：我在xml中HorizontalLayout子控件的VerticalLayout中使用padding="5,0,0,0"

int cxFixedRemaining = cxFixed;该变量cxFixedRamaining是对当前还剩多少宽度的统计。然后在每一行，当添加一个控件时候就会减去对应该控件的宽度cxFixedRemaining -= sz.cx，然后当到达最后一个控件的时候

if( iAdjustable == nAdjustables ) {
sz.cx = MAX(0, szRemaining.cx - rcPadding.right - cxFixedRemaining);
}

因为szRemaining.cx的计算方式在进入该if语句之前都会进行操作szRemaining.cx -= rcPadding.left;之后会进行操作szRemaining.cx -= sz.cx + m_iChildPadding + rcPadding.right;

因为cxFixedRemaining的计算跟szRemaining.cx的计算方式有差异就会出现对应的一道蓝边的状况。

所以这里需要修改的操作是在进行cxFixedRemianing -= sz.cx时候修改成cxFixedRemaining -= sz.cx+rcPadding.left+rcPadding.right;

这样就跟szRemian.cx 的计算数据相吻合了。

 

同理也需要在VerticalLayout的SetPos中进行相应的修改。