# 普通组件开发指导 普通组件均继承于基类UIView，不可以添加子组件，常用的普通组件有button、image、label等。 **图1** 普通组件树结构 ![zh-cn_image_0000001057990796](figures/zh-cn_image_0000001057990796.png) 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; } }; ``` 2. 创建一个UIButton。 ``` UIButton* button = new UIButton(); button->SetPosition(50, 50); button->SetWidth(100); button->SetHeight(50); ``` 3. 给UIButton注册点击事件回调。 ``` button->SetOnClickListener(new TestBtnOnClickListener()); ``` 4. 检查Button点击效果如下图所示，Button逐渐变大。 **图2** UIButton点击效果 ![zh-cn_image_0000001151367836](figures/zh-cn_image_0000001151367836.gif) ## 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); ``` 2. 设置二进制格式的图片。 ``` imageView->SetSrc("..\\config\\images\\A021_001.bin"); ``` 3. 检查UIImageView控件大小与图片相同。 **图3** 自适应模式图片效果图 ![zh-cn_image_0000001151527640](figures/zh-cn_image_0000001151527640.png) ### 开发步骤（平铺模式） 1. 创建一个UIImageView。 ``` UIImageView* imageView = new UIImageView(); imageView->SetPosition(0, 30); ``` 2. 设置图片。 ``` imageView->SetSrc("..\\config\\images\\A021_001.bin"); ``` 3. 取消图片自适应，设置图片大小，平铺显示效果。 ``` imageView->SetAutoEnable(false); imageView->Resize(454, 150); ``` 4. 检查UIImageView控件显示为平铺效果。 **图4** 平铺模式图片效果图 ![zh-cn_image_0000001197407405](figures/zh-cn_image_0000001197407405.png) ## 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); ``` 2. 设置字形信息。 ``` label->SetFont("SourceHanSansSC-Regular.otf", 30); ``` 3. 设置文本数据。 ``` label->SetText("label"); ``` 4. 检查label大小和显示效果正常，如下图所示。 **图5** 默认模式显示效果图 ![zh-cn_image_0000001154150600](figures/zh-cn_image_0000001154150600.png) ### 开发步骤（背景色和透明度） 1. 创建label，设置大小和位置信息。 ``` UILabel* label = new UILabel(); label->SetPosition(x, y); label->Resize(width, height); ``` 2. 设置字形信息。 ``` label->SetFont("SourceHanSansSC-Regular.otf", 30); ``` 3. 设置背景颜色及透明度效果。 ``` label->SetStyle(STYLE_BACKGROUND_COLOR, Color::Gray().full); label->SetStyle(STYLE_BACKGROUND_OPA, 127); label->SetText("Label"); ``` 4. 检查label背景色为Gray，如下图所示。 **图6** 设置背景色显示效果图 ![zh-cn_image_0000001154150422](figures/zh-cn_image_0000001154150422.png) ### 开发步骤（字符间距） 1. 创建label，设置大小和位置信息。 ``` UILabel* label = new UILabel(); label->SetPosition(x, y); label->Resize(width, height); ``` 2. 设置字形信息。 ``` label->SetFont("SourceHanSansSC-Regular.otf", 30); ``` 3. 设置字体颜色和字间距效果。 ``` label->SetStyle(STYLE_BACKGROUND_COLOR, Color::Gray().full); label->SetStyle(STYLE_LETTER_SPACE, 5); label->SetText("Label"); ``` 4. 检查label字符间距为5，如下图所示。 **图7** 设置文字颜色、字间距显示效果图 ![zh-cn_image_0000001200109969](figures/zh-cn_image_0000001200109969.png) ### 开发步骤（大小自适应） 当文本过长时，可根据文本信息自动调整label组件大小，也可以设置文本截断或者文本滚动效果。 1. 创建label，设置大小和位置信息。 ``` UILabel* label = new UILabel(); label->SetPosition(x, y); label->Resize(width, height); ``` 2. 设置字形信息。 ``` label->SetFont("SourceHanSansSC-Regular.otf", 30); ``` 3. 设置字体颜色为Gray，组件大小自适应文本内容。 ``` label->SetStyle(STYLE_BACKGROUND_COLOR, Color::Gray().full); label->SetLineBreakMode(UILabel::LINE_BREAK_ADAPT); label->SetText("123\n567890"); ``` 4. 检查label大小自适应文本内容，如下图所示。 **图8** 自适应模式显示效果图 ![zh-cn_image_0000001200029923](figures/zh-cn_image_0000001200029923.png) ### 开发步骤（省略号模式） 省略号模式指文本内容显示不下时，在末尾显示省略号。 1. 创建label，设置大小和位置信息。 ``` UILabel* label = new UILabel(); label->SetPosition(x, y); label->Resize(width, height); ``` 2. 设置字形信息。 ``` label->SetFont("SourceHanSansSC-Regular.otf", 30); ``` 3. 设置换行模式为DOT模式 ``` label->SetStyle(STYLE_BACKGROUND_COLOR, Color::Gray().full); label->SetLineBreakMode(UILabel::LINE_BREAK_ELLIPSIS); label->SetText("123567890"); ``` 4. 检查label DOT模式效果，如下图所示，末尾显示省略号。 **图9** DOT模式显示效果图 ![zh-cn_image_0000001200029619](figures/zh-cn_image_0000001200029619.png) ### 开发步骤（滚动模式） 文本滚动显示。 1. 创建label，设置大小和位置信息。 ``` UILabel* label = new UILabel(); label->SetPosition(x, y); label->Resize(width, height); ``` 2. 设置字形信息。 ``` label->SetFont("SourceHanSansSC-Regular.otf", 30); ``` 3. 设置换行模式为滚动模式 ``` label->SetStyle(STYLE_BACKGROUND_COLOR, Color::Gray().full); label->SetStyle(STYLE_BACKGROUND_OPA, 127); label->SetLineBreakMode(UILabel::LINE_BREAK_MARQUEE); label->SetText("123567890"); ``` 4. 检查label滚动模式效果，如下图所示。 **图10** 滚动模式显示效果图 ![zh-cn_image_0000001200109273](figures/zh-cn_image_0000001200109273.gif)