普通组件开发指导
- UIButton
- 使用场景
- 接口说明
- 开发步骤
- UIImageView
- 使用场景
- 接口说明
- 开发步骤(自适应)
- 开发步骤(平铺模式)
- UILabel
- 使用场景
- 接口说明
- 开发步骤(默认模式)
- 开发步骤(背景色和透明度)
- 开发步骤(字符间距)
- 开发步骤(大小自适应)
- 开发步骤(省略号模式)
- 开发步骤(滚动模式)
普通组件均继承于基类UIView,不可以添加子组件,常用的普通组件有button、image、label等。
UIView为基础类,UIAbstractProgress、UIArcLabel(旋转字体)、UIButton(按键)、UICanvas(画布)、UILabel(字体)、UIImageView(图片)从UIView继承。UIBoxProgress、UICircleProgress从UIAbstractProgress继承,UILabelButton和UIRepeatButton从UIButton继承,UIImageAnimatorView和UITextureMapper从UIImageView继承。
UIButton
使用场景
UIButton组件,提供可点击功能,同时可设置不同状态下样式。
接口说明
表 1 button接口说明
void SetImageSrc (const char *defaultImgSrc, const char *triggeredImgSrc) |
|
voidSetStyleForState (const Style &style, ButtonState state) |
|
开发步骤
-
实现点击事件。
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; } };
-
创建一个UIButton。
UIButton* button = new UIButton(); button->SetPosition(50, 50); button->SetWidth(100); button->SetHeight(50);
-
给UIButton注册点击事件回调。
button->SetOnClickListener(new TestBtnOnClickListener());
-
检查Button点击效果如下图所示,Button逐渐变大。
UIImageView
使用场景
图片组件,提供图片显示,透明度设置,图片旋转、缩放功能。支持的图片格式为RGB565、RGB888、RGBA8888、PNG、JPG。
接口说明
表 2 image接口说明
开发步骤(自适应)
-
创建一个UIImageView。
UIImageView* imageView = new UIImageView(); imageView->SetPosition(0, 30);
-
设置二进制格式的图片。
imageView->SetSrc("..\\config\\images\\A021_001.bin");
-
检查UIImageView控件大小与图片相同。
开发步骤(平铺模式)
-
创建一个UIImageView。
UIImageView* imageView = new UIImageView(); imageView->SetPosition(0, 30);
-
设置图片。
imageView->SetSrc("..\\config\\images\\A021_001.bin");
-
取消图片自适应,设置图片大小,平铺显示效果。
imageView->SetAutoEnable(false); imageView->Resize(454, 150);
-
检查UIImageView控件显示为平铺效果。
UILabel
使用场景
标签(label)是在一块区域上显示文本字符串的组件,可设置区域背景色、文字的显示样式和长文本的显示效果等。
接口说明
表 3 label接口说明
void SetAlign(UITextLanguageAlignment horizontalAlign, UITextLanguageAlignment verticalAlign = TEXT_ALIGNMENT_TOP); |
|
开发步骤(默认模式)
-
创建label,设置大小和位置信息。
UILabel* label = new UILabel(); label->SetPosition(x, y); label->Resize(width, height);
-
设置字形信息。
label->SetFont("SourceHanSansSC-Regular.otf", 30);
-
设置文本数据。
label->SetText("label");
-
检查label大小和显示效果正常,如下图所示。
开发步骤(背景色和透明度)
-
创建label,设置大小和位置信息。
UILabel* label = new UILabel(); label->SetPosition(x, y); label->Resize(width, height);
-
设置字形信息。
label->SetFont("SourceHanSansSC-Regular.otf", 30);
-
设置背景颜色及透明度效果。
label->SetStyle(STYLE_BACKGROUND_COLOR, Color::Gray().full); label->SetStyle(STYLE_BACKGROUND_OPA, 127); label->SetText("Label");
-
检查label背景色为Gray,如下图所示。
开发步骤(字符间距)
-
创建label,设置大小和位置信息。
UILabel* label = new UILabel(); label->SetPosition(x, y); label->Resize(width, height);
-
设置字形信息。
label->SetFont("SourceHanSansSC-Regular.otf", 30);
-
设置字体颜色和字间距效果。
label->SetStyle(STYLE_BACKGROUND_COLOR, Color::Gray().full); label->SetStyle(STYLE_LETTER_SPACE, 5); label->SetText("Label");
-
检查label字符间距为5,如下图所示。
开发步骤(大小自适应)
当文本过长时,可根据文本信息自动调整label组件大小,也可以设置文本截断或者文本滚动效果。
-
创建label,设置大小和位置信息。
UILabel* label = new UILabel(); label->SetPosition(x, y); label->Resize(width, height);
-
设置字形信息。
label->SetFont("SourceHanSansSC-Regular.otf", 30);
-
设置字体颜色为Gray,组件大小自适应文本内容。
label->SetStyle(STYLE_BACKGROUND_COLOR, Color::Gray().full); label->SetLineBreakMode(UILabel::LINE_BREAK_ADAPT); label->SetText("123\n567890");
-
检查label大小自适应文本内容,如下图所示。
开发步骤(省略号模式)
省略号模式指文本内容显示不下时,在末尾显示省略号。
-
创建label,设置大小和位置信息。
UILabel* label = new UILabel(); label->SetPosition(x, y); label->Resize(width, height);
-
设置字形信息。
label->SetFont("SourceHanSansSC-Regular.otf", 30);
-
设置换行模式为DOT模式
label->SetStyle(STYLE_BACKGROUND_COLOR, Color::Gray().full); label->SetLineBreakMode(UILabel::LINE_BREAK_ELLIPSIS); label->SetText("123567890");
-
检查label DOT模式效果,如下图所示,末尾显示省略号。
开发步骤(滚动模式)
文本滚动显示。
-
创建label,设置大小和位置信息。
UILabel* label = new UILabel(); label->SetPosition(x, y); label->Resize(width, height);
-
设置字形信息。
label->SetFont("SourceHanSansSC-Regular.otf", 30);
-
设置换行模式为滚动模式
label->SetStyle(STYLE_BACKGROUND_COLOR, Color::Gray().full); label->SetStyle(STYLE_BACKGROUND_OPA, 127); label->SetLineBreakMode(UILabel::LINE_BREAK_MARQUEE); label->SetText("123567890");
-
检查label滚动模式效果,如下图所示。