1# Development Guidelines on Common Components<a name="EN-US_TOPIC_0000001052170409"></a> 2 3- [UIButton](#section145353310214) 4- [When to Use](#section1169616141577) 5- [Available APIs](#section341211538315) 6- [How to Develop](#section22501726193214) 7- [UIImageView](#section19523161611259) 8- [When to Use](#section1274484210400) 9- [Available APIs](#section74981992411) 10- [How to Develop \(Adaptive Mode\)](#section144341333134114) 11- [How to Develop \(Tile Mode\)](#section97178160421) 12- [UILabel](#section16588132012911) 13- [When to Use](#section6870195634218) 14- [Available APIs](#section2012714510433) 15- [How to Develop \(Default Mode\)](#section83221538114410) 16- [How to Develop \(Background Color and Opacity\)](#section933360204510) 17- [How to Develop \(Letter Spacing\)](#section19447826124518) 18- [How to Develop \(Size-Adaptive Mode\)](#section101711842154617) 19- [How to Develop \(Ellipsis Mode\)](#section1249519410471) 20- [How to Develop \(Scrolling Mode\)](#section15643122618478) 21 22Common components inherit from the base class **UIView**. Child components cannot be added to common components, such as buttons, images, and labels. 23 24**Figure 1** Tree structure of common components<a name="fig3386518305"></a> 25 26 27**UIView** is a base class of the following components: **UIAbstractProgress**, **UIArcLabel**, **UIButton**, **UICanvas**, **UILabel**, and **UIImageView**. **UIBoxProgress** and **UICircleProgress** inherit from **UIAbstractProgress**. **UILabelButton** and **UIRepeatButton** inherit from **UIButton**. **UIImageAnimatorView** and **UITextureMapper** inherit from **UIImageView**. 28 29## UIButton<a name="section145353310214"></a> 30 31## When to Use<a name="section1169616141577"></a> 32 33**UIButton** supports the click event and allows you to set styles in different states. 34 35## Available APIs<a name="section341211538315"></a> 36 37**Table 1** Available functions in UIButton 38 39<a name="table172083013117"></a> 40<table><thead align="left"><tr id="row13192303311"><th class="cellrowborder" valign="top" width="50%" id="mcps1.2.3.1.1"><p id="p1019330103113"><a name="p1019330103113"></a><a name="p1019330103113"></a>Function</p> 41</th> 42<th class="cellrowborder" valign="top" width="50%" id="mcps1.2.3.1.2"><p id="p181963020318"><a name="p181963020318"></a><a name="p181963020318"></a>Description</p> 43</th> 44</tr> 45</thead> 46<tbody><tr id="row191914306313"><td class="cellrowborder" valign="top" width="50%" headers="mcps1.2.3.1.1 "><p id="p161963010314"><a name="p161963010314"></a><a name="p161963010314"></a>void SetImageSrc (const char *defaultImgSrc, const char *triggeredImgSrc)</p> 47</td> 48<td class="cellrowborder" valign="top" width="50%" headers="mcps1.2.3.1.2 "><p id="p1619143014312"><a name="p1619143014312"></a><a name="p1619143014312"></a>Sets the button image.</p> 49</td> 50</tr> 51<tr id="row141915307313"><td class="cellrowborder" valign="top" width="50%" headers="mcps1.2.3.1.1 "><p id="p419193017312"><a name="p419193017312"></a><a name="p419193017312"></a>void SetImagePosition (const int16_t x, const int16_t y)</p> 52</td> 53<td class="cellrowborder" valign="top" width="50%" headers="mcps1.2.3.1.2 "><p id="p919030173119"><a name="p919030173119"></a><a name="p919030173119"></a>Sets the position of the button image.</p> 54</td> 55</tr> 56<tr id="row1119930183115"><td class="cellrowborder" valign="top" width="50%" headers="mcps1.2.3.1.1 "><p id="p1619430193110"><a name="p1619430193110"></a><a name="p1619430193110"></a>int16_t GetImageX () const</p> 57</td> 58<td class="cellrowborder" valign="top" width="50%" headers="mcps1.2.3.1.2 "><p id="p151933012315"><a name="p151933012315"></a><a name="p151933012315"></a>Obtains the x-coordinate of the button image.</p> 59</td> 60</tr> 61<tr id="row62083017317"><td class="cellrowborder" valign="top" width="50%" headers="mcps1.2.3.1.1 "><p id="p122093053112"><a name="p122093053112"></a><a name="p122093053112"></a>int16_t GetImageY () const</p> 62</td> 63<td class="cellrowborder" valign="top" width="50%" headers="mcps1.2.3.1.2 "><p id="p62016307314"><a name="p62016307314"></a><a name="p62016307314"></a>Obtains the y-coordinate of the button image.</p> 64</td> 65</tr> 66<tr id="row72013013114"><td class="cellrowborder" valign="top" width="50%" headers="mcps1.2.3.1.1 "><p id="p720203016314"><a name="p720203016314"></a><a name="p720203016314"></a>const ImageInfo* GetCurImageSrc() const</p> 67</td> 68<td class="cellrowborder" valign="top" width="50%" headers="mcps1.2.3.1.2 "><p id="p1201730123116"><a name="p1201730123116"></a><a name="p1201730123116"></a>Obtains the image of the button in the current state.</p> 69</td> 70</tr> 71<tr id="row320103017318"><td class="cellrowborder" valign="top" width="50%" headers="mcps1.2.3.1.1 "><p id="p12010308314"><a name="p12010308314"></a><a name="p12010308314"></a>Style& GetStyleForState (ButtonState state)</p> 72</td> 73<td class="cellrowborder" valign="top" width="50%" headers="mcps1.2.3.1.2 "><p id="p17201030133117"><a name="p17201030133117"></a><a name="p17201030133117"></a>Sets the style for the button in the current state.</p> 74</td> 75</tr> 76<tr id="row420730193117"><td class="cellrowborder" valign="top" width="50%" headers="mcps1.2.3.1.1 "><p id="p11201830183112"><a name="p11201830183112"></a><a name="p11201830183112"></a>voidSetStyleForState (const Style &style, ButtonState state)</p> 77</td> 78<td class="cellrowborder" valign="top" width="50%" headers="mcps1.2.3.1.2 "><p id="p82016308311"><a name="p82016308311"></a><a name="p82016308311"></a>Sets the style for the button in a specified state.</p> 79</td> 80</tr> 81<tr id="row1320193010317"><td class="cellrowborder" valign="top" width="50%" headers="mcps1.2.3.1.1 "><p id="p1020153014319"><a name="p1020153014319"></a><a name="p1020153014319"></a>void Disable ()</p> 82</td> 83<td class="cellrowborder" valign="top" width="50%" headers="mcps1.2.3.1.2 "><p id="p192063023119"><a name="p192063023119"></a><a name="p192063023119"></a>Disables the button.</p> 84</td> 85</tr> 86<tr id="row02017308315"><td class="cellrowborder" valign="top" width="50%" headers="mcps1.2.3.1.1 "><p id="p620173011318"><a name="p620173011318"></a><a name="p620173011318"></a>void Enable ()</p> 87</td> 88<td class="cellrowborder" valign="top" width="50%" headers="mcps1.2.3.1.2 "><p id="p52093073119"><a name="p52093073119"></a><a name="p52093073119"></a>Enables the button.</p> 89</td> 90</tr> 91</tbody> 92</table> 93 94## How to Develop<a name="section22501726193214"></a> 95 961. Implement the click event. 97 98 ``` 99 class TestBtnOnClickListener : public OHOS::UIView::OnClickListener { 100 bool OnClick(UIView& view, const ClickEvent& event) override 101 { 102 int16_t width = view.GetWidth() + 10; 103 int16_t height = view.GetHeight() + 10; 104 view.Resize(width, height); 105 view.Invalidate(); 106 return true; 107 } 108 }; 109 ``` 110 1112. Create a **UIButton** instance. 112 113 ``` 114 UIButton* button = new UIButton(); 115 button->SetPosition(50, 50); 116 button->SetWidth(100); 117 button->SetHeight(50); 118 ``` 119 1203. Register the click event callback for **UIButton**. 121 122 ``` 123 button->SetOnClickListener(new TestBtnOnClickListener()); 124 ``` 125 1264. Verify that the button is clicked and its size increases gradually, as shown in the following figure. 127 128 **Figure 2** Effect of clicking a **UIButton**<a name="fig1921134162020"></a> 129  130 131 132## UIImageView<a name="section19523161611259"></a> 133 134## When to Use<a name="section1274484210400"></a> 135 136**UIImageView** supports the functions to display images, set opacity, rotate images, and zoom in or out images. The following image formats are supported: RGB565, RGB888, RGBA8888, PNG, and JPG. 137 138## Available APIs<a name="section74981992411"></a> 139 140**Table 2** Available functions in UIImageView 141 142<a name="table1584094244019"></a> 143<table><thead align="left"><tr id="row483811426401"><th class="cellrowborder" valign="top" width="50%" id="mcps1.2.3.1.1"><p id="p1883814294017"><a name="p1883814294017"></a><a name="p1883814294017"></a>Function</p> 144</th> 145<th class="cellrowborder" valign="top" width="50%" id="mcps1.2.3.1.2"><p id="p168383425408"><a name="p168383425408"></a><a name="p168383425408"></a>Description</p> 146</th> 147</tr> 148</thead> 149<tbody><tr id="row198391442134016"><td class="cellrowborder" valign="top" width="50%" headers="mcps1.2.3.1.1 "><p id="p1383934284013"><a name="p1383934284013"></a><a name="p1383934284013"></a>void SetSrc (const char *src)</p> 150</td> 151<td class="cellrowborder" valign="top" width="50%" headers="mcps1.2.3.1.2 "><p id="p16839204211400"><a name="p16839204211400"></a><a name="p16839204211400"></a>Sets the image path with binary data.</p> 152</td> 153</tr> 154<tr id="row9839642194011"><td class="cellrowborder" valign="top" width="50%" headers="mcps1.2.3.1.1 "><p id="p6839194218409"><a name="p6839194218409"></a><a name="p6839194218409"></a>void SetSrc (const ImageInfo *src)</p> 155</td> 156<td class="cellrowborder" valign="top" width="50%" headers="mcps1.2.3.1.2 "><p id="p1483944218401"><a name="p1483944218401"></a><a name="p1483944218401"></a>Sets the pointer to image information.</p> 157</td> 158</tr> 159<tr id="row158391342194014"><td class="cellrowborder" valign="top" width="50%" headers="mcps1.2.3.1.1 "><p id="p188395427401"><a name="p188395427401"></a><a name="p188395427401"></a>void SetAutoEnable (bool enable)</p> 160</td> 161<td class="cellrowborder" valign="top" width="50%" headers="mcps1.2.3.1.2 "><p id="p15839642204010"><a name="p15839642204010"></a><a name="p15839642204010"></a>Sets whether the component size adapts to the image size.</p> 162</td> 163</tr> 164<tr id="row4839342154012"><td class="cellrowborder" valign="top" width="50%" headers="mcps1.2.3.1.1 "><p id="p11839142154019"><a name="p11839142154019"></a><a name="p11839142154019"></a>const void* GetSrcType () const</p> 165</td> 166<td class="cellrowborder" valign="top" width="50%" headers="mcps1.2.3.1.2 "><p id="p283913422406"><a name="p283913422406"></a><a name="p283913422406"></a>Obtains the image type.</p> 167</td> 168</tr> 169<tr id="row283918426406"><td class="cellrowborder" valign="top" width="50%" headers="mcps1.2.3.1.1 "><p id="p14839134217401"><a name="p14839134217401"></a><a name="p14839134217401"></a>bool GetAutoEnable () const</p> 170</td> 171<td class="cellrowborder" valign="top" width="50%" headers="mcps1.2.3.1.2 "><p id="p58391242154014"><a name="p58391242154014"></a><a name="p58391242154014"></a>Checks whether the component size adapts to the image size.</p> 172</td> 173</tr> 174<tr id="row183912426406"><td class="cellrowborder" valign="top" width="50%" headers="mcps1.2.3.1.1 "><p id="p78391242134016"><a name="p78391242134016"></a><a name="p78391242134016"></a>void SetBlurLevel(BlurLevel level)</p> 175</td> 176<td class="cellrowborder" valign="top" width="50%" headers="mcps1.2.3.1.2 "><p id="p38391342174018"><a name="p38391342174018"></a><a name="p38391342174018"></a>Sets the blur level for the image background.</p> 177</td> 178</tr> 179<tr id="row9840842174012"><td class="cellrowborder" valign="top" width="50%" headers="mcps1.2.3.1.1 "><p id="p3839442184018"><a name="p3839442184018"></a><a name="p3839442184018"></a>BlurLevel GetBlurLevel() const</p> 180</td> 181<td class="cellrowborder" valign="top" width="50%" headers="mcps1.2.3.1.2 "><p id="p4840342134016"><a name="p4840342134016"></a><a name="p4840342134016"></a>Obtains the blur level of the image background.</p> 182</td> 183</tr> 184<tr id="row184015424405"><td class="cellrowborder" valign="top" width="50%" headers="mcps1.2.3.1.1 "><p id="p13840144214405"><a name="p13840144214405"></a><a name="p13840144214405"></a>void SetTransformAlgorithm(TransformAlgorithm algorithm)</p> 185</td> 186<td class="cellrowborder" valign="top" width="50%" headers="mcps1.2.3.1.2 "><p id="p1284034224016"><a name="p1284034224016"></a><a name="p1284034224016"></a>Sets the transformation algorithm.</p> 187</td> 188</tr> 189<tr id="row1484064244017"><td class="cellrowborder" valign="top" width="50%" headers="mcps1.2.3.1.1 "><p id="p11840204211402"><a name="p11840204211402"></a><a name="p11840204211402"></a>TransformAlgorithm GetTransformAlgorithm() const</p> 190</td> 191<td class="cellrowborder" valign="top" width="50%" headers="mcps1.2.3.1.2 "><p id="p5840124219407"><a name="p5840124219407"></a><a name="p5840124219407"></a>Obtains the transformation algorithm.</p> 192</td> 193</tr> 194</tbody> 195</table> 196 197## How to Develop \(Adaptive Mode\)<a name="section144341333134114"></a> 198 1991. Create a **UIImageView** instance. 200 201 ``` 202 UIImageView* imageView = new UIImageView(); 203 imageView->SetPosition(0, 30); 204 ``` 205 2062. Set the image path with binary data. 207 208 ``` 209 imageView->SetSrc("..\\config\\images\\A021_001.bin"); 210 ``` 211 2123. Verify that the **UIImageView** component is adaptive to the image. 213 214 **Figure 3** Image auto-adaption effect<a name="fig64751933144118"></a> 215  216 217 218## How to Develop \(Tile Mode\)<a name="section97178160421"></a> 219 2201. Create a **UIImageView** instance. 221 222 ``` 223 UIImageView* imageView = new UIImageView(); 224 imageView->SetPosition(0, 30); 225 ``` 226 2272. Set the image path. 228 229 ``` 230 imageView->SetSrc("..\\config\\images\\A021_001.bin"); 231 ``` 232 2333. Disable the image auto-adaptation effect and resize the image to display the image in tile mode. 234 235 ``` 236 imageView->SetAutoEnable(false); 237 imageView->Resize(454, 150); 238 ``` 239 2404. Verify that the tile mode has been enabled for the **UIImageView**. 241 242 **Figure 4** Image tile effect<a name="fig1075461619424"></a> 243  244 245 246## UILabel<a name="section16588132012911"></a> 247 248## When to Use<a name="section6870195634218"></a> 249 250**UILabel** displays text in an area. You can set the background color, text display style, and long text display effect for a label. 251 252## Available APIs<a name="section2012714510433"></a> 253 254**Table 3** Available functions in UILabel 255 256<a name="table9571115310551"></a> 257<table><thead align="left"><tr id="row13571155335511"><th class="cellrowborder" valign="top" width="46.37%" id="mcps1.2.3.1.1"><p id="p057195365510"><a name="p057195365510"></a><a name="p057195365510"></a>Function</p> 258</th> 259<th class="cellrowborder" valign="top" width="53.63%" id="mcps1.2.3.1.2"><p id="p15717538555"><a name="p15717538555"></a><a name="p15717538555"></a>Description</p> 260</th> 261</tr> 262</thead> 263<tbody><tr id="row18571195317556"><td class="cellrowborder" valign="top" width="46.37%" headers="mcps1.2.3.1.1 "><p id="p3571185305517"><a name="p3571185305517"></a><a name="p3571185305517"></a>void SetText(const char* text);</p> 264</td> 265<td class="cellrowborder" valign="top" width="53.63%" headers="mcps1.2.3.1.2 "><p id="p757119532556"><a name="p757119532556"></a><a name="p757119532556"></a>Sets text for the label.</p> 266</td> 267</tr> 268<tr id="row7572175325513"><td class="cellrowborder" valign="top" width="46.37%" headers="mcps1.2.3.1.1 "><p id="p1857216534552"><a name="p1857216534552"></a><a name="p1857216534552"></a>const char* GetText() const;</p> 269</td> 270<td class="cellrowborder" valign="top" width="53.63%" headers="mcps1.2.3.1.2 "><p id="p85721653105514"><a name="p85721653105514"></a><a name="p85721653105514"></a>Obtains text of the label.</p> 271</td> 272</tr> 273<tr id="row105721153175516"><td class="cellrowborder" valign="top" width="46.37%" headers="mcps1.2.3.1.1 "><p id="p3572195312555"><a name="p3572195312555"></a><a name="p3572195312555"></a>void SetLineBreakMode(const uint8_t lineBreakMode);</p> 274</td> 275<td class="cellrowborder" valign="top" width="53.63%" headers="mcps1.2.3.1.2 "><p id="p1757215316557"><a name="p1757215316557"></a><a name="p1757215316557"></a>Sets the label mode, such as truncation and automatic extension.</p> 276</td> 277</tr> 278<tr id="row957211531555"><td class="cellrowborder" valign="top" width="46.37%" headers="mcps1.2.3.1.1 "><p id="p195721953105517"><a name="p195721953105517"></a><a name="p195721953105517"></a>uint8_t GetLineBreakMode() const</p> 279</td> 280<td class="cellrowborder" valign="top" width="53.63%" headers="mcps1.2.3.1.2 "><p id="p4572853175514"><a name="p4572853175514"></a><a name="p4572853175514"></a>Obtains the label mode.</p> 281</td> 282</tr> 283<tr id="row257225313559"><td class="cellrowborder" valign="top" width="46.37%" headers="mcps1.2.3.1.1 "><p id="p35721253155516"><a name="p35721253155516"></a><a name="p35721253155516"></a>void SetTextColor(ColorType color)</p> 284</td> 285<td class="cellrowborder" valign="top" width="53.63%" headers="mcps1.2.3.1.2 "><p id="p145724539550"><a name="p145724539550"></a><a name="p145724539550"></a>Set the text color.</p> 286</td> 287</tr> 288<tr id="row105721253175517"><td class="cellrowborder" valign="top" width="46.37%" headers="mcps1.2.3.1.1 "><p id="p125722538551"><a name="p125722538551"></a><a name="p125722538551"></a>ColorType GetTextColor() const</p> 289</td> 290<td class="cellrowborder" valign="top" width="53.63%" headers="mcps1.2.3.1.2 "><p id="p9572753205515"><a name="p9572753205515"></a><a name="p9572753205515"></a>Obtains the text color.</p> 291</td> 292</tr> 293<tr id="row757265320558"><td class="cellrowborder" valign="top" width="46.37%" headers="mcps1.2.3.1.1 "><p id="p10572185345516"><a name="p10572185345516"></a><a name="p10572185345516"></a>void SetAlign(UITextLanguageAlignment horizontalAlign,</p> 294<p id="p135721653115514"><a name="p135721653115514"></a><a name="p135721653115514"></a>UITextLanguageAlignment verticalAlign = TEXT_ALIGNMENT_TOP);</p> 295</td> 296<td class="cellrowborder" valign="top" width="53.63%" headers="mcps1.2.3.1.2 "><p id="p18572105335516"><a name="p18572105335516"></a><a name="p18572105335516"></a>Sets the text alignment mode.</p> 297</td> 298</tr> 299<tr id="row6572553105518"><td class="cellrowborder" valign="top" width="46.37%" headers="mcps1.2.3.1.1 "><p id="p175721253165515"><a name="p175721253165515"></a><a name="p175721253165515"></a>UITextLanguageAlignment GetHorAlign() const</p> 300</td> 301<td class="cellrowborder" valign="top" width="53.63%" headers="mcps1.2.3.1.2 "><p id="p857395313555"><a name="p857395313555"></a><a name="p857395313555"></a>Obtains the horizontal alignment mode of text.</p> 302</td> 303</tr> 304<tr id="row1657320534557"><td class="cellrowborder" valign="top" width="46.37%" headers="mcps1.2.3.1.1 "><p id="p75731853115511"><a name="p75731853115511"></a><a name="p75731853115511"></a>UITextLanguageAlignment GetVerAlign() const</p> 305</td> 306<td class="cellrowborder" valign="top" width="53.63%" headers="mcps1.2.3.1.2 "><p id="p5573953195514"><a name="p5573953195514"></a><a name="p5573953195514"></a>Obtains the vertical alignment mode of text.</p> 307</td> 308</tr> 309<tr id="row7573125318554"><td class="cellrowborder" valign="top" width="46.37%" headers="mcps1.2.3.1.1 "><p id="p1957355345516"><a name="p1957355345516"></a><a name="p1957355345516"></a>void SetDirect(UITextLanguageDirect direct)</p> 310</td> 311<td class="cellrowborder" valign="top" width="53.63%" headers="mcps1.2.3.1.2 "><p id="p95731753135519"><a name="p95731753135519"></a><a name="p95731753135519"></a>Sets the text display direction.</p> 312</td> 313</tr> 314<tr id="row145736533559"><td class="cellrowborder" valign="top" width="46.37%" headers="mcps1.2.3.1.1 "><p id="p12573145311555"><a name="p12573145311555"></a><a name="p12573145311555"></a>UITextLanguageDirect GetDirect() const</p> 315</td> 316<td class="cellrowborder" valign="top" width="53.63%" headers="mcps1.2.3.1.2 "><p id="p157375316552"><a name="p157375316552"></a><a name="p157375316552"></a>Obtains the text display direction.</p> 317</td> 318</tr> 319<tr id="row1857375315553"><td class="cellrowborder" valign="top" width="46.37%" headers="mcps1.2.3.1.1 "><p id="p4573185385519"><a name="p4573185385519"></a><a name="p4573185385519"></a>void SetFontId(uint8_t fontId);</p> 320</td> 321<td class="cellrowborder" valign="top" width="53.63%" headers="mcps1.2.3.1.2 "><p id="p657345318554"><a name="p657345318554"></a><a name="p657345318554"></a>Sets the dynamic font ID.</p> 322</td> 323</tr> 324<tr id="row7573175310550"><td class="cellrowborder" valign="top" width="46.37%" headers="mcps1.2.3.1.1 "><p id="p7573155310558"><a name="p7573155310558"></a><a name="p7573155310558"></a>uint8_t GetFontId() const</p> 325</td> 326<td class="cellrowborder" valign="top" width="53.63%" headers="mcps1.2.3.1.2 "><p id="p157312534551"><a name="p157312534551"></a><a name="p157312534551"></a>Obtains the dynamic font ID.</p> 327</td> 328</tr> 329<tr id="row7573105345519"><td class="cellrowborder" valign="top" width="46.37%" headers="mcps1.2.3.1.1 "><p id="p1573185314559"><a name="p1573185314559"></a><a name="p1573185314559"></a>void SetFont(const char *name, uint8_t size);</p> 330</td> 331<td class="cellrowborder" valign="top" width="53.63%" headers="mcps1.2.3.1.2 "><p id="p45736536559"><a name="p45736536559"></a><a name="p45736536559"></a>Sets the font name and size.</p> 332</td> 333</tr> 334<tr id="row257355317551"><td class="cellrowborder" valign="top" width="46.37%" headers="mcps1.2.3.1.1 "><p id="p205731953125520"><a name="p205731953125520"></a><a name="p205731953125520"></a>void SetAnimatorSpeed(uint16_t animSpeed);</p> 335</td> 336<td class="cellrowborder" valign="top" width="53.63%" headers="mcps1.2.3.1.2 "><p id="p15573155318551"><a name="p15573155318551"></a><a name="p15573155318551"></a>Sets the font rotation speed.</p> 337</td> 338</tr> 339<tr id="row1557413530552"><td class="cellrowborder" valign="top" width="46.37%" headers="mcps1.2.3.1.1 "><p id="p657435365518"><a name="p657435365518"></a><a name="p657435365518"></a>uint16_t GetTextWidth();</p> 340</td> 341<td class="cellrowborder" valign="top" width="53.63%" headers="mcps1.2.3.1.2 "><p id="p75740538554"><a name="p75740538554"></a><a name="p75740538554"></a>Obtains the font width.</p> 342</td> 343</tr> 344<tr id="row10574155314557"><td class="cellrowborder" valign="top" width="46.37%" headers="mcps1.2.3.1.1 "><p id="p2057425385510"><a name="p2057425385510"></a><a name="p2057425385510"></a>uint16_t GetTextHeight();</p> 345</td> 346<td class="cellrowborder" valign="top" width="53.63%" headers="mcps1.2.3.1.2 "><p id="p12574135365514"><a name="p12574135365514"></a><a name="p12574135365514"></a>Obtains the font height.</p> 347</td> 348</tr> 349<tr id="row1257413534553"><td class="cellrowborder" valign="top" width="46.37%" headers="mcps1.2.3.1.1 "><p id="p05741553125511"><a name="p05741553125511"></a><a name="p05741553125511"></a>void SetRollStartPos(int16_t pos)</p> 350</td> 351<td class="cellrowborder" valign="top" width="53.63%" headers="mcps1.2.3.1.2 "><p id="p757411538558"><a name="p757411538558"></a><a name="p757411538558"></a>Sets the rotation position.</p> 352</td> 353</tr> 354<tr id="row195749536552"><td class="cellrowborder" valign="top" width="46.37%" headers="mcps1.2.3.1.1 "><p id="p65741253115518"><a name="p65741253115518"></a><a name="p65741253115518"></a>int16_t GetRollStartPos() const</p> 355</td> 356<td class="cellrowborder" valign="top" width="53.63%" headers="mcps1.2.3.1.2 "><p id="p3574185319552"><a name="p3574185319552"></a><a name="p3574185319552"></a>Obtains the rotation position.</p> 357</td> 358</tr> 359<tr id="row35741453155518"><td class="cellrowborder" valign="top" width="46.37%" headers="mcps1.2.3.1.1 "><p id="p757415535558"><a name="p757415535558"></a><a name="p757415535558"></a>void SetTextRotation(LabelRotateDegree angle)</p> 360</td> 361<td class="cellrowborder" valign="top" width="53.63%" headers="mcps1.2.3.1.2 "><p id="p157416532558"><a name="p157416532558"></a><a name="p157416532558"></a>Sets the enumerated value of the text rotation angle.</p> 362</td> 363</tr> 364<tr id="row175741753165513"><td class="cellrowborder" valign="top" width="46.37%" headers="mcps1.2.3.1.1 "><p id="p157425385516"><a name="p157425385516"></a><a name="p157425385516"></a>LabelRotateDegree GetTextRotation() const</p> 365</td> 366<td class="cellrowborder" valign="top" width="53.63%" headers="mcps1.2.3.1.2 "><p id="p1357425365518"><a name="p1357425365518"></a><a name="p1357425365518"></a>Obtains the enumerated value of the text rotation angle.</p> 367</td> 368</tr> 369<tr id="row5574185335513"><td class="cellrowborder" valign="top" width="46.37%" headers="mcps1.2.3.1.1 "><p id="p1157455325519"><a name="p1157455325519"></a><a name="p1157455325519"></a>uint16_t GetTextRotateDegree() const</p> 370</td> 371<td class="cellrowborder" valign="top" width="53.63%" headers="mcps1.2.3.1.2 "><p id="p16574115318551"><a name="p16574115318551"></a><a name="p16574115318551"></a>Obtains the number of text rotation degrees.</p> 372</td> 373</tr> 374</tbody> 375</table> 376 377## How to Develop \(Default Mode\)<a name="section83221538114410"></a> 378 3791. Create a **lUILabel** instance and set its size and position. 380 381 ``` 382 UILabel* label = new UILabel(); 383 label->SetPosition(x, y); 384 label->Resize(width, height); 385 ``` 386 3872. Set the font. 388 389 ``` 390 label->SetFont("SourceHanSansSC-Regular.otf", 30); 391 ``` 392 3933. Set the text. 394 395 ``` 396 label->SetText("label"); 397 ``` 398 3994. Verify the label size and display effect, as shown in the following figure. 400 401  402 403 404## How to Develop \(Background Color and Opacity\)<a name="section933360204510"></a> 405 4061. Create a **lUILabel** instance and set its size and position. 407 408 ``` 409 UILabel* label = new UILabel(); 410 label->SetPosition(x, y); 411 label->Resize(width, height); 412 ``` 413 4142. Set the font. 415 416 ``` 417 label->SetFont("SourceHanSansSC-Regular.otf", 30); 418 ``` 419 4203. Set the background color and opacity. 421 422 ``` 423 label->SetStyle(STYLE_BACKGROUND_COLOR, Color::Gray().full); 424 label->SetStyle(STYLE_BACKGROUND_OPA, 127); 425 label->SetText("Label"); 426 ``` 427 4284. Verify that the background color of the label is **Gray**, as shown in the following figure. 429 430  431 432 433## How to Develop \(Letter Spacing\)<a name="section19447826124518"></a> 434 4351. Create a **lUILabel** instance and set its size and position. 436 437 ``` 438 UILabel* label = new UILabel(); 439 label->SetPosition(x, y); 440 label->Resize(width, height); 441 ``` 442 4432. Set the font. 444 445 ``` 446 label->SetFont("SourceHanSansSC-Regular.otf", 30); 447 ``` 448 4493. Set the font color and letter spacing. 450 451 ``` 452 label->SetStyle(STYLE_BACKGROUND_COLOR, Color::Gray().full); 453 label->SetStyle(STYLE_LETTER_SPACE, 5); 454 label->SetText("Label"); 455 ``` 456 4574. Verify that the letter spacing is **5** pixels on the label, as shown in the following figure. 458 459  460 461 462## How to Develop \(Size-Adaptive Mode\)<a name="section101711842154617"></a> 463 464Regarding too long text, the size of a label can be automatically adjusted based on the text, or the text can be truncated or displayed with the scrolling effect. 465 4661. Create a **lUILabel** instance and set its size and position. 467 468 ``` 469 UILabel* label = new UILabel(); 470 label->SetPosition(x, y); 471 label->Resize(width, height); 472 ``` 473 4742. Set the font. 475 476 ``` 477 label->SetFont("SourceHanSansSC-Regular.otf", 30); 478 ``` 479 4803. Set the font color to **Gray** and enable the label size to adapt to the text. 481 482 ``` 483 label->SetStyle(STYLE_BACKGROUND_COLOR, Color::Gray().full); 484 label->SetLineBreakMode(UILabel::LINE_BREAK_ADAPT); 485 label->SetText("123\n567890"); 486 ``` 487 4884. Verify that the label size adapts to the text, as shown in the following figure. 489 490  491 492 493## How to Develop \(Ellipsis Mode\)<a name="section1249519410471"></a> 494 495In ellipsis mode, an ellipsis \(...\) is displayed at the end of the label if the text cannot be completely displayed. 496 4971. Create a **lUILabel** instance and set its size and position. 498 499 ``` 500 UILabel* label = new UILabel(); 501 label->SetPosition(x, y); 502 label->Resize(width, height); 503 ``` 504 5052. Set the font. 506 507 ``` 508 label->SetFont("SourceHanSansSC-Regular.otf", 30); 509 ``` 510 5113. Set the text display mode to **LINE\_BREAK\_ELLIPSIS**. 512 513 ``` 514 label->SetStyle(STYLE_BACKGROUND_COLOR, Color::Gray().full); 515 label->SetLineBreakMode(UILabel::LINE_BREAK_ELLIPSIS); 516 label->SetText("123567890"); 517 ``` 518 5194. Verify that the ellipsis mode has taken effect on the label, as shown in the following figure. 520 521  522 523 524## How to Develop \(Scrolling Mode\)<a name="section15643122618478"></a> 525 526In scrolling mode, long text is kept scrolling on a screen to bring the entire text into view. 527 5281. Create a **lUILabel** instance and set its size and position. 529 530 ``` 531 UILabel* label = new UILabel(); 532 label->SetPosition(x, y); 533 label->Resize(width, height); 534 ``` 535 5362. Set the font. 537 538 ``` 539 label->SetFont("SourceHanSansSC-Regular.otf", 30); 540 ``` 541 5423. Set the text display mode to **UI\_LABEL\_LONG\_ROLL**. 543 544 ``` 545 label->SetStyle(STYLE_BACKGROUND_COLOR, Color::Gray().full); 546 label->SetStyle(STYLE_BACKGROUND_OPA, 127); 547 label->SetLineBreakMode(UILabel::LINE_BREAK_MARQUEE); 548 label->SetText("123567890"); 549 ``` 550 5514. Verify that the text is scrolling on the label, as shown in the following figure. 552 553 .gif) 554 555 556
