# Development Guidelines on Common Components - [UIButton](#section145353310214) - [When to Use](#section1169616141577) - [Available APIs](#section341211538315) - [How to Develop](#section22501726193214) - [UIImageView](#section19523161611259) - [When to Use](#section1274484210400) - [Available APIs](#section74981992411) - [How to Develop \(Adaptive Mode\)](#section144341333134114) - [How to Develop \(Tile Mode\)](#section97178160421) - [UILabel](#section16588132012911) - [When to Use](#section6870195634218) - [Available APIs](#section2012714510433) - [How to Develop \(Default Mode\)](#section83221538114410) - [How to Develop \(Background Color and Opacity\)](#section933360204510) - [How to Develop \(Letter Spacing\)](#section19447826124518) - [How to Develop \(Size-Adaptive Mode\)](#section101711842154617) - [How to Develop \(Ellipsis Mode\)](#section1249519410471) - [How to Develop \(Scrolling Mode\)](#section15643122618478) Common components inherit from the base class **UIView**. Child components cannot be added to common components, such as buttons, images, and labels. **Figure 1** Tree structure of common components ![](figures/tree-structure-of-common-components.png "tree-structure-of-common-components") **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**. ## UIButton ## When to Use **UIButton** supports the click event and allows you to set styles in different states. ## Available APIs **Table 1** Available functions in UIButton

Function

Description

void SetImageSrc (const char *defaultImgSrc, const char *triggeredImgSrc)

Sets the button image.

void SetImagePosition (const int16_t x, const int16_t y)

Sets the position of the button image.

int16_t GetImageX () const

Obtains the x-coordinate of the button image.

int16_t GetImageY () const

Obtains the y-coordinate of the button image.

const ImageInfo* GetCurImageSrc() const

Obtains the image of the button in the current state.

Style& GetStyleForState (ButtonState state)

Sets the style for the button in the current state.

voidSetStyleForState (const Style &style, ButtonState state)

Sets the style for the button in a specified state.

void Disable ()

Disables the button.

void Enable ()

Enables the button.
## How to Develop 1. Implement the click event. ``` 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. Create a **UIButton** instance. ``` UIButton* button = new UIButton(); button->SetPosition(50, 50); button->SetWidth(100); button->SetHeight(50); ``` 3. Register the click event callback for **UIButton**. ``` button->SetOnClickListener(new TestBtnOnClickListener()); ``` 4. Verify that the button is clicked and its size increases gradually, as shown in the following figure. **Figure 2** Effect of clicking a **UIButton** ![](figures/effect-of-clicking-a-uibutton.gif "effect-of-clicking-a-uibutton") ## UIImageView ## When to Use **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. ## Available APIs **Table 2** Available functions in UIImageView

Function

Description

void SetSrc (const char *src)

Sets the image path with binary data.

void SetSrc (const ImageInfo *src)

Sets the pointer to image information.

void SetAutoEnable (bool enable)

Sets whether the component size adapts to the image size.

const void* GetSrcType () const

Obtains the image type.

bool GetAutoEnable () const

Checks whether the component size adapts to the image size.

void SetBlurLevel(BlurLevel level)

Sets the blur level for the image background.

BlurLevel GetBlurLevel() const

Obtains the blur level of the image background.

void SetTransformAlgorithm(TransformAlgorithm algorithm)

Sets the transformation algorithm.

TransformAlgorithm GetTransformAlgorithm() const

Obtains the transformation algorithm.
## How to Develop \(Adaptive Mode\) 1. Create a **UIImageView** instance. ``` UIImageView* imageView = new UIImageView(); imageView->SetPosition(0, 30); ``` 2. Set the image path with binary data. ``` imageView->SetSrc("..\\config\\images\\A021_001.bin"); ``` 3. Verify that the **UIImageView** component is adaptive to the image. **Figure 3** Image auto-adaption effect ![](figures/image-auto-adaption-effect.png "image-auto-adaption-effect") ## How to Develop \(Tile Mode\) 1. Create a **UIImageView** instance. ``` UIImageView* imageView = new UIImageView(); imageView->SetPosition(0, 30); ``` 2. Set the image path. ``` imageView->SetSrc("..\\config\\images\\A021_001.bin"); ``` 3. Disable the image auto-adaptation effect and resize the image to display the image in tile mode. ``` imageView->SetAutoEnable(false); imageView->Resize(454, 150); ``` 4. Verify that the tile mode has been enabled for the **UIImageView**. **Figure 4** Image tile effect ![](figures/image-tile-effect.png "image-tile-effect") ## UILabel ## When to Use **UILabel** displays text in an area. You can set the background color, text display style, and long text display effect for a label. ## Available APIs **Table 3** Available functions in UILabel

Function

Description

void SetText(const char* text);

Sets text for the label.

const char* GetText() const;

Obtains text of the label.

void SetLineBreakMode(const uint8_t lineBreakMode);

Sets the label mode, such as truncation and automatic extension.

uint8_t GetLineBreakMode() const

Obtains the label mode.

void SetTextColor(ColorType color)

Set the text color.

ColorType GetTextColor() const

Obtains the text color.

void SetAlign(UITextLanguageAlignment horizontalAlign,

UITextLanguageAlignment verticalAlign = TEXT_ALIGNMENT_TOP);

Sets the text alignment mode.

UITextLanguageAlignment GetHorAlign() const

Obtains the horizontal alignment mode of text.

