普通组件开发指导

普通组件均继承于基类UIView,不可以添加子组件,常用的普通组件有button、image、label等。

图 1 普通组件树结构
普通组件开发指导 - 图1

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)

设置button图片

void SetImagePosition (const int16_t x, const int16_t y)

设置button图片位置

int16_t GetImageX () const

获取图片X坐标

int16_t GetImageY () const

获取图片Y坐标

const ImageInfo* GetCurImageSrc() const

获取当前状态图片

Style& GetStyleForState (ButtonState state)

设置button当前状态的style

voidSetStyleForState (const Style &style, ButtonState state)

设置button指定状态的style

void Disable ()

去使能button

void Enable ()

使能button

开发步骤

  1. 实现点击事件。

    1. classTestBtnOnClickListener:public OHOS::UIView::OnClickListener{
    2. boolOnClick(UIView& view,constClickEvent&event)override
    3. {
    4. int16_t width = view.GetWidth()+10;
    5. int16_t height = view.GetHeight()+10;
    6. view.Resize(width, height);
    7. view.Invalidate();
    8. returntrue;
    9. }
    10. };
  2. 创建一个UIButton。

    1. UIButton* button =newUIButton();
    2. button->SetPosition(50,50);
    3. button->SetWidth(100);
    4. button->SetHeight(50);
  3. 给UIButton注册点击事件回调。

    1. button->SetOnClickListener(newTestBtnOnClickListener());
  4. 检查Button点击效果如下图所示,Button逐渐变大。

    图 2 UIButton点击效果
    普通组件开发指导 - 图2

UIImageView

使用场景

图片组件,提供图片显示,透明度设置,图片旋转、缩放功能。支持的图片格式为RGB565、RGB888、RGBA8888、PNG、JPG。

接口说明

表 2 image接口说明

方法

功能

void SetSrc (const char src)

设置二进制图片路径

void SetSrc (const ImageInfo src)

设置图片指针

void SetAutoEnable (bool enable)

设置组件大小跟随image大小变化

const void* GetSrcType () const

获取图片类型

bool GetAutoEnable () const

获取组件大小是否跟随image大小变化

void SetBlurLevel(BlurLevel level)

设置模糊等级

BlurLevel GetBlurLevel() const

获取模糊等级

void SetTransformAlgorithm(TransformAlgorithm algorithm)

设置旋转算法

TransformAlgorithm GetTransformAlgorithm() const

获取旋转算法

开发步骤(自适应)

  1. 创建一个UIImageView。

    1. UIImageView* imageView =newUIImageView();
    2. imageView->SetPosition(0,30);
  2. 设置二进制格式的图片。

    1. imageView->SetSrc("..\\config\\images\\A021_001.bin");
  3. 检查UIImageView控件大小与图片相同。

    图 3 自适应模式图片效果图
    普通组件开发指导 - 图3

开发步骤(平铺模式)

  1. 创建一个UIImageView。

    1. UIImageView* imageView =newUIImageView();
    2. imageView->SetPosition(0,30);
  2. 设置图片。

    1. imageView->SetSrc("..\\config\\images\\A021_001.bin");
  3. 取消图片自适应,设置图片大小,平铺显示效果。

    1. imageView->SetAutoEnable(false);
    2. imageView->Resize(454,150);
  4. 检查UIImageView控件显示为平铺效果。

    图 4 平铺模式图片效果图
    普通组件开发指导 - 图4

UILabel

使用场景

标签(label)是在一块区域上显示文本字符串的组件,可设置区域背景色、文字的显示样式和长文本的显示效果等。

接口说明

表 3 label接口说明

方法

功能

void SetText(const char text);

设置文字

const char GetText() const;

获取text

void SetLineBreakMode(const uint8_t lineBreakMode);

设置label模式,例如截断,自动扩展等。

uint8_t GetLineBreakMode() const

获取label模式

void SetTextColor(ColorType color)

设置文本颜色

ColorType GetTextColor() const

获取文本颜色

void SetAlign(UITextLanguageAlignment horizontalAlign,

UITextLanguageAlignment verticalAlign = TEXT_ALIGNMENT_TOP);

设置文本对齐方式

UITextLanguageAlignment GetHorAlign() const

获取文本水平对齐方式

UITextLanguageAlignment GetVerAlign() const

获取文本竖直对齐方式

void SetDirect(UITextLanguageDirect direct)

设置文本显示方向

UITextLanguageDirect GetDirect() const

获取文本显示方向

void SetFontId(uint8_t fontId);

设置动态字体id

uint8_t GetFontId() const

获取动态字体id

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

设置字的名字和大小

void SetAnimatorSpeed(uint16_t animSpeed);

