美文网首页程序员
3 SkinUI视图组件和界面编程

3 SkinUI视图组件和界面编程

作者: 吴忠亮 | 来源:发表于2017-01-07 12:30 被阅读452次

    所有的组件都提供了两种方式来控制组件的行为。

    • 在XML布局中通过XML属性进行控制
    • 在C++程序代码中通过调用方法进行控制

    SkinUI推荐使用XML布局文件,而不是C++代码来定义用户界面。实际上,不管使用哪种方式,它们控制SkinUI用户界面行为的本质是一样的。大部分时候,控制UI组件的XML属性都有对应的方法。

    3.1 视图组件(CSkinView)

    CSkinView是所有UI组件的基类,包含的XML属性和方法所有UI组件都可以使用。
    下面是CSkinView类常用的XML属性和相关方法:

    3.1.1设置组件 Id

    • 通过XML属性控制如下:
    Id="1001"
    
    • 通过C++程序代码调用方法控制如下:
    virtual void SetId(LONG nId);
    

    3.1.2设置组件文本

    • 通过XML属性控制如下:
    Text="IDS_OK"
    
    • 通过C++程序代码调用方法控制如下:
    virtual void SetText(const tstring& strText);
    

    3.1.3设置组件简单提示信息

    • 通过XML属性控制如下:
    Tips="IDS_CLOSE_TIPS"
    
    • 通过C++程序代码调用方法控制如下:
    virtual void SetTips(const tstring& strTips);
    

    3.1.4设置组件复杂提示信息

    • 通过XML属性控制如下:
    SkinTips="SkinTips.xml"
    
    • 通过C++程序代码调用方法控制如下:
    virtual void SetSkinTipsLayout(const tstring& strLayout);
    

    3.1.5设置组件复杂提示信息的偏移量

    • 通过XML属性控制如下:
    SkinTipsOffset="-10,-10"
    
    • 通过C++程序代码调用方法控制如下:
    virtual void SetSkinTipsOffset(const CPoint& point);
    

    3.1.6设置组件是否可见

    • 通过XML属性控制如下:
    Visible="false"
    
    • 通过C++程序代码调用方法控制如下:
    virtual void SetVisible(BOOL bVisible);
    

    3.1.7设置组件是否可用

    • 通过XML属性控制如下:
    Enable="false"
    
    • 通过C++程序代码调用方法控制如下:
    virtual void SetEnable(BOOL bEnabled);
    

    3.1.8设置组件是否获得焦点

    • 通过XML属性控制如下:
    Focused="true"
    
    • 通过C++程序代码调用方法控制如下:
    virtual void SetFocus(BOOL bFocus);
    

    3.1.9设置组件前景图像

    • 通过XML属性控制如下:
    Image="CheckBox.png"
    
    • 通过C++程序代码调用方法控制如下:
    virtual void SetImage(const tstring& strImage);
    

    3.1.10设置组件前景颜色

    • 通过XML属性控制如下:
    Color="ID_COLOR_RED"
    
    • 通过C++程序代码调用方法控制如下:
    virtual void SetColor(const tstring& strColor);
    

    3.1.11设置组件边框颜色

    • 通过XML属性控制如下:
    Border="ID_COLOR_BORDER"
    
    • 通过C++程序代码调用方法控制如下:
    virtual void SetBorderColor(const tstring& strColor);
    

    3.1.12设置组件背景图片

    • 通过XML属性控制如下:
    BkgImage="bkg.png"
    
    • 通过C++程序代码调用方法控制如下:
    virtual void SetBkgImage(const tstring& strImage);
    

    3.1.13设置组件背景颜色

    • 通过XML属性控制如下:
    BkgColor="ID_COLOR_BKG"
    
    • 通过C++程序代码调用方法控制如下:
    virtual void SetBkgColor(const tstring& strColor);
    

    3.1.14设置组件菜单

    • 通过XML属性控制如下:
    Menu="EditMenu.xml"
    
    • 通过C++程序代码调用方法控制如下:
    virtual void SetMenu(const tstring& strMenu);
    

    3.1.15设置组件最大宽度

    • 通过XML属性控制如下:
    MaxWidth="800"
    
    • 通过C++程序代码调用方法控制如下:
    virtual void SetMaxWidth(LONG nMaxWidth);
    

    3.1.16设置组件最大高度

    • 通过XML属性控制如下:
    MaxHeight="600"
    
    • 通过C++程序代码调用方法控制如下:
    virtual void SetMaxHeight(LONG nMaxHeight);
    

    3.1.19设置组件模式

    • 通过XML属性控制如下:
    Mode="1"
    
    • 通过C++程序代码调用方法控制如下:
    virtual void SetMode(LONG nMode);
    

    3.1.20设置组件接受的拖放类型

    • 通过XML属性控制如下:
    Drag="File"
    
    • 通过C++程序代码调用方法控制如下:
    virtual void SetDrag(const vector<UINT>& vecDrag);
    

    3.1.21设置组件是否允许被拖动

    • 通过XML属性控制如下:
    AllowDrag="true"
    
    • 通过C++程序代码调用方法控制如下:
    virtual void SetAllowDrag(BOOL bAllow);
    

    3.1.22设置组件外边距

    • 通过XML属性控制如下:
    Margin="5,5,5,5"
    
    • 通过C++程序代码调用方法控制如下:
    virtual void SetLayoutMargin(LayoutMargin layoutMargin);
    

    3.1.23设置组件光标

    • 通过XML属性控制如下:
    Cursor="32513"
    
    • 通过C++程序代码调用方法控制如下:
    virtual void SetCursor(LONG nCursor);
    

    3.1.24设置组件重绘时是否需要重绘整个窗口

    • 通过XML属性控制如下:
    RedrawOwner="true"
    
    • 通过C++程序代码调用方法控制如下:
    virtual void SetRedrawOwner(BOOL bRedrawOwner);
    

    3.1.25设置组件重绘时是否需要重绘父组件

    • 通过XML属性控制如下:
    RedrawParent="true"
    
    • 通过C++程序代码调用方法控制如下:
    virtual void SetRedrawParent(BOOL bRedrawParent);
    

    3.1.26设置该组件的子组件重绘时是否需要重绘该组件

    • 通过XML属性控制如下:
    RedrawAllChild="true"
    
    • 通过C++程序代码调用方法控制如下:
    virtual void SetRedrawAllChild(BOOL bRedrawAllChild);
    

    3.1.27设置组件的布局XML文件

    • 通过XML属性控制如下:
    Layout="Button.xml"
    
    • 通过C++程序代码调用方法控制如下:
    virtual void SetLayout(const tstring& strLayout);
    

    3.1.28设置组件布局宽度

    • 通过XML属性控制如下:
    LayoutWidth="WrapContent"
    
    • 通过C++程序代码调用方法控制如下:
    virtual void SetLayoutWidth(LONG nLayoutWidth);
    

    3.1.29设置组件布局高度

    • 通过XML属性控制如下:
    LayoutHeight="FillParent"
    
    • 通过C++程序代码调用方法控制如下:
    virtual void SetLayoutHeight(LONG nLayoutHeight);
    

    3.1.30设置组件相对于父组件的对齐方式

    • 通过XML属性控制如下:
    LayoutAlignment="Left,Top"
    
    • 通过C++程序代码调用方法控制如下:
    virtual void SetLayoutAlignment(LayoutAlignment layoutAlignment);
    

    3.1.31设置组件右边距兄弟组件左边的距离

    • 通过XML属性控制如下:
    ToLeftOf="1001,10"
    
    • 通过C++程序代码调用方法控制如下:
    virtual void SetLayoutToLeftOf(LONG nId, LONG nOffset);
    

    3.1.32设置组件下边距兄弟组件上边的距离

    • 通过XML属性控制如下:
    ToTopOf="1001,10"
    
    • 通过C++程序代码调用方法控制如下:
    virtual void SetLayoutToTopOf(LONG nId, LONG nOffset);
    

    3.1.33设置组件左边距兄弟组件右边的距离

    • 通过XML属性控制如下:
    ToRightOf="1001,10"
    
    • 通过C++程序代码调用方法控制如下:
    virtual void SetLayoutToRightOf(LONG nId, LONG nOffset);
    

    3.1.34设置组件上边距兄弟组件下边的距离

    • 通过XML属性控制如下:
    ToBottomOf="1001,10"
    
    • 通过C++程序代码调用方法控制如下:
    virtual void SetLayoutToBottomOf(LONG nId, LONG nOffset);
    

    3.1.35设置组件左边距兄弟组件左边的距离

    • 通过XML属性控制如下:
    AlignLeftOf="1001,10"
    
    • 通过C++程序代码调用方法控制如下:
    virtual void SetLayoutAlignLeftOf(LONG nId, LONG nOffset);
    

    3.1.36设置组件上边距兄弟组件上边的距离

    • 通过XML属性控制如下:
    AlignTopOf="1001,10"
    
    • 通过C++程序代码调用方法控制如下:
    virtual void SetLayoutAlignTopOf(LONG nId, LONG nOffset);
    

    3.1.37设置组件右边距兄弟组件右边的距离

    • 通过XML属性控制如下:
    AlignRightOf="1001,10"
    
    • 通过C++程序代码调用方法控制如下:
    virtual void SetLayoutAlignRightOf(LONG nId, LONG nOffset);
    

    3.1.38设置组件下边距兄弟组件下边的距离

    • 通过XML属性控制如下:
    AlignBottomOf="1001,10"
    
    • 通过C++程序代码调用方法控制如下:
    virtual void SetLayoutAlignBottomOf(LONG nId, LONG nOffset);
    

    3.1.39设置组件左边距父组件左边的距离

    • 通过XML属性控制如下:
    AlignParentLeft="1001,10"
    
    • 通过C++程序代码调用方法控制如下:
    virtual void SetLayoutAlignParentLeft(LONG nOffset);
    

    3.1.40设置组件上边距父组件上边的距离

    • 通过XML属性控制如下:
    AlignParentTop="1001,10"
    
    • 通过C++程序代码调用方法控制如下:
    virtual void SetLayoutAlignParentTop(LONG nOffset);
    

    3.1.41设置组件右边距父组件右边的距离

    • 通过XML属性控制如下:
    AlignParentRight="1001,10"
    
    • 通过C++程序代码调用方法控制如下:
    virtual void SetLayoutAlignParentRight(LONG nOffset);
    

    3.1.42设置组件下边距父组件下边的距离

    • 通过XML属性控制如下:
    AlignParentBottom="1001,10"
    
    • 通过C++程序代码调用方法控制如下:
    virtual void SetLayoutAlignParentBottom(LONG nOffset);
    

    3.1.43设置组件中心与父组件中心水平方向的距离

    • 通过XML属性控制如下:
    AlignParentHorizontalCenter="10"
    
    • 通过C++程序代码调用方法控制如下:
    virtual void SetLayoutAlignParentHorizontalCenter(LONG nOffset);
    

    3.1.44设置组件中心与父组件中心垂直方向的距离

    • 通过XML属性控制如下:
    AlignParentVerticalCenter="10"
    
    • 通过C++程序代码调用方法控制如下:
    virtual void SetLayoutAlignParentVerticalCenter(LONG nOffset);
    

    3.2 对话框组件(CSkinDialog)

    对于CSkinDialog类而言,它是所有对话框的基类,因此包含的XML属性和方法是所有对话框都可以使用。
    下面是CSkinDialog类常用的XML属性、相关方法及简要说明:

    3.2.1设置对话框是否可以改变大小

    • 通过XML属性控制如下:
    Resize="true"
    
    • 通过C++程序代码调用方法控制如下:
    void SetResize(BOOL bResize);
    

    3.2.2设置对话框是否可以移动

    • 通过XML属性控制如下:
    AllowMove="false"
    
    • 通过C++程序代码调用方法控制如下:
    void SetAllowMove(BOOL bAllow);
    

    3.2.3设置对话框最小宽度

    • 通过XML属性控制如下:
    MinWidth="400"
    
    • 通过C++程序代码调用方法控制如下:
    void SetMinWidth(LONG nMinWidth);
    

    3.2.4设置对话框最小高度

    • 通过XML属性控制如下:
    MinHeight="300"
    
    • 通过C++程序代码调用方法控制如下:
    void SetMinHeight(LONG nMinHeight);
    

    3.2.5设置对话框默认宽度

    • 通过XML属性控制如下:
    DefaultWidth="400"
    
    • 通过C++程序代码调用方法控制如下:
    void SetDefaultWidth(LONG nDefaultWidth);
    

    3.2.6设置对话框默认高度

    • 通过XML属性控制如下:
    DefaultHeight="300"
    
    • 通过C++程序代码调用方法控制如下:
    void SetDefaultHeight(LONG nDefaultHeight);
    

    3.2.7设置对话框标题栏高度

    • 通过XML属性控制如下:
    TitleHeight="400"
    
    • 通过C++程序代码调用方法控制如下:
    void SetTitleHeight(LONG nTitleHeight);
    

    3.2.8设置对话框主题高度

    • 通过XML属性控制如下:
    ThemeHeight="300"
    
    • 通过C++程序代码调用方法控制如下:
    void SetThemeHeight(LONG nThemeHeight);
    

    3.2.9设置对话框标题

    • 通过XML属性控制如下:
    Caption="400"
    
    • 通过C++程序代码调用方法控制如下:
    void SetTitleCaption(const tstring& strCaption);
    

    3.2.10设置对话框系统按钮

    • 通过XML属性控制如下:
    SysButton="300"
    
    • 通过C++程序代码调用方法控制如下:
    void SetSysButton(const tstring& strSysStyle);
    

    3.1.11设置对话框是否允许毛玻璃效果

    • 通过XML属性控制如下:
    OpenAreo="false"
    
    • 通过C++程序代码调用方法控制如下:
    void OpenAreo(BOOL bOpen);
    

    3.1.12设置对话框图标

    • 通过XML属性控制如下:
    Icon="128"
    
    • 通过C++程序代码调用方法控制如下:
    void SetTitleIcon(LONG nIconId);
    

    3.2 界面编程

    3.2.1 使用XML布局文件

    SkinUI推荐使用XML布局文件来控制视图,这样不仅简单明了,而且可以将应用的视图控制逻辑从C++代码中分离出来,放入XML文件中控制,从而更好的体现逻辑与界面分离的原则。

    在SkinUI应用的bin\debug\res\HelloWorld\layout\目录下定义一个文件名为【SkinDialog.xml】的布局文件。布局文件的格式如下:

    <SkinDialog DefaultWidth="400" DefaultHeight="300" SysButton="CLOSE" Icon="128" Caption="IDS_CONTROL_SHOW1" Animation="SizeChange" EscCloseDialog="true">
        <SkinTextView Id="1" FontColor="ID_COLOR_TEXT" Text="IDS_CONTROL_SHOW_TEXT1" AlignParentLeft="30" AlignParentRight="30" AlignParentTop="45" LayoutHeight="24" FontStyle="ID_FONT_NORMAL"/>
    </SkinDialog>
    

    C++代码可以通过以下方式使用该布局文件:

    • 作为模态对话框的布局文件
        CSkinDialog dlg(_T("SkinDialog.xml"));
        dlg.DoModal(m_hWnd);
    
    • 作为非模态对话框的布局文件
        CSkinDialog* pSkinDialog = new CSkinDialog(_T("SkinDialog.xml"));
        if(pSkinDialog)
        {
            if(!pSkinDialog->Create())
            {
                delete pSkinDialog;
            }
            else
            {
                pSkinDialog->ShowWindow(SW_SHOW);
            }
        }
    

    3.2.2 使用C++代码

    虽然SkinUI推荐使用XML布局文件来控制UI界面,但是如果开发者愿意,SkinUI允许开发者完全抛弃XML布局文件,完全在C++代码中控制UI界面。如果希望在代码中控制UI界面,那么所有的UI组件都将通过new关键字创建出来,然后以合适的方式搭建在一起即可。

    • 头文件
    class CMainDialog : public CSkinDialog
    {
    public:
        CMainDialog();
    public:
        virtual void OnInitDialog();
    };
    
    • 源文件
    #include "stdafx.h"
    #include "MainDialog.h"
    CMainDialog::CMainDialog()
    : CSkinDialog(_T("MainDialog.xml"))
    {
    }
    void CMainDialog::OnInitDialog()
    {
        CSkinDialog::OnInitDialog();
        CSkinTextView* pTextView = new CSkinTextView(this);
        if(pTextView)
        {
            pTextView->SetId(1);
            pTextView->SetFontColor(_T("ID_COLOR_TEXT"));
            pTextView->SetText(_T("IDS_CONTROL_SHOW_TEXT1"));
            pTextView->SetLayoutAlignParentLeft(30);
            pTextView->SetLayoutAlignParentRight(30);
            pTextView->SetLayoutAlignParentTop(45);
            pTextView->SetLayoutHeight(24);
            pTextView->SetFontStyle(_T("ID_FONT_NORMAL"));
        }
    }
    

    3.2.3 XML布局文件和C++代码混合

    完全使用C++代码来控制UI界面不仅繁琐,而且不利于解耦。而完全使用XML布局文件来控制UI界面虽然方便、便捷,但难免有失灵活。因此,有些时候可能需要混合使用XML布局文件和代码来控制UI界面。

    当混合使用XML布局文件和代码来控制UI界面时,习惯上把变化小、行为比较固定的组件放在XML布局文件中管理,而那些控制比较复杂的组件则交给C++代码来管理。

    例如下面的应用,我们先在布局文件中定义一个简单的树控件,该布局文件的代码如下:

    <SkinDialog DefaultWidth="400" DefaultHeight="300" SysButton="CLOSE" Icon="128" Caption="IDS_CONTROL_SHOW12" Animation="SizeChange">
        <SkinRelativeLayout AlignParentLeft="15" AlignParentRight="15" AlignParentTop="35" AlignParentBottom="15" BkgColor="ID_COLOR_WHITE" Border="ID_COLOR_LINE">
            <SkinTreeView Id="101" AlignParentLeft="1" AlignParentRight="1" AlignParentTop="1" AlignParentBottom="1" VScrollBar="VScrollBar.xml">
            </SkinTreeView>
        </SkinRelativeLayout>
    </SkinDialog>
    

    上面的布局文件只是定义了一个简单的树控件。接下来我们会在程序中获取该树控件,并往该树控件添加子节点。下面是代码:

    void CTreeDialog::OnInitDialog()
    {
        CSkinDialog::OnInitDialog();
        CSkinTreeView* pTreeView = static_cast<CSkinTreeView*>(GetChildById(IDC_TREEVIEW));
        if(pTreeView)
        {
            for(int64 i = 0; i < 10; ++i)
            {
                CSkinTreeItem* pRootItem = new CSkinTreeItem(pTreeView);
                if(pRootItem)
                {
                    pRootItem->SetLayoutHeight(30);
                    pRootItem->SetLayout(_T("TreeItem.xml"));
                    pRootItem->SetImage(_T("ListItem.png"));
                    pTreeView->InsertItem(NULL, pRootItem);
    
                    for(int64 j = 0; j < 10; ++j)
                    {
                        CSkinTreeItem* pTreeItem = new CSkinTreeItem(pTreeView);
                        if(pTreeItem)
                        {
                            pTreeItem->SetLayoutHeight(30);
                            pTreeItem->SetLayout(_T("TreeItem.xml"));
                            pTreeItem->SetImage(_T("ListItem.png"));
                            pTreeView->InsertItem(pRootItem, pTreeItem);
                        }
                    }
                }
            }
            pTreeView->ResetSortedItem();
        }
    }
    

    以上XML布局文件和C++代码混合,得到的窗口界面截图如下:


    XML布局文件和C++代码混合

    相关文章

      网友评论

        本文标题:3 SkinUI视图组件和界面编程

        本文链接:https://www.haomeiwen.com/subject/rdvbuttx.html