Common Component Development

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

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

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

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

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.

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.

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.

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.

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.

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.