普通组件开发指导

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

图 1 普通组件树结构
普通组件开发指导 - 图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. 实现点击事件。

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

  2. 创建一个UIButton。

    1. UIButton* button = new UIButton();
    2. button->SetPosition(50, 50);
    3. button->SetWidth(100);
    4. button->SetHeight(50);

  3. 给UIButton注册点击事件回调。

    1. button->SetOnClickListener(new TestBtnOnClickListener());

  4. 检查Button点击效果如下图所示，Button逐渐变大。

    图 2 UIButton点击效果
    普通组件开发指导 - 图2

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。

    1. UIImageView* imageView = new UIImageView();
    2. imageView->SetPosition(0, 30);

  2. 设置二进制格式的图片。

    1. imageView->SetSrc("..\\config\\images\\A021_001.bin");

  3. 检查UIImageView控件大小与图片相同。

    图 3 自适应模式图片效果图
    普通组件开发指导 - 图3

开发步骤（平铺模式）

  1. 创建一个UIImageView。

    1. UIImageView* imageView = new UIImageView();
    2. imageView->SetPosition(0, 30);

  2. 设置图片。

    1. imageView->SetSrc("..\\config\\images\\A021_001.bin");

  3. 取消图片自适应，设置图片大小，平铺显示效果。

    1. imageView->SetAutoEnable(false);
    2. imageView->Resize(454, 150);

  4. 检查UIImageView控件显示为平铺效果。

    图 4 平铺模式图片效果图
    普通组件开发指导 - 图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，设置大小和位置信息。

    1. UILabel* label = new UILabel();
    2. label->SetPosition(x, y);
    3. label->Resize(width, height);

  2. 设置字形信息。

    1. label->SetFont("SourceHanSansSC-Regular.otf", 30);

  3. 设置文本数据。

    1. label->SetText("label");

  4. 检查label大小和显示效果正常，如下图所示。

    普通组件开发指导 - 图5

开发步骤（背景色和透明度）

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

    1. UILabel* label = new UILabel();
    2. label->SetPosition(x, y);
    3. label->Resize(width, height);

  2. 设置字形信息。

    1. label->SetFont("SourceHanSansSC-Regular.otf", 30);

  3. 设置背景颜色及透明度效果。

    1. label->SetStyle(STYLE_BACKGROUND_COLOR, Color::Gray().full);
    2. label->SetStyle(STYLE_BACKGROUND_OPA, 127);
    3. label->SetText("Label");

  4. 检查label背景色为Gray，如下图所示。

    普通组件开发指导 - 图6

开发步骤（字符间距）

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

    1. UILabel* label = new UILabel();
    2. label->SetPosition(x, y);
    3. label->Resize(width, height);

  2. 设置字形信息。

    1. label->SetFont("SourceHanSansSC-Regular.otf", 30);

  3. 设置字体颜色和字间距效果。

    1. label->SetStyle(STYLE_BACKGROUND_COLOR, Color::Gray().full);
    2. label->SetStyle(STYLE_LETTER_SPACE, 5);
    3. label->SetText("Label");

  4. 检查label字符间距为5，如下图所示。

    普通组件开发指导 - 图7

开发步骤（大小自适应）

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

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

    1. UILabel* label = new UILabel();
    2. label->SetPosition(x, y);
    3. label->Resize(width, height);

  2. 设置字形信息。

    1. label->SetFont("SourceHanSansSC-Regular.otf", 30);

  3. 设置字体颜色为Gray，组件大小自适应文本内容。

    1. label->SetStyle(STYLE_BACKGROUND_COLOR, Color::Gray().full);
    2. label->SetLineBreakMode(UILabel::LINE_BREAK_ADAPT);
    3. label->SetText("123\n567890");

  4. 检查label大小自适应文本内容，如下图所示。

    普通组件开发指导 - 图8

开发步骤（省略号模式）

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

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

    1. UILabel* label = new UILabel();
    2. label->SetPosition(x, y);
    3. label->Resize(width, height);

  2. 设置字形信息。

    1. label->SetFont("SourceHanSansSC-Regular.otf", 30);

  3. 设置换行模式为DOT模式

    1. label->SetStyle(STYLE_BACKGROUND_COLOR, Color::Gray().full);
    2. label->SetLineBreakMode(UILabel::LINE_BREAK_ELLIPSIS);
    3. label->SetText("123567890");

  4. 检查label DOT模式效果，如下图所示，末尾显示省略号。

    普通组件开发指导 - 图9

开发步骤（滚动模式）

文本滚动显示。

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

    1. UILabel* label = new UILabel();
    2. label->SetPosition(x, y);
    3. label->Resize(width, height);

  2. 设置字形信息。

    1. label->SetFont("SourceHanSansSC-Regular.otf", 30);

  3. 设置换行模式为滚动模式

    1. label->SetStyle(STYLE_BACKGROUND_COLOR, Color::Gray().full);
    2. label->SetStyle(STYLE_BACKGROUND_OPA, 127);
    3. label->SetLineBreakMode(UILabel::LINE_BREAK_MARQUEE);
    4. label->SetText("123567890");

  4. 检查label滚动模式效果，如下图所示。

    普通组件开发指导 - 图10.gif)