普通组件开发指导

About 15 min

普通组件开发指导

普通组件均继承于基类UIView,不可以添加子组件,常用的普通组件有button、image、label等。

图 1 普通组件树结构

UIView为基础类,UIAbstractProgress、UIArcLabel(旋转字体)、UIButton(按键)、UICanvas(画布)、UILabel(字体)、UIImageView(图片)从UIView继承。UIBoxProgress、UICircleProgress从UIAbstractProgress继承,UILabelButton和UIRepeatButton从UIButton继承,UIImageAnimatorView和UITextureMapper从UIImageView继承。

UIButton

使用场景

UIButton组件,提供可点击功能,同时可设置不同状态下样式。

接口说明

表 1 button接口说明

方法

功能

void SetImageSrc (const char *defaultImgSrc, const char triggeredImgSrc)

设置button图片

void SetImagePosition (const int16_t x, const int16_t y)

设置button图片位置

int16_t GetImageX () const

获取图片X坐标

int16_t GetImageY () const

获取图片Y坐标

const ImageInfo GetCurImageSrc() const

获取当前状态图片

Style& GetStyleForState (ButtonState state)

设置button当前状态的style

voidSetStyleForState (const Style &style, ButtonState state)

设置button指定状态的style

void Disable ()

去使能button

void Enable ()

使能button

开发步骤

  1. 实现点击事件。

    class TestBtnOnClickListener : public OHOS::UIView::OnClickListener {
        bool OnClick(UIView& view, const ClickEvent& event) override
        {
            int16_t width = view.GetWidth() + 10;
            int16_t height = view.GetHeight() + 10;
            view.Resize(width, height);
            view.Invalidate();
            return true;
        }
    };
    
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
  2. 创建一个UIButton。

    UIButton* button = new UIButton();
    button->SetPosition(50, 50);
    button->SetWidth(100);
    button->SetHeight(50);
    
    1
    2
    3
    4
  3. 给UIButton注册点击事件回调。

    button->SetOnClickListener(new TestBtnOnClickListener());
    
    1
  4. 检查Button点击效果如下图所示,Button逐渐变大。

    图 2 UIButton点击效果

UIImageView

使用场景

图片组件,提供图片显示,透明度设置,图片旋转、缩放功能。支持的图片格式为RGB565、RGB888、RGBA8888、PNG、JPG。

接口说明

表 2 image接口说明

方法

功能

void SetSrc (const char *src)

设置二进制图片路径

void SetSrc (const ImageInfo src)

设置图片指针

void SetAutoEnable (bool enable)

设置组件大小跟随image大小变化

const void GetSrcType () const

获取图片类型

bool GetAutoEnable () const

获取组件大小是否跟随image大小变化

void SetBlurLevel(BlurLevel level)

设置模糊等级

BlurLevel GetBlurLevel() const

获取模糊等级

void SetTransformAlgorithm(TransformAlgorithm algorithm)

设置旋转算法

TransformAlgorithm GetTransformAlgorithm() const

获取旋转算法

开发步骤(自适应)

  1. 创建一个UIImageView。

    UIImageView* imageView = new UIImageView();
    imageView->SetPosition(0, 30);
    
    1
    2
  2. 设置二进制格式的图片。

    imageView->SetSrc("..\\config\\images\\A021_001.bin");
    
    1
  3. 检查UIImageView控件大小与图片相同。

    图 3 自适应模式图片效果图

开发步骤(平铺模式)

  1. 创建一个UIImageView。

    UIImageView* imageView = new UIImageView();
    imageView->SetPosition(0, 30);
    
    1
    2
  2. 设置图片。

    imageView->SetSrc("..\\config\\images\\A021_001.bin");
    
    1
  3. 取消图片自适应,设置图片大小,平铺显示效果。

    imageView->SetAutoEnable(false);
    imageView->Resize(454, 150);
    
    1
    2
  4. 检查UIImageView控件显示为平铺效果。

    图 4 平铺模式图片效果图

UILabel

使用场景

标签(label)是在一块区域上显示文本字符串的组件,可设置区域背景色、文字的显示样式和长文本的显示效果等。

接口说明

表 3 label接口说明

方法

功能

void SetText(const char* text);

设置文字

const char* GetText() const;

获取text

void SetLineBreakMode(const uint8_t lineBreakMode);

设置label模式,例如截断,自动扩展等。

uint8_t GetLineBreakMode() const

获取label模式

void SetTextColor(ColorType color)

设置文本颜色

ColorType GetTextColor() const

获取文本颜色

void SetAlign(UITextLanguageAlignment horizontalAlign,

UITextLanguageAlignment verticalAlign = TEXT_ALIGNMENT_TOP);

设置文本对齐方式

UITextLanguageAlignment GetHorAlign() const

获取文本水平对齐方式

UITextLanguageAlignment GetVerAlign() const

获取文本竖直对齐方式

void SetDirect(UITextLanguageDirect direct)

