12 SkinUI動(dòng)畫、國際化、字體大小和資源發(fā)布

12.1 窗口動(dòng)畫

可以給對話框布局文件的【SkinDialog】節(jié)點(diǎn)，加上動(dòng)畫屬性【Animation="xxx"】。當(dāng)對話框打開和關(guān)閉時(shí)，顯示窗口動(dòng)畫。

12.1.1 SizeChange動(dòng)畫

SizeChange動(dòng)畫有一個(gè)固定點(diǎn)。默認(rèn)情況下，固定點(diǎn)在窗口正中心。

固定中心點(diǎn)的SizeChange動(dòng)畫

  • 對話框打開時(shí)，中心像素點(diǎn)保持不動(dòng)，其他像素點(diǎn)由中心點(diǎn)向四個(gè)角展開，透明度由完全透明到完全不透明；
  • 對話框關(guān)閉時(shí)，中心像素點(diǎn)保持不動(dòng)，其他像素點(diǎn)由四個(gè)角向中心點(diǎn)收攏，透明度由完全不透明到完全透明。
固定中心點(diǎn)

布局文件如下：

<SkinDialog DefaultWidth="400" DefaultHeight="300" SysButton="CLOSE" Animation="SizeChange">
</SkinDialog>

固定左上角的SizeChange動(dòng)畫

  • 對話框打開時(shí)，左上角像素點(diǎn)保持不動(dòng)，其他像素點(diǎn)由左上角向其他角展開，透明度由完全透明到完全不透明；
  • 對話框關(guān)閉時(shí)，左上角像素點(diǎn)保持不動(dòng)，其他像素點(diǎn)由其他角向左上角收攏，透明度由完全不透明到完全透明。
固定左上角

布局文件如下：

<SkinDialog DefaultWidth="400" DefaultHeight="300" SysButton="CLOSE" Animation="SizeChange" FixedPoint="0,0">
</SkinDialog>

固定右上角的SizeChange動(dòng)畫

  • 對話框打開時(shí)，右上角像素點(diǎn)保持不動(dòng)，其他像素點(diǎn)由右上角向其他角展開，透明度由完全透明到完全不透明；
  • 對話框關(guān)閉時(shí)，右上角像素點(diǎn)保持不動(dòng)，其他像素點(diǎn)由其他角向右上角收攏，透明度由完全不透明到完全透明。
固定右上角

布局文件如下：

<SkinDialog DefaultWidth="400" DefaultHeight="300" SysButton="CLOSE" Animation="SizeChange" FixedPoint="400,0">
</SkinDialog>

固定右下角的SizeChange動(dòng)畫

  • 對話框打開時(shí)，右下角像素點(diǎn)保持不動(dòng)，其他像素點(diǎn)由右下角向其他角展開，透明度由完全透明到完全不透明；
  • 對話框關(guān)閉時(shí)，右下角像素點(diǎn)保持不動(dòng)，其他像素點(diǎn)由其他角向右下角收攏，透明度由完全不透明到完全透明。
固定右下角

布局文件如下：

<SkinDialog DefaultWidth="400" DefaultHeight="300" SysButton="CLOSE" Animation="SizeChange"FixedPoint="400,300">
</SkinDialog>

固定左下角的SizeChange動(dòng)畫

  • 對話框打開時(shí)，左下角像素點(diǎn)保持不動(dòng)，其他像素點(diǎn)由左下角向其他角展開，透明度由完全透明到完全不透明；
  • 對話框關(guān)閉時(shí)，左下角像素點(diǎn)保持不動(dòng)，其他像素點(diǎn)由其他角向左下角收攏，透明度由完全不透明到完全透明。
固定左下角

布局文件如下：

<SkinDialog DefaultWidth="400" DefaultHeight="300" SysButton="CLOSE" Animation="SizeChange"FixedPoint="0,300">
</SkinDialog>

12.1.2 LeftRightExpand動(dòng)畫

LeftRightExpand有一條固定線。默認(rèn)情況下，固定線為窗口居中垂直線。

