普通组件开发指导

普通组件均继承于基类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. }; ```
  11. 创建一个UIButton。

```

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

```

  1. button->SetOnClickListener(new TestBtnOnClickListener()); ```
  2. 检查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); ```
  3. 设置二进制格式的图片。

```

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

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

开发步骤（平铺模式）

  1. 创建一个UIImageView。

```

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

```

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

```

  1. imageView->SetAutoEnable(false);
  2. imageView->Resize(454, 150); ```
  3. 检查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); ```
  4. 设置字形信息。

```

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

```

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

普通组件开发指导 - 图5

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

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

```

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

```

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

```

  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); ```
  4. 设置字形信息。

```

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

```

  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); ```
  4. 设置字形信息。

```

  1. label->SetFont("SourceHanSansSC-Regular.otf", 30); ```
  2. 设置字体颜色为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); ```
  4. 设置字形信息。

```

  1. label->SetFont("SourceHanSansSC-Regular.otf", 30); ```
  2. 设置换行模式为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); ```
  4. 设置字形信息。

```

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

```

  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"); ```
  5. 检查label滚动模式效果，如下图所示。

普通组件开发指导 - 图10