设置文本显示方向

UITextLanguageDirect GetDirect() const

获取文本显示方向

void SetFontId(uint8_t fontId);

设置动态字体id

uint8_t GetFontId() const

获取动态字体id

void SetFont(const char *name, uint8_t size);

设置字的名字和大小

void SetAnimatorSpeed(uint16_t animSpeed);

设置字体旋转的速度

uint16_t GetTextWidth();

获取字体的宽

uint16_t GetTextHeight();

获取字体的高

void SetRollStartPos(int16_t pos)

设置旋转的位置

int16_t GetRollStartPos() const

获取旋转的位置

void SetTextRotation(LabelRotateDegree angle)

设置文本旋转角度枚举值

LabelRotateDegree GetTextRotation() const

获取文本旋转角度枚举值

uint16_t GetTextRotateDegree() const

获取文本旋转角度数值

开发步骤(默认模式)

  1. 创建label,设置大小和位置信息。

    UILabel* label = new UILabel();
    label->SetPosition(x, y);
    label->Resize(width, height);
    
    1
    2
    3
  2. 设置字形信息。

    label->SetFont("SourceHanSansSC-Regular.otf", 30);
    
    1
  3. 设置文本数据。

    label->SetText("label");
    
    1
  4. 检查label大小和显示效果正常,如下图所示。

开发步骤(背景色和透明度)

  1. 创建label,设置大小和位置信息。

    UILabel* label = new UILabel();
    label->SetPosition(x, y);
    label->Resize(width, height);
    
    1
    2
    3
  2. 设置字形信息。

    label->SetFont("SourceHanSansSC-Regular.otf", 30);
    
    1
  3. 设置背景颜色及透明度效果。

    label->SetStyle(STYLE_BACKGROUND_COLOR, Color::Gray().full);
    label->SetStyle(STYLE_BACKGROUND_OPA, 127);
    label->SetText("Label");
    
    1
    2
    3
  4. 检查label背景色为Gray,如下图所示。

开发步骤(字符间距)

  1. 创建label,设置大小和位置信息。

    UILabel* label = new UILabel();
    label->SetPosition(x, y);
    label->Resize(width, height);
    
    1
    2
    3
  2. 设置字形信息。

    label->SetFont("SourceHanSansSC-Regular.otf", 30);
    
    1
  3. 设置字体颜色和字间距效果。

    label->SetStyle(STYLE_BACKGROUND_COLOR, Color::Gray().full);
    label->SetStyle(STYLE_LETTER_SPACE, 5);
    label->SetText("Label");
    
    1
    2
    3
  4. 检查label字符间距为5,如下图所示。

开发步骤(大小自适应)

当文本过长时,可根据文本信息自动调整label组件大小,也可以设置文本截断或者文本滚动效果。

  1. 创建label,设置大小和位置信息。

    UILabel* label = new UILabel();
    label->SetPosition(x, y);
    label->Resize(width, height);
    
    1
    2
    3
  2. 设置字形信息。

    label->SetFont("SourceHanSansSC-Regular.otf", 30);
    
    1
  3. 设置字体颜色为Gray,组件大小自适应文本内容。

    label->SetStyle(STYLE_BACKGROUND_COLOR, Color::Gray().full);
    label->SetLineBreakMode(UILabel::LINE_BREAK_ADAPT);
    label->SetText("123\n567890");
    
    1
    2
    3
  4. 检查label大小自适应文本内容,如下图所示。

开发步骤(省略号模式)

省略号模式指文本内容显示不下时,在末尾显示省略号。

  1. 创建label,设置大小和位置信息。

    UILabel* label = new UILabel();
    label->SetPosition(x, y);
    label->Resize(width, height);
    
    1
    2
    3
  2. 设置字形信息。

    label->SetFont("SourceHanSansSC-Regular.otf", 30);
    
    1
  3. 设置换行模式为DOT模式

    label->SetStyle(STYLE_BACKGROUND_COLOR, Color::Gray().full);
    label->SetLineBreakMode(UILabel::LINE_BREAK_ELLIPSIS);
    label->SetText("123567890");
    
    1
    2
    3
  4. 检查label DOT模式效果,如下图所示,末尾显示省略号。

开发步骤(滚动模式)

文本滚动显示。

  1. 创建label,设置大小和位置信息。

    UILabel* label = new UILabel();
    label->SetPosition(x, y);
    label->Resize(width, height);
    
    1
    2
    3
  2. 设置字形信息。

    label->SetFont("SourceHanSansSC-Regular.otf", 30);
    
    1
  3. 设置换行模式为滚动模式

    label->SetStyle(STYLE_BACKGROUND_COLOR, Color::Gray().full);
    label->SetStyle(STYLE_BACKGROUND_OPA, 127);
    label->SetLineBreakMode(UILabel::LINE_BREAK_MARQUEE);
    label->SetText("123567890");
    
    1
    2
    3
    4
  4. 检查label滚动模式效果,如下图所示。