UITextLanguageAlignment GetVerAlign() const

Obtains the vertical alignment mode of text.

void SetDirect(UITextLanguageDirect direct)

Sets the text display direction.

UITextLanguageDirect GetDirect() const

Obtains the text display direction.

void SetFontId(uint8_t fontId);

Sets the dynamic font ID.

uint8_t GetFontId() const

Obtains the dynamic font ID.

void SetFont(const char *name, uint8_t size);

Sets the font name and size.

void SetAnimatorSpeed(uint16_t animSpeed);

Sets the font rotation speed.

uint16_t GetTextWidth();

Obtains the font width.

uint16_t GetTextHeight();

Obtains the font height.

void SetRollStartPos(int16_t pos)

Sets the rotation position.

int16_t GetRollStartPos() const

Obtains the rotation position.

void SetTextRotation(LabelRotateDegree angle)

Sets the enumerated value of the text rotation angle.

LabelRotateDegree GetTextRotation() const

Obtains the enumerated value of the text rotation angle.

uint16_t GetTextRotateDegree() const

Obtains the number of text rotation degrees.
## How to Develop \(Default Mode\) 1. Create a **lUILabel** instance and set its size and position. ``` UILabel* label = new UILabel(); label->SetPosition(x, y); label->Resize(width, height); ``` 2. Set the font. ``` label->SetFont("SourceHanSansSC-Regular.otf", 30); ``` 3. Set the text. ``` label->SetText("label"); ``` 4. Verify the label size and display effect, as shown in the following figure. ![](figures/en-us_image_0000001051782526.png) ## How to Develop \(Background Color and Opacity\) 1. Create a **lUILabel** instance and set its size and position. ``` UILabel* label = new UILabel(); label->SetPosition(x, y); label->Resize(width, height); ``` 2. Set the font. ``` label->SetFont("SourceHanSansSC-Regular.otf", 30); ``` 3. Set the background color and opacity. ``` label->SetStyle(STYLE_BACKGROUND_COLOR, Color::Gray().full); label->SetStyle(STYLE_BACKGROUND_OPA, 127); label->SetText("Label"); ``` 4. Verify that the background color of the label is **Gray**, as shown in the following figure. ![](figures/en-us_image_0000001052582522.png) ## How to Develop \(Letter Spacing\) 1. Create a **lUILabel** instance and set its size and position. ``` UILabel* label = new UILabel(); label->SetPosition(x, y); label->Resize(width, height); ``` 2. Set the font. ``` label->SetFont("SourceHanSansSC-Regular.otf", 30); ``` 3. Set the font color and letter spacing. ``` label->SetStyle(STYLE_BACKGROUND_COLOR, Color::Gray().full); label->SetStyle(STYLE_LETTER_SPACE, 5); label->SetText("Label"); ``` 4. Verify that the letter spacing is **5** pixels on the label, as shown in the following figure. ![](figures/en-us_image_0000001052942531.png) ## How to Develop \(Size-Adaptive Mode\) Regarding 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. 1. Create a **lUILabel** instance and set its size and position. ``` UILabel* label = new UILabel(); label->SetPosition(x, y); label->Resize(width, height); ``` 2. Set the font. ``` label->SetFont("SourceHanSansSC-Regular.otf", 30); ``` 3. Set the font color to **Gray** and enable the label size to adapt to the text. ``` label->SetStyle(STYLE_BACKGROUND_COLOR, Color::Gray().full); label->SetLineBreakMode(UILabel::LINE_BREAK_ADAPT); label->SetText("123\n567890"); ``` 4. Verify that the label size adapts to the text, as shown in the following figure. ![](figures/en-us_image_0000001052782555.png) ## How to Develop \(Ellipsis Mode\) In ellipsis mode, an ellipsis \(...\) is displayed at the end of the label if the text cannot be completely displayed. 1. Create a **lUILabel** instance and set its size and position. ``` UILabel* label = new UILabel(); label->SetPosition(x, y); label->Resize(width, height); ``` 2. Set the font. ``` label->SetFont("SourceHanSansSC-Regular.otf", 30); ``` 3. Set the text display mode to **LINE\_BREAK\_ELLIPSIS**. ``` label->SetStyle(STYLE_BACKGROUND_COLOR, Color::Gray().full); label->SetLineBreakMode(UILabel::LINE_BREAK_ELLIPSIS); label->SetText("123567890"); ``` 4. Verify that the ellipsis mode has taken effect on the label, as shown in the following figure. ![](figures/en-us_image_0000001052662559.png) ## How to Develop \(Scrolling Mode\) In scrolling mode, long text is kept scrolling on a screen to bring the entire text into view. 1. Create a **lUILabel** instance and set its size and position. ``` UILabel* label = new UILabel(); label->SetPosition(x, y); label->Resize(width, height); ``` 2. Set the font. ``` label->SetFont("SourceHanSansSC-Regular.otf", 30); ``` 3. Set the text display mode to **UI\_LABEL\_LONG\_ROLL**. ``` label->SetStyle(STYLE_BACKGROUND_COLOR, Color::Gray().full); label->SetStyle(STYLE_BACKGROUND_OPA, 127); label->SetLineBreakMode(UILabel::LINE_BREAK_MARQUEE); label->SetText("123567890"); ``` 4. Verify that the text is scrolling on the label, as shown in the following figure. ![](figures/20200721-223604(espace).gif)