固定線為窗口居中垂直線的LeftRightExpand動(dòng)畫

  • 對話框打開時(shí)，居中垂直線像素點(diǎn)保持不動(dòng)，其他像素點(diǎn)由居中垂直線向左右展開，透明度由完全透明到完全不透明；
  • 對話框關(guān)閉時(shí)，居中垂直線像素點(diǎn)保持不動(dòng)，其他像素點(diǎn)由左右向居中垂直線收攏，透明度由完全不透明到完全透明。
左右展開固定中間

布局文件如下：

<SkinDialog DefaultWidth="400" DefaultHeight="300" SysButton="CLOSE" Animation="LeftRightExpand">
</SkinDialog>

固定線為左邊垂直線的LeftRightExpand動(dòng)畫

  • 對話框打開時(shí)，左邊垂直線像素點(diǎn)保持不動(dòng)，其他像素點(diǎn)由左邊垂直線向右展開，透明度由完全透明到完全不透明；
  • 對話框關(guān)閉時(shí)，左邊垂直線像素點(diǎn)保持不動(dòng)，其他像素點(diǎn)由右向左邊垂直線收攏，透明度由完全不透明到完全透明。
左右展開固定左邊

布局文件如下：

<SkinDialog DefaultWidth="400" DefaultHeight="300" SysButton="CLOSE" Animation="LeftRightExpand" FixedPoint="0,0">
</SkinDialog>

固定線為右邊垂直線的LeftRightExpand動(dòng)畫

  • 對話框打開時(shí)，左邊垂直線像素點(diǎn)保持不動(dòng)，其他像素點(diǎn)由左邊垂直線向右展開，透明度由完全透明到完全不透明；
  • 對話框關(guān)閉時(shí)，左邊垂直線像素點(diǎn)保持不動(dòng)，其他像素點(diǎn)由右向左邊垂直線收攏，透明度由完全不透明到完全透明。
左右展開固定右邊

布局文件如下：

<SkinDialog DefaultWidth="400" DefaultHeight="300" SysButton="CLOSE" Animation="LeftRightExpand" FixedPoint="400,300">
</SkinDialog>

12.1.3 TopBottomExpand動(dòng)畫

TopBottomExpand有一條固定線。默認(rèn)情況下，固定線為窗口居中垂直線。

固定線為窗口居中水平線的TopBottomExpand動(dòng)畫

  • 對話框打開時(shí)，居中水平線像素點(diǎn)保持不動(dòng)，其他像素點(diǎn)由居中水平線向上下展開，透明度由完全透明到完全不透明；
  • 對話框關(guān)閉時(shí)，居中水平線像素點(diǎn)保持不動(dòng)，其他像素點(diǎn)由上下向居中水平線收攏，透明度由完全不透明到完全透明。
上下展開固定中間

布局文件如下：

<SkinDialog DefaultWidth="400" DefaultHeight="300" SysButton="CLOSE" Animation="TopBottomExpand">
</SkinDialog>

固定線為上邊水平線的TopBottomExpand動(dòng)畫

  • 對話框打開時(shí)，上邊水平線像素點(diǎn)保持不動(dòng)，其他像素點(diǎn)由上邊水平線向下展開，透明度由完全透明到完全不透明；
  • 對話框關(guān)閉時(shí)，上邊水平線像素點(diǎn)保持不動(dòng)，其他像素點(diǎn)由下向上邊水平線收攏，透明度由完全不透明到完全透明。
上下展開固定上邊

布局文件如下：

<SkinDialog DefaultWidth="400" DefaultHeight="300" SysButton="CLOSE" Animation="TopBottomExpand" FixedPoint="0,0">
</SkinDialog>

固定線為下邊水平線的TopBottomExpand動(dòng)畫

  • 對話框打開時(shí)，下邊水平線像素點(diǎn)保持不動(dòng)，其他像素點(diǎn)由下邊水平線向上展開，透明度由完全透明到完全不透明；
  • 對話框關(guān)閉時(shí)，下邊水平線像素點(diǎn)保持不動(dòng)，其他像素點(diǎn)由上向下邊水平線收攏，透明度由完全不透明到完全透明。
上下展開固定下邊

布局文件如下：