设置字体旋转的速度

uint16_t GetTextWidth();

获取字体的宽

uint16_t GetTextHeight();

获取字体的高

void SetRollStartPos(int16_t pos)

设置旋转的位置

int16_t GetRollStartPos() const

获取旋转的位置

void SetTextRotation(LabelRotateDegree angle)

设置文本旋转角度枚举值

LabelRotateDegree GetTextRotation() const

获取文本旋转角度枚举值

uint16_t GetTextRotateDegree() const

获取文本旋转角度数值

开发步骤(默认模式)

  1. 创建label,设置大小和位置信息。

    1. UILabel* label =newUILabel();
    2. label->SetPosition(x, y);
    3. label->Resize(width, height);
  2. 设置字形信息。

    1. label->SetFont("SourceHanSansSC-Regular.otf",30);
  3. 设置文本数据。

    1. label->SetText("label");
  4. 检查label大小和显示效果正常,如下图所示。

    普通组件开发指导 - 图5

开发步骤(背景色和透明度)

  1. 创建label,设置大小和位置信息。

    1. UILabel* label =newUILabel();
    2. label->SetPosition(x, y);
    3. label->Resize(width, height);
  2. 设置字形信息。

    1. label->SetFont("SourceHanSansSC-Regular.otf",30);
  3. 设置背景颜色及透明度效果。

    1. label->SetStyle(STYLE_BACKGROUND_COLOR,Color::Gray().full);
    2. label->SetStyle(STYLE_BACKGROUND_OPA,127);
    3. label->SetText("Label");
  4. 检查label背景色为Gray,如下图所示。

    普通组件开发指导 - 图6

开发步骤(字符间距)

  1. 创建label,设置大小和位置信息。

    1. UILabel* label =newUILabel();
    2. label->SetPosition(x, y);
    3. label->Resize(width, height);
  2. 设置字形信息。

    1. label->SetFont("SourceHanSansSC-Regular.otf",30);
  3. 设置字体颜色和字间距效果。

    1. label->SetStyle(STYLE_BACKGROUND_COLOR,Color::Gray().full);
    2. label->SetStyle(STYLE_LETTER_SPACE,5);
    3. label->SetText("Label");
  4. 检查label字符间距为5,如下图所示。

    普通组件开发指导 - 图7

开发步骤(大小自适应)

当文本过长时,可根据文本信息自动调整label组件大小,也可以设置文本截断或者文本滚动效果。

  1. 创建label,设置大小和位置信息。

    1. UILabel* label =newUILabel();
    2. label->SetPosition(x, y);
    3. label->Resize(width, height);
  2. 设置字形信息。

    1. label->SetFont("SourceHanSansSC-Regular.otf",30);
  3. 设置字体颜色为Gray,组件大小自适应文本内容。

    1. label->SetStyle(STYLE_BACKGROUND_COLOR,Color::Gray().full);
    2. label->SetLineBreakMode(UILabel::LINE_BREAK_ADAPT);
    3. label->SetText("123\n567890");
  4. 检查label大小自适应文本内容,如下图所示。

    普通组件开发指导 - 图8

开发步骤(省略号模式)

省略号模式指文本内容显示不下时,在末尾显示省略号。

  1. 创建label,设置大小和位置信息。

    1. UILabel* label =newUILabel();
    2. label->SetPosition(x, y);
    3. label->Resize(width, height);
  2. 设置字形信息。

    1. label->SetFont("SourceHanSansSC-Regular.otf",30);
  3. 设置换行模式为DOT模式

    1. label->SetStyle(STYLE_BACKGROUND_COLOR,Color::Gray().full);
    2. label->SetLineBreakMode(UILabel::LINE_BREAK_ELLIPSIS);
    3. label->SetText("123567890");
  4. 检查label DOT模式效果,如下图所示,末尾显示省略号。

    普通组件开发指导 - 图9

开发步骤(滚动模式)

文本滚动显示。

  1. 创建label,设置大小和位置信息。

    1. UILabel* label =newUILabel();
    2. label->SetPosition(x, y);
    3. label->Resize(width, height);
  2. 设置字形信息。

    1. label->SetFont("SourceHanSansSC-Regular.otf",30);
  3. 设置换行模式为滚动模式

    1. label->SetStyle(STYLE_BACKGROUND_COLOR,Color::Gray().full);
    2. label->SetStyle(STYLE_BACKGROUND_OPA,127);
    3. label->SetLineBreakMode(UILabel::LINE_BREAK_MARQUEE);
    4. label->SetText("123567890");
  4. 检查label滚动模式效果,如下图所示。

    普通组件开发指导 - 图10.gif)