美文网首页程序员手机移动程序开发
5 第二组UI组件:文本、超链、线条和图片框

5 第二组UI组件:文本、超链、线条和图片框

作者: 吴忠亮 | 来源:发表于2017-01-09 12:50 被阅读135次

    5.1 文本

    文本由CSkinTextView类来代表,继承于CSkinView,支持CSkinView的所有属性和方法。

    文本

    布局文件如下:

    <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"/>
        <SkinTextView Id="1" FontColor="ID_COLOR_TEXT" Text="IDS_CONTROL_SHOW_TEXT2" AlignParentLeft="30" AlignParentTop="100" AlignParentRight="30" LayoutHeight="72" FontStyle="ID_FONT_NORMAL" MultiLine="true"/>
        <SkinTextView Id="1" FontColor="ID_COLOR_RED" Text="IDS_CONTROL_SHOW_TEXT3" AlignParentLeft="30" AlignParentTop="200" LayoutHeight="72" LayoutWidth="275" FontStyle="ID_FONT_NORMAL" MultiLine="true"/>
    </SkinDialog>
    

    下面是CSkinTextView类特有的XML属性和相关方法:

    5.1.1设置文本是单行还是多行

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

    5.1.2设置文本颜色

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

    5.1.3设置文本字体

    • 通过XML属性控制如下:
    FontStyle="ID_FONT_NORMAL"
    
    • 通过C++程序代码调用方法控制如下:
    void SetFontStyle(const tstring& strFontStyle);
    

    5.1.4设置文本水平对齐方式

    • 通过XML属性控制如下:
    HorzAlignment="Left"
    
    • 通过C++程序代码调用方法控制如下:
    void SetHorzAlignment(StringAlignment alignment);
    

    5.1.5设置文本垂直对齐方式

    • 通过XML属性控制如下:
    VertAlignment="Center"
    
    • 通过C++程序代码调用方法控制如下:
    void SetVertAlignment(StringAlignment alignment);
    

    5.1.6单行文本太长时,自动在结尾处加“...”

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

    5.2 超链

    文本由CSkinHyperlink类来代表,继承于CSkinTextView,支持CSkinTextView的所有属性和方法。

    超链

    布局文件如下:

    <SkinDialog DefaultWidth="400" DefaultHeight="300" SysButton="CLOSE" Icon="128" Caption="IDS_CONTROL_SHOW3" Animation="SizeChange">
        <SkinHyperlink LayoutWidth="WrapContent" LayoutHeight="30" Text="IDS_CONTROL_SHOW_TEXT4" AlignParentHorizontalCenter="0" AlignParentTop="50"/>
        <SkinHyperlink LayoutWidth="120" LayoutHeight="30" Text="IDS_CONTROL_SHOW_TEXT5" AlignParentHorizontalCenter="0" AlignParentTop="125"/>
        <SkinHyperlink LayoutWidth="WrapContent" LayoutHeight="30" Text="IDS_CONTROL_SHOW_TEXT6" URL="www.baidu.com" AlignParentHorizontalCenter="0" AlignParentTop="200"/>
    </SkinDialog>
    

    下面是CSkinHyperlink类特有的XML属性和相关方法:

    5.1.1设置超链激活状态的字体

    • 通过XML属性控制如下:
    HotFontStyle="ID_FONT_HYPERLINK"
    
    • 通过C++程序代码调用方法控制如下:
    void SetHotFontStyle(const tstring& strFontStyle);
    

    5.1.2设置超链激活状态字体的颜色

    • 通过XML属性控制如下:
    HotFontColor="ID_COLOR_HYPERLINK"
    
    • 通过C++程序代码调用方法控制如下:
    void SetHotFontColor(const tstring& strFontColor);
    

    5.1.2设置超链的链接URL

    • 通过XML属性控制如下:
    URL="www.baidu.com"
    
    • 通过C++程序代码调用方法控制如下:
    void SetUrl(const tstring& strUrl);
    

    单击超链时,如果超链是URL,则直接用系统默认浏览器打开这个URL;否则,给超链所在窗口发送WM_COMMAND消息。

    5.3 线条

    文本由CSkinLine类来代表,继承于CSkinView,支持CSkinView的所有属性和方法。

    线条

    布局文件如下:

    <SkinDialog DefaultWidth="400" DefaultHeight="300" SysButton="CLOSE" Icon="128" Caption="IDS_CONTROL_SHOW16" Animation="SizeChange">
        <SkinLine LayoutHeight="1" AlignParentLeft="10" AlignParentRight="10" AlignParentTop="100" Color="ID_COLOR_DEFAULT12"/>
        <SkinLine LayoutHeight="1" AlignParentLeft="10" AlignParentRight="10" AlignParentTop="150" Color="ID_COLOR_DEFAULT12"/>
        <SkinLine LayoutHeight="1" AlignParentLeft="10" AlignParentRight="10" AlignParentTop="151" Color="ID_COLOR_DEFAULT12"/>
        <SkinLine LayoutHeight="1" AlignParentLeft="10" AlignParentRight="10" AlignParentTop="200" Color="ID_COLOR_DEFAULT12"/>
        <SkinLine LayoutHeight="1" AlignParentLeft="10" AlignParentRight="10" AlignParentTop="201" Color="ID_COLOR_DEFAULT12"/>
        <SkinLine LayoutHeight="1" AlignParentLeft="10" AlignParentRight="10" AlignParentTop="202" Color="ID_COLOR_DEFAULT12"/>
    </SkinDialog>
    

    下面是CSkinLine类常用的XML属性和相关方法:

    5.3.1设置线条风格

    • 通过XML属性控制如下:
    DashStyle="Solid"
    
    • 通过C++程序代码调用方法控制如下:
    void SetDashStyle(DashStyle dashStyle);
    

    5.3.2设置线条颜色

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

    5.3.3设置颜色渐变线条开始颜色

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

    5.3.4设置颜色渐变线条结束颜色

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

    5.4 图片框

    图片框分为显示单帧图片的普通图片框和显示多帧图片的加强图片框。图片内容可以加载资源文件,也可以加载保存在硬盘任意位置的图片。

    5.4.1普通图片框

    普通图片框由CSkinImageView类来代表,继承于CSkinView,支持CSkinView的所有属性和方法。
    CSkinImageView可以显示普通静态图片,也可以显示Gif动画图片。

    普通图片

    布局文件如下:

    <SkinDialog DefaultWidth="400" DefaultHeight="300" SysButton="CLOSE" Icon="128" Caption="IDS_CONTROL_SHOW6" Animation="SizeChange">
        <SkinImageView LayoutWidth="WrapContent" LayoutHeight="WrapContent" Image="Image.png" AlignParentHorizontalCenter="0" AlignParentVerticalCenter="0"/>
    </SkinDialog>
    
    Gif动画图片

    布局文件如下:

    <SkinDialog DefaultWidth="400" DefaultHeight="300" SysButton="CLOSE" Icon="128" Caption="IDS_CONTROL_SHOW7" Animation="SizeChange">
        <SkinImageView Id="1" LayoutWidth="WrapContent" LayoutHeight="WrapContent" Image="Image.gif" AutoPlay="true" AlignParentHorizontalCenter="0" AlignParentVerticalCenter="0"/>
    </SkinDialog>
    

    下面是CSkinImageView类特有的XML属性和相关方法:

    5.4.1.1设置图片框显示的Gif动画是否需要自动播放

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

    如果图片框设置为自动播放,则Gif动画会在初始化完成之后自动播放。

    5.4.1.2设置图片框是否可以点击

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

    如果图片框设置为可点击,单击图片框时,SkinUI会给图片框所在窗口发送WM_COMMAND消息。

    5.4.1.3设置图片框显示资源图片

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

    5.4.1.4设置图片框显示保存在硬盘任意位置的图片

    • 无法通过XML属性控制
    • 通过C++程序代码调用方法控制如下:
    virtual void LoadImage(const tstring& strImage);
    

    5.4.2加强图片框

    加强图片框由CSkinImageViewEx类来代表,继承于CSkinView,支持CSkinView的所有属性和方法。
    CSkinImageViewEx用来显示将动画的多帧从左到右依次排列的多帧动画图片资源。

    加强图片框

    布局文件如下:

    <SkinDialog DefaultWidth="400" DefaultHeight="300" SysButton="CLOSE" Icon="128" Caption="IDS_CONTROL_SHOW8" Animation="SizeChange">
        <SkinImageViewEx Id="1" LayoutWidth="WrapContent" LayoutHeight="WrapContent" Image="MultiImage.png" TotalFrame="17" AutoPlay="true" AlignParentHorizontalCenter="0" AlignParentVerticalCenter="0"/>
    </SkinDialog>
    

    下面是CSkinImageViewEx类特有的XML属性和相关方法:

    5.3.2.1设置图片框显示的多帧动画图片是否需要自动播放

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

    如果图片框设置为自动播放,则多帧动画图片会在初始化完成之后自动播放。

    5.4.2.2设置图片框是否可以点击

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

    如果图片框设置为可点击,单击图片框时,SkinUI会给图片框所在窗口发送WM_COMMAND消息。

    5.4.2.3设置图片框显示资源图片

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

    5.4.2.4设置图片播放下一帧的时间间隔

    • 通过XML属性控制如下:
    Elapse="50"
    
    • 通过C++程序代码调用方法控制如下:
    void SetElapse(LONG nInterval);
    

    相关文章

      网友评论

        本文标题:5 第二组UI组件:文本、超链、线条和图片框

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