<SkinDialog DefaultWidth="400" DefaultHeight="300" SysButton="CLOSE" Animation="TopBottomExpand" FixedPoint="400,300">
</SkinDialog>

12.2 切換動(dòng)畫

可以給布局文件的【SwitchAnimationHost】節(jié)點(diǎn)，加上動(dòng)畫屬性【Animation="xxx"】。
SkinUI內(nèi)置以下兩種切換動(dòng)畫：

  • LeftRightSlide動(dòng)畫。切換時(shí)，內(nèi)容左右滑動(dòng)
  • TopBottomSlide動(dòng)畫。切換時(shí)，內(nèi)容上下滑動(dòng)

當(dāng)需要切換子組件時(shí)，SkinUI調(diào)用類【CSwitchAnimationHost】的以下接口：

  • C++接口
void ShowView(LONG nId);
void ShowView(CSkinView* pView);
  • 通常情況下，切換動(dòng)畫搭配【SkinAnimationGroup】使用，請看下面的示例：
<SkinDialog DefaultWidth="400" DefaultHeight="300" SysButton="CLOSE" Icon="128" Caption="IDS_SWITCH_ANIMATION1" Animation="SizeChange" ThemeHeight="65">
    <SkinAnimationGroup Id="100" LayoutWidth="210" LayoutHeight="30" AlignParentLeft="0" AlignParentTop="35">
        <SkinRelativeLayout LayoutWidth="FillParent" LayoutHeight="FillParent">
            <SkinRadioButton Id="101" LayoutWidth="100" LayoutHeight="FillParent" ChildText1="TabButton1" Image="TabButton.png" Layout="TabButton.xml" BindView="1100" AlignParentLeft="0" Checked="true"/>
            <SkinRadioButton Id="102" LayoutWidth="100" LayoutHeight="FillParent" ChildText1="TabButton2" Image="TabButton.png" Layout="TabButton.xml" BindView="1200" AlignParentLeft="100" Radius="5"/>
        </SkinRelativeLayout>
    </SkinAnimationGroup>
    <SwitchAnimationHost Id="1000" AlignParentLeft="15" ToBottomOf="100,5" AlignParentRight="15" AlignParentBottom="15" Animation="LeftRightSlide">
        <SkinRelativeLayout Id="1100" LayoutWidth="FillParent" LayoutHeight="FillParent">
        </SkinRelativeLayout>
        <SkinRelativeLayout Id="1200" LayoutWidth="FillParent" LayoutHeight="FillParent" Visible="false">
        </SkinRelativeLayout>
    </SwitchAnimationHost>
</SkinDialog>

以上的代碼，當(dāng)選中SkinRadioButton時(shí)，會(huì)以動(dòng)畫的方式顯示屬性BindView綁定的SkinRelativeLayout。

12.3 側(cè)邊欄動(dòng)畫

類【CSlideAnimationHost】提供側(cè)邊欄動(dòng)畫的能力。

側(cè)邊欄動(dòng)畫

當(dāng)需要顯示側(cè)邊欄時(shí)，SkinUI調(diào)用類【CSlideAnimationHost】的以下接口：

  • C++接口
void Show();

當(dāng)需要隱藏側(cè)邊欄時(shí)，SkinUI調(diào)用類【CSlideAnimationHost】的以下接口：

  • C++接口
void Close();

12.4 部分隱藏動(dòng)畫

類【CHideAnimationHost】提供側(cè)邊欄動(dòng)畫的能力。

SkinUI內(nèi)置以下兩種切換動(dòng)畫：

  • LeftRightHide動(dòng)畫。隱藏時(shí)，內(nèi)容左右滑動(dòng)
  • TopBottomHide動(dòng)畫。隱藏時(shí)，內(nèi)容上下滑動(dòng)
部分隱藏動(dòng)畫 LeftRightHide
部分隱藏動(dòng)畫 TopBottomHide

當(dāng)需要顯示隱藏的部分時(shí)，調(diào)用類【CHideAnimationHost】的以下接口：

  • C++接口
void ShowView(LONG nId);
void ShowView(CSkinView* pView);

