代码拉取完成，页面将自动刷新
同步操作将从 OpenHarmony/docs 强制同步，此操作会覆盖自 Fork 仓库以来所做的任何修改，且无法恢复！！！
确定后同步将在后台操作，完成时将刷新页面，请耐心等待。
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 supports the click event and allows you to set styles in different states.
Table 1 Available functions in UIButton
|
void SetImageSrc (const char *defaultImgSrc, const char *triggeredImgSrc) |
|
|
voidSetStyleForState (const Style &style, ButtonState state) |
|
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;
}
};
Create a UIButton instance.
UIButton* button = new UIButton();
button->SetPosition(50, 50);
button->SetWidth(100);
button->SetHeight(50);
Register the click event callback for UIButton.
button->SetOnClickListener(new TestBtnOnClickListener());
Verify that the button is clicked and its size increases gradually, as shown in the following figure.
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.
Table 2 Available functions in UIImageView
Create a UIImageView instance.
UIImageView* imageView = new UIImageView();
imageView->SetPosition(0, 30);
Set the image path with binary data.
imageView->SetSrc("..\\config\\images\\A021_001.bin");
Verify that the UIImageView component is adaptive to the image.
Create a UIImageView instance.
UIImageView* imageView = new UIImageView();
imageView->SetPosition(0, 30);
Set the image path.
imageView->SetSrc("..\\config\\images\\A021_001.bin");
Disable the image auto-adaptation effect and resize the image to display the image in tile mode.
imageView->SetAutoEnable(false);
imageView->Resize(454, 150);
Verify that the tile mode has been enabled for the UIImageView.
UILabel displays text in an area. You can set the background color, text display style, and long text display effect for a label.
Table 3 Available functions in UILabel
|
Sets the label mode, such as truncation and automatic extension. |
|
|
void SetAlign(UITextLanguageAlignment horizontalAlign, UITextLanguageAlignment verticalAlign = TEXT_ALIGNMENT_TOP); |
|
Create a lUILabel instance and set its size and position.
UILabel* label = new UILabel();
label->SetPosition(x, y);
label->Resize(width, height);
Set the font.
label->SetFont("SourceHanSansSC-Regular.otf", 30);
Set the text.
label->SetText("label");
Verify the label size and display effect, as shown in the following figure.
Create a lUILabel instance and set its size and position.
UILabel* label = new UILabel();
label->SetPosition(x, y);
label->Resize(width, height);
Set the font.
label->SetFont("SourceHanSansSC-Regular.otf", 30);
Set the background color and opacity.
label->SetStyle(STYLE_BACKGROUND_COLOR, Color::Gray().full);
label->SetStyle(STYLE_BACKGROUND_OPA, 127);
label->SetText("Label");
Verify that the background color of the label is Gray, as shown in the following figure.
Create a lUILabel instance and set its size and position.
UILabel* label = new UILabel();
label->SetPosition(x, y);
label->Resize(width, height);
Set the font.
label->SetFont("SourceHanSansSC-Regular.otf", 30);
Set the font color and letter spacing.
label->SetStyle(STYLE_BACKGROUND_COLOR, Color::Gray().full);
label->SetStyle(STYLE_LETTER_SPACE, 5);
label->SetText("Label");
Verify that the letter spacing is 5 pixels on the label, as shown in the following figure.
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.
Create a lUILabel instance and set its size and position.
UILabel* label = new UILabel();
label->SetPosition(x, y);
label->Resize(width, height);
Set the font.
label->SetFont("SourceHanSansSC-Regular.otf", 30);
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");
Verify that the label size adapts to the text, as shown in the following figure.
In ellipsis mode, an ellipsis (...) is displayed at the end of the label if the text cannot be completely displayed.
Create a lUILabel instance and set its size and position.
UILabel* label = new UILabel();
label->SetPosition(x, y);
label->Resize(width, height);
Set the font.
label->SetFont("SourceHanSansSC-Regular.otf", 30);
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");
Verify that the ellipsis mode has taken effect on the label, as shown in the following figure.
In scrolling mode, long text is kept scrolling on a screen to bring the entire text into view.
Create a lUILabel instance and set its size and position.
UILabel* label = new UILabel();
label->SetPosition(x, y);
label->Resize(width, height);
Set the font.
label->SetFont("SourceHanSansSC-Regular.otf", 30);
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");
Verify that the text is scrolling on the label, as shown in the following figure.
.gif)
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。