1# Common Component Development<a name="EN-US_TOPIC_0000001052170409"></a> 2 3Common components inherit from the base class **UIView**. Child components cannot be added to common components, such as buttons, images, and labels. 4 5**Figure 1** Tree structure of common components<a name="fig3386518305"></a> 6 7 8**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**. 9 10## UIButton<a name="section145353310214"></a> 11 12## When to Use<a name="section1169616141577"></a> 13 14**UIButton** supports the click event and allows you to set styles in different states. 15 16## Available APIs<a name="section341211538315"></a> 17 18**Table 1** Available functions in UIButton 19 20<a name="table172083013117"></a> 21<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> 22</th> 23<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> 24</th> 25</tr> 26</thead> 27<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> 28</td> 29<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> 30</td> 31</tr> 32<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> 33</td> 34<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> 35</td> 36</tr> 37<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> 38</td> 39<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> 40</td> 41</tr> 42<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> 43</td> 44<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> 45</td> 46</tr> 47<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> 48</td> 49<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> 50</td> 51</tr> 52<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> 53</td> 54<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> 55</td> 56</tr> 57<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> 58</td> 59<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> 60</td> 61</tr> 62<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> 63</td> 64<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> 65</td> 66</tr> 67<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> 68</td> 69<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> 70</td> 71</tr> 72</tbody> 73</table> 74 75## How to Develop<a name="section22501726193214"></a> 76 771. Implement the click event. 78 79 ``` 80 class TestBtnOnClickListener : public OHOS::UIView::OnClickListener { 81 bool OnClick(UIView& view, const ClickEvent& event) override 82 { 83 int16_t width = view.GetWidth() + 10; 84 int16_t height = view.GetHeight() + 10; 85 view.Resize(width, height); 86 view.Invalidate(); 87 return true; 88 } 89 }; 90 ``` 91 922. Create a **UIButton** instance. 93 94 ``` 95 UIButton* button = new UIButton(); 96 button->SetPosition(50, 50); 97 button->SetWidth(100); 98 button->SetHeight(50); 99 ``` 100 1013. Register the click event callback for **UIButton**. 102 103 ``` 104 button->SetOnClickListener(new TestBtnOnClickListener()); 105 ``` 106 1074. Verify that the button is clicked and its size increases gradually, as shown in the following figure. 108 109 **Figure 2** Effect of clicking a **UIButton**<a name="fig1921134162020"></a> 110  111 112 113## UIImageView<a name="section19523161611259"></a> 114 115## When to Use<a name="section1274484210400"></a> 116 117**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. 118 119## Available APIs<a name="section74981992411"></a> 120 121**Table 2** Available functions in UIImageView 122 123<a name="table1584094244019"></a> 124<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> 125</th> 126<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> 127</th> 128</tr> 129</thead> 130<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> 131</td> 132<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> 133</td> 134</tr> 135<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> 136</td> 137<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> 138</td> 139</tr> 140<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> 141</td> 142<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> 143</td> 144</tr> 145<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> 146</td> 147<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> 148</td> 149</tr> 150<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> 151</td> 152<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> 153</td> 154</tr> 155<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> 156</td> 157<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> 158</td> 159</tr> 160<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> 161</td> 162<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> 163</td> 164</tr> 165<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> 166</td> 167<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> 168</td> 169</tr> 170<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> 171</td> 172<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> 173</td> 174</tr> 175</tbody> 176</table> 177 178## How to Develop \(Adaptive Mode\)<a name="section144341333134114"></a> 179 1801. Create a **UIImageView** instance. 181 182 ``` 183 UIImageView* imageView = new UIImageView(); 184 imageView->SetPosition(0, 30); 185 ``` 186 1872. Set the image path with binary data. 188 189 ``` 190 imageView->SetSrc("..\\config\\images\\A021_001.bin"); 191 ``` 192 1933. Verify that the **UIImageView** component is adaptive to the image. 194 195 **Figure 3** Image auto-adaption effect<a name="fig64751933144118"></a> 196  197 198 199## How to Develop \(Tile Mode\)<a name="section97178160421"></a> 200 2011. Create a **UIImageView** instance. 202 203 ``` 204 UIImageView* imageView = new UIImageView(); 205 imageView->SetPosition(0, 30); 206 ``` 207 2082. Set the image path. 209 210 ``` 211 imageView->SetSrc("..\\config\\images\\A021_001.bin"); 212 ``` 213 2143. Disable the image auto-adaptation effect and resize the image to display the image in tile mode. 215 216 ``` 217 imageView->SetAutoEnable(false); 218 imageView->Resize(454, 150); 219 ``` 220 2214. Verify that the tile mode has been enabled for the **UIImageView**. 222 223 **Figure 4** Image tile effect<a name="fig1075461619424"></a> 224  225 226 227## UILabel<a name="section16588132012911"></a> 228 229## When to Use<a name="section6870195634218"></a> 230 231**UILabel** displays text in an area. You can set the background color, text display style, and long text display effect for a label. 232 233## Available APIs<a name="section2012714510433"></a> 234 235**Table 3** Available functions in UILabel 236 237<a name="table9571115310551"></a> 238<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> 239</th> 240<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> 241</th> 242</tr> 243</thead> 244<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> 245</td> 246<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> 247</td> 248</tr> 249<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> 250</td> 251<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> 252</td> 253</tr> 254<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> 255</td> 256<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> 257</td> 258</tr> 259<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> 260</td> 261<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> 262</td> 263</tr> 264<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> 265</td> 266<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> 267</td> 268</tr> 269<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> 270</td> 271<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> 272</td> 273</tr> 274<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> 275<p id="p135721653115514"><a name="p135721653115514"></a><a name="p135721653115514"></a>UITextLanguageAlignment verticalAlign = TEXT_ALIGNMENT_TOP);</p> 276</td> 277<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> 278</td> 279</tr> 280<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> 281</td> 282<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> 283</td> 284</tr> 285<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> 286</td> 287<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> 288</td> 289</tr> 290<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> 291</td> 292<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> 293</td> 294</tr> 295<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> 296</td> 297<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> 298</td> 299</tr> 300<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> 301</td> 302<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> 303</td> 304</tr> 305<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> 306</td> 307<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> 308</td> 309</tr> 310<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> 311</td> 312<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> 313</td> 314</tr> 315<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> 316</td> 317<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> 318</td> 319</tr> 320<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> 321</td> 322<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> 323</td> 324</tr> 325<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> 326</td> 327<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> 328</td> 329</tr> 330<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> 331</td> 332<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> 333</td> 334</tr> 335<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> 336</td> 337<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> 338</td> 339</tr> 340<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> 341</td> 342<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> 343</td> 344</tr> 345<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> 346</td> 347<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> 348</td> 349</tr> 350<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> 351</td> 352<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> 353</td> 354</tr> 355</tbody> 356</table> 357 358## How to Develop \(Default Mode\)<a name="section83221538114410"></a> 359 3601. Create a **lUILabel** instance and set its size and position. 361 362 ``` 363 UILabel* label = new UILabel(); 364 label->SetPosition(x, y); 365 label->Resize(width, height); 366 ``` 367 3682. Set the font. 369 370 ``` 371 label->SetFont("SourceHanSansSC-Regular.otf", 30); 372 ``` 373 3743. Set the text. 375 376 ``` 377 label->SetText("label"); 378 ``` 379 3804. Verify the label size and display effect, as shown in the following figure. 381 382  383 384 385## How to Develop \(Background Color and Opacity\)<a name="section933360204510"></a> 386 3871. Create a **lUILabel** instance and set its size and position. 388 389 ``` 390 UILabel* label = new UILabel(); 391 label->SetPosition(x, y); 392 label->Resize(width, height); 393 ``` 394 3952. Set the font. 396 397 ``` 398 label->SetFont("SourceHanSansSC-Regular.otf", 30); 399 ``` 400 4013. Set the background color and opacity. 402 403 ``` 404 label->SetStyle(STYLE_BACKGROUND_COLOR, Color::Gray().full); 405 label->SetStyle(STYLE_BACKGROUND_OPA, 127); 406 label->SetText("Label"); 407 ``` 408 4094. Verify that the background color of the label is **Gray**, as shown in the following figure. 410 411  412 413 414## How to Develop \(Letter Spacing\)<a name="section19447826124518"></a> 415 4161. Create a **lUILabel** instance and set its size and position. 417 418 ``` 419 UILabel* label = new UILabel(); 420 label->SetPosition(x, y); 421 label->Resize(width, height); 422 ``` 423 4242. Set the font. 425 426 ``` 427 label->SetFont("SourceHanSansSC-Regular.otf", 30); 428 ``` 429 4303. Set the font color and letter spacing. 431 432 ``` 433 label->SetStyle(STYLE_BACKGROUND_COLOR, Color::Gray().full); 434 label->SetStyle(STYLE_LETTER_SPACE, 5); 435 label->SetText("Label"); 436 ``` 437 4384. Verify that the letter spacing is **5** pixels on the label, as shown in the following figure. 439 440  441 442 443## How to Develop \(Size-Adaptive Mode\)<a name="section101711842154617"></a> 444 445Regarding 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. 446 4471. Create a **lUILabel** instance and set its size and position. 448 449 ``` 450 UILabel* label = new UILabel(); 451 label->SetPosition(x, y); 452 label->Resize(width, height); 453 ``` 454 4552. Set the font. 456 457 ``` 458 label->SetFont("SourceHanSansSC-Regular.otf", 30); 459 ``` 460 4613. Set the font color to **Gray** and enable the label size to adapt to the text. 462 463 ``` 464 label->SetStyle(STYLE_BACKGROUND_COLOR, Color::Gray().full); 465 label->SetLineBreakMode(UILabel::LINE_BREAK_ADAPT); 466 label->SetText("123\n567890"); 467 ``` 468 4694. Verify that the label size adapts to the text, as shown in the following figure. 470 471  472 473 474## How to Develop \(Ellipsis Mode\)<a name="section1249519410471"></a> 475 476In ellipsis mode, an ellipsis \(...\) is displayed at the end of the label if the text cannot be completely displayed. 477 4781. Create a **lUILabel** instance and set its size and position. 479 480 ``` 481 UILabel* label = new UILabel(); 482 label->SetPosition(x, y); 483 label->Resize(width, height); 484 ``` 485 4862. Set the font. 487 488 ``` 489 label->SetFont("SourceHanSansSC-Regular.otf", 30); 490 ``` 491 4923. Set the text display mode to **LINE\_BREAK\_ELLIPSIS**. 493 494 ``` 495 label->SetStyle(STYLE_BACKGROUND_COLOR, Color::Gray().full); 496 label->SetLineBreakMode(UILabel::LINE_BREAK_ELLIPSIS); 497 label->SetText("123567890"); 498 ``` 499 5004. Verify that the ellipsis mode has taken effect on the label, as shown in the following figure. 501 502  503 504 505## How to Develop \(Scrolling Mode\)<a name="section15643122618478"></a> 506 507In scrolling mode, long text is kept scrolling on a screen to bring the entire text into view. 508 5091. Create a **lUILabel** instance and set its size and position. 510 511 ``` 512 UILabel* label = new UILabel(); 513 label->SetPosition(x, y); 514 label->Resize(width, height); 515 ``` 516 5172. Set the font. 518 519 ``` 520 label->SetFont("SourceHanSansSC-Regular.otf", 30); 521 ``` 522 5233. Set the text display mode to **UI\_LABEL\_LONG\_ROLL**. 524 525 ``` 526 label->SetStyle(STYLE_BACKGROUND_COLOR, Color::Gray().full); 527 label->SetStyle(STYLE_BACKGROUND_OPA, 127); 528 label->SetLineBreakMode(UILabel::LINE_BREAK_MARQUEE); 529 label->SetText("123567890"); 530 ``` 531 5324. Verify that the text is scrolling on the label, as shown in the following figure. 533 534 .gif) 535 536 537