當(dāng)需要隱藏需要隱藏的部分時(shí)，調(diào)用類【CHideAnimationHost】的以下接口：

  • C++接口
void HideView(LONG nId);
void HideView(CSkinView* pView);

13 國際化

SkinUI默認(rèn)加載資源目錄【string】下文件夾【2052】下面的字符串。

  • 獲得當(dāng)前字符串語言
tstring strLanguage = _T("2052");
SkinUI::GetAppConfig(APP_CONFIG_STRING_LANGUAGE, strLanguage);

在程序運(yùn)行過程中，執(zhí)行下面的代碼，可以變更程序加載的字符串資源，重啟程序后生效。

  • 設(shè)置加載資源目錄【string】下文件夾【2052】下面的簡體中文字符串
SkinUI::SetAppConfig(APP_CONFIG_STRING_LANGUAGE, _T("2052"));
  • 設(shè)置加載資源目錄【string】下文件夾【1033】下面的英文字符串
SkinUI::SetAppConfig(APP_CONFIG_STRING_LANGUAGE, _T("1033"));
  • 設(shè)置加載資源目錄【string】下文件夾【1028】下面的繁體中文字符串
SkinUI::SetAppConfig(APP_CONFIG_STRING_LANGUAGE, _T("1028"));

14 文字大小

SkinUI可以將文字整體變大或變小，默認(rèn)使用正常大小的文字。

  • 獲得當(dāng)前文字大小變更
LONG nFontSize = 0;
SkinUI::GetAppConfig(APP_CONFIG_FONT_SIZE_CHANGE, nFontSize);

在程序運(yùn)行過程中，執(zhí)行下面的代碼，可以將文字整體變大或變小，不需要重啟程序即可生效。

  • 將字體整體變大兩個(gè)字號(hào)
SkinUI::ChangeFontSize(2);
  • 將字體整體變小兩個(gè)字號(hào)
SkinUI::ChangeFontSize(-2);

15 資源發(fā)布

開發(fā)者需要在【InitInstance】時(shí)設(shè)置資源發(fā)布類型。

15.1發(fā)布資源文件

直接將res目錄原樣放在安裝包。發(fā)布時(shí)，需要再帶完整的【res】目錄。

調(diào)用以下方法，將資源發(fā)布類型設(shè)置為【發(fā)布資源文件】：

BOOL CApp::InitInstance(ResType& resType)
{
    resType = RT_FILE;
    return TRUE;
}
優(yōu)點(diǎn)：
  • 更新版本時(shí)，只需更新變化的資源，不需要更新整個(gè)資源目錄；
缺點(diǎn)：
  • 可以隨意獲得和修改資源文件；

15.2 發(fā)布資源文件包

將res目錄下的文件夾打包成【xxx.res】文件。發(fā)布時(shí)，只需攜帶【xxx.res】即可，不需要再帶完整的【res】目錄。

調(diào)用以下方法，將資源發(fā)布類型設(shè)置為【發(fā)布資源文件包】：

BOOL CApp::InitInstance(ResType& resType)
{
    resType = RT_FILE_PACKAGE;
    return TRUE;
}
優(yōu)點(diǎn)：
  • 資源文件加密，無法隨意獲得和修改資源文件；
缺點(diǎn)：
  • 更新版本時(shí)，需要更新整個(gè)資源目錄；

15.3發(fā)布RC資源文件包

將res目錄下的文件夾打包成【xxx.res】文件，然后以資源文件的方式，打包到exe文件中。發(fā)布時(shí)，資源文件已經(jīng)包含在exe文件，不需要帶任何資源文件。

調(diào)用以下方法，將資源發(fā)布類型設(shè)置為【發(fā)布RC資源文件包】：

BOOL CApp::InitInstance(ResType& resType)
{
    resType = RT_RC_PACKAGE;
    return TRUE;
}
優(yōu)點(diǎn)：
  • 資源文件加密，無法隨意獲得和修改資源文件；
  • 只需一個(gè)exe文件即可運(yùn)行，在某些情況下非常有用。
缺點(diǎn)：
  • 更新版本時(shí)，需要更新整個(gè)資源和exe文件；
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容