1# 普通组件开发指导 2 3 4普通组件均继承于基类UIView，不可以添加子组件，常用的普通组件有button、image、label等。 5 6 7 **图1** 普通组件树结构 8 9  10 11 12 13UIView为基础类，UIAbstractProgress、UIArcLabel（旋转字体）、UIButton（按键）、UICanvas（画布）、UILabel（字体）、UIImageView（图片）从UIView继承。UIBoxProgress、UICircleProgress从UIAbstractProgress继承，UILabelButton和UIRepeatButton从UIButton继承，UIImageAnimatorView和UITextureMapper从UIImageView继承。 14 15 16## UIButton 17 18 19### 使用场景 20 21UIButton组件，提供可点击功能，同时可设置不同状态下样式。 22 23 24### 接口说明 25 26 **表1** button接口说明 27 28| 方法 | 功能 | 29| -------- | -------- | 30| void SetImageSrc (const char \*defaultImgSrc, const char \*triggeredImgSrc) | 设置button图片 | 31| void SetImagePosition (const int16_t x, const int16_t y) | 设置button图片位置 | 32| int16_t GetImageX () const | 获取图片X坐标 | 33| int16_t GetImageY () const | 获取图片Y坐标 | 34| const ImageInfo\* GetCurImageSrc() const | 获取当前状态图片 | 35| Style& GetStyleForState (ButtonState state) | 设置button当前状态的style | 36| voidSetStyleForState (const Style &style, ButtonState state) | 设置button指定状态的style | 37| void Disable () | 去使能button | 38| void Enable () | 使能button | 39 40 41### 开发步骤 42 431. 实现点击事件。 44 45 ``` 46 class TestBtnOnClickListener : public OHOS::UIView::OnClickListener { 47 bool OnClick(UIView& view, const ClickEvent& event) override 48 { 49 int16_t width = view.GetWidth() + 10; 50 int16_t height = view.GetHeight() + 10; 51 view.Resize(width, height); 52 view.Invalidate(); 53 return true; 54 } 55 }; 56 ``` 57 582. 创建一个UIButton。 59 60 ``` 61 UIButton* button = new UIButton(); 62 button->SetPosition(50, 50); 63 button->SetWidth(100); 64 button->SetHeight(50); 65 ``` 66 673. 给UIButton注册点击事件回调。 68 69 ``` 70 button->SetOnClickListener(new TestBtnOnClickListener()); 71 ``` 72 734. 检查Button点击效果如下图所示，Button逐渐变大。 74 75 **图2** UIButton点击效果 76 77  78 79 80## UIImageView 81 82 83### 使用场景 84 85图片组件，提供图片显示，透明度设置，图片旋转、缩放功能。支持的图片格式为RGB565、RGB888、RGBA8888、PNG、JPG。 86 87 88### 接口说明 89 90 **表2** image接口说明 91 92| 方法 | 功能 | 93| -------- | -------- | 94| void SetSrc (const char \*src) | 设置二进制图片路径 | 95| void SetSrc (const ImageInfo \*src) | 设置图片指针 | 96| void SetAutoEnable (bool enable) | 设置组件大小跟随image大小变化 | 97| const void\* GetSrcType () const | 获取图片类型 | 98| bool GetAutoEnable () const | 获取组件大小是否跟随image大小变化 | 99| void SetBlurLevel(BlurLevel level) | 设置模糊等级 | 100| BlurLevel GetBlurLevel() const | 获取模糊等级 | 101| void SetTransformAlgorithm(TransformAlgorithm algorithm) | 设置旋转算法 | 102| TransformAlgorithm GetTransformAlgorithm() const | 获取旋转算法 | 103 104 105### 开发步骤（自适应） 106 1071. 创建一个UIImageView。 108 109 ``` 110 UIImageView* imageView = new UIImageView(); 111 imageView->SetPosition(0, 30); 112 ``` 113 1142. 设置二进制格式的图片。 115 116 ``` 117 imageView->SetSrc("..\\config\\images\\A021_001.bin"); 118 ``` 119 1203. 检查UIImageView控件大小与图片相同。 121 122 **图3** 自适应模式图片效果图 123 124  125 126 127### 开发步骤（平铺模式） 128 1291. 创建一个UIImageView。 130 131 ``` 132 UIImageView* imageView = new UIImageView(); 133 imageView->SetPosition(0, 30); 134 ``` 135 1362. 设置图片。 137 138 ``` 139 imageView->SetSrc("..\\config\\images\\A021_001.bin"); 140 ``` 141 1423. 取消图片自适应，设置图片大小，平铺显示效果。 143 144 ``` 145 imageView->SetAutoEnable(false); 146 imageView->Resize(454, 150); 147 ``` 148 1494. 检查UIImageView控件显示为平铺效果。 150 151 **图4** 平铺模式图片效果图 152 153  154 155 156## UILabel 157 158 159### 使用场景 160 161标签（label）是在一块区域上显示文本字符串的组件，可设置区域背景色、文字的显示样式和长文本的显示效果等。 162 163 164### 接口说明 165 166 **表3** label接口说明 167 168| 方法 | 功能 | 169| -------- | -------- | 170| void SetText(const char\* text); | 设置文字 | 171| const char\* GetText() const; | 获取text | 172| void SetLineBreakMode(const uint8_t lineBreakMode); | 设置label模式，例如截断，自动扩展等。 | 173| uint8_t GetLineBreakMode() const | 获取label模式 | 174| void SetTextColor(ColorType color) | 设置文本颜色 | 175| ColorType GetTextColor() const | 获取文本颜色 | 176| void SetAlign(UITextLanguageAlignment horizontalAlign,<br/>UITextLanguageAlignment verticalAlign = TEXT_ALIGNMENT_TOP); | 设置文本对齐方式 | 177| UITextLanguageAlignment GetHorAlign() const | 获取文本水平对齐方式 | 178| UITextLanguageAlignment GetVerAlign() const | 获取文本竖直对齐方式 | 179| void SetDirect(UITextLanguageDirect direct) | 设置文本显示方向 | 180| UITextLanguageDirect GetDirect() const | 获取文本显示方向 | 181| void SetFontId(uint8_t fontId); | 设置动态字体id | 182| uint8_t GetFontId() const | 获取动态字体id | 183| void SetFont(const char \*name, uint8_t size); | 设置字的名字和大小 | 184| void SetAnimatorSpeed(uint16_t animSpeed); | 设置字体旋转的速度 | 185| uint16_t GetTextWidth(); | 获取字体的宽 | 186| uint16_t GetTextHeight(); | 获取字体的高 | 187| void SetRollStartPos(int16_t pos) | 设置旋转的位置 | 188| int16_t GetRollStartPos() const | 获取旋转的位置 | 189| void SetTextRotation(LabelRotateDegree angle) | 设置文本旋转角度枚举值 | 190| LabelRotateDegree GetTextRotation() const | 获取文本旋转角度枚举值 | 191| uint16_t GetTextRotateDegree() const | 获取文本旋转角度数值 | 192 193 194### 开发步骤（默认模式） 195 1961. 创建label，设置大小和位置信息。 197 198 ``` 199 UILabel* label = new UILabel(); 200 label->SetPosition(x, y); 201 label->Resize(width, height); 202 ``` 203 2042. 设置字形信息。 205 206 ``` 207 label->SetFont("SourceHanSansSC-Regular.otf", 30); 208 ``` 209 2103. 设置文本数据。 211 212 ``` 213 label->SetText("label"); 214 ``` 215 2164. 检查label大小和显示效果正常，如下图所示。 217 218 **图5** 默认模式显示效果图 219 220  221 222 223### 开发步骤（背景色和透明度） 224 2251. 创建label，设置大小和位置信息。 226 227 ``` 228 UILabel* label = new UILabel(); 229 label->SetPosition(x, y); 230 label->Resize(width, height); 231 ``` 232 2332. 设置字形信息。 234 235 ``` 236 label->SetFont("SourceHanSansSC-Regular.otf", 30); 237 ``` 238 2393. 设置背景颜色及透明度效果。 240 241 ``` 242 label->SetStyle(STYLE_BACKGROUND_COLOR, Color::Gray().full); 243 label->SetStyle(STYLE_BACKGROUND_OPA, 127); 244 label->SetText("Label"); 245 ``` 246 2474. 检查label背景色为Gray，如下图所示。 248 249 **图6** 设置背景色显示效果图 250 251  252 253 254### 开发步骤（字符间距） 255 2561. 创建label，设置大小和位置信息。 257 258 ``` 259 UILabel* label = new UILabel(); 260 label->SetPosition(x, y); 261 label->Resize(width, height); 262 ``` 263 2642. 设置字形信息。 265 266 ``` 267 label->SetFont("SourceHanSansSC-Regular.otf", 30); 268 ``` 269 2703. 设置字体颜色和字间距效果。 271 272 ``` 273 label->SetStyle(STYLE_BACKGROUND_COLOR, Color::Gray().full); 274 label->SetStyle(STYLE_LETTER_SPACE, 5); 275 label->SetText("Label"); 276 ``` 277 2784. 检查label字符间距为5，如下图所示。 279 280 **图7** 设置文字颜色、字间距显示效果图 281 282  283 284 285### 开发步骤（大小自适应） 286 287当文本过长时，可根据文本信息自动调整label组件大小，也可以设置文本截断或者文本滚动效果。 288 2891. 创建label，设置大小和位置信息。 290 291 ``` 292 UILabel* label = new UILabel(); 293 label->SetPosition(x, y); 294 label->Resize(width, height); 295 ``` 296 2972. 设置字形信息。 298 299 ``` 300 label->SetFont("SourceHanSansSC-Regular.otf", 30); 301 ``` 302 3033. 设置字体颜色为Gray，组件大小自适应文本内容。 304 305 ``` 306 label->SetStyle(STYLE_BACKGROUND_COLOR, Color::Gray().full); 307 label->SetLineBreakMode(UILabel::LINE_BREAK_ADAPT); 308 label->SetText("123\n567890"); 309 ``` 310 3114. 检查label大小自适应文本内容，如下图所示。 312 313 **图8** 自适应模式显示效果图 314 315  316 317 318### 开发步骤（省略号模式） 319 320省略号模式指文本内容显示不下时，在末尾显示省略号。 321 3221. 创建label，设置大小和位置信息。 323 324 ``` 325 UILabel* label = new UILabel(); 326 label->SetPosition(x, y); 327 label->Resize(width, height); 328 ``` 329 3302. 设置字形信息。 331 332 ``` 333 label->SetFont("SourceHanSansSC-Regular.otf", 30); 334 ``` 335 3363. 设置换行模式为DOT模式 337 338 ``` 339 label->SetStyle(STYLE_BACKGROUND_COLOR, Color::Gray().full); 340 label->SetLineBreakMode(UILabel::LINE_BREAK_ELLIPSIS); 341 label->SetText("123567890"); 342 ``` 343 3444. 检查label DOT模式效果，如下图所示，末尾显示省略号。 345 346 **图9** DOT模式显示效果图 347 348  349 350### 开发步骤（滚动模式） 351 352文本滚动显示。 353 3541. 创建label，设置大小和位置信息。 355 356 ``` 357 UILabel* label = new UILabel(); 358 label->SetPosition(x, y); 359 label->Resize(width, height); 360 ``` 361 3622. 设置字形信息。 363 364 ``` 365 label->SetFont("SourceHanSansSC-Regular.otf", 30); 366 ``` 367 3683. 设置换行模式为滚动模式 369 370 ``` 371 label->SetStyle(STYLE_BACKGROUND_COLOR, Color::Gray().full); 372 label->SetStyle(STYLE_BACKGROUND_OPA, 127); 373 label->SetLineBreakMode(UILabel::LINE_BREAK_MARQUEE); 374 label->SetText("123567890"); 375 ``` 376 3774. 检查label滚动模式效果，如下图所示。 378 379 **图10** 滚动模式显示效果图 380 381  382
