3 SkinUI視圖組件和界面編程

所有的組件都提供了兩種方式來控制組件的行為。

  • 在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++代碼混合
最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • Spring Cloud為開發人員提供了快速構建分布式系統中一些常見模式的工具（例如配置管理，服務發現，斷路器，智...
    卡卡羅2017閱讀 134,973評論 19贊 139
  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 173,459評論 25贊 708
  • 1. Java基礎部分 基礎部分的順序：基本語法，類相關的語法，內部類的語法，繼承相關的語法，異常的語法，線程的語...
    子非魚_t_閱讀 31,767評論 18贊 399
  • 很多人都認為在畢業后，就會與朋友慢慢的減少聯系，大部分是有吧。 可是我們五個人沒有，大家現在都...
    微笑一百點閱讀 140評論 0贊 0
  • 0、Iterator迭代器 父類引用指向子類的實現的典型應用。Snip20160724_98.png 使用 一、增...
    PanPan1127閱讀 218評論 0贊 1