UIKit 非容器类组件
非容器类组件
UIImageView
UIImageView用于展示图片。
须知:
- 使用时需注意AutoEnable和ResizeMode属性设置顺序,建议AutoEnable在ResizeMode之前进行设置。
- UIImageView背景不透明度建议调整为0。
表 1 UIImageView核心函数
| 函数 | 介绍 |
|---|---|
| void SetSrc(const char* src) | 通过路径来设置图片。 |
| void SetSrc(const ImageInfo* src) | 设置组件图片信息。 |
| void SetAutoEnable(bool enable) | 设置组件自适应图片。 |
| void SetBlurLevel(BlurLevel level) | 设置旋转或缩放此图像时的模糊级别。 |
| void SetResizeMode(ImageResizeMode mode) | 设置图片缩放模式(平铺、填充、保持宽高比)。 • 在AutoEnable为true时,SetResizeMode()不生效。 • 在AutoEnable为false时,需要先设置宽高,再设置SetResizeMode()。 |
| void SetHeight(int16_t height) override | 设置组件的高度。 |
| void SetWidth(int16_t width) override | 设置组件的宽度。 |
UIImageAnimator
UIImageAnimator组件继承自UIImageView,主要用于播放序列帧。
表 1 UIImageAnimator核心函数
说明: 父控件为可滑动控件时,必需调用SetSizeFixed(True)。
UILabel
UILabel组件主要用于展示文字。
须知: 在设置为LINE_BREAK_MARQUEE模式下,最小的滚动像素为1。即在设置滚动速度为0时,不是停止状态。
表 1 UILabel核心函数
| 函数 | 介绍 |
|---|---|
| void SetText(const char* text) | 设置展示文本内容。 参数:要展示的字符串 |
| void SetLineBreakMode(const uint8_t lineBreakMode) | 设置展示模式。例如是否包裹内容展示,是否换行等,具体请参考UILabel::LineBreakMode。 |
| void SetTextColor(ColorType color) | 设置文字颜色。 |
| void SetAlign(UITextLanguageAlignment horizontalAlign, UITextLanguageAlignment verticalAlign = TEXT_ALIGNMENT_TOP) | 设置对齐方式。 |
| void SetDirect(UITextLanguageDirect direct) | 设置文本展示方向。 |
| void SetFontId(uint8_t fontId) | 设置点阵字库ID。 |
| void SetFont(const char* name, uint8_t size) | 设置矢量字体和大小。 支持仅设置字体大小,字库name设置为空;常用于多语言场景,文本通过子类提供的接口SetTextId来配置。 |
| void SetRollStartPos(int16_t pos) | 设置字体滚动位置。 |
| void SetWidth(int16_t width) override | 设置当前组件的宽度。 |
| void SetHeight(int16_t height) override | 设置当前组件的高度。 |
| void SetMarqueeBlankNum(uint16_t size) | 设置文本循环滚动间隔的空白字符数量(仅作用于LineBreakMode = MARQUEE时)。 |
UILabelExt
UILabelExt继承于UILabel,支持文本语言切换以及复杂语系的文本整形。
表 1 UILabelExt核心函数
| 函数 | 描述 |
|---|---|
| void SetTextId(uint16_t textId) | 设置TextId。 • 参数:uint16_t textId • 返回值:void |
| void ForceResetText() override | 强制根据控件内部的TextId设置文本内容。 • 参数:N/A • 返回值:void |
UIButton
UIButton是可点击的按钮,用户可以通过函数设置图片以此改变默认展示效果。
表 1 UIButton核心函数
| 函数 | 介绍 |
|---|---|
| void SetImageSrc(const char defaultImgSrc, const char triggeredImgSrc) | 设置UIButton默认展示的图片和点击后展示的图片。 参数:图片文件路径。 |
| void SetImageSrc(const ImageInfo defaultImgSrc, const ImageInfo triggeredImgSrc) | 设置UIButton默认展示的图片和点击后展示的图片,ImageInfo主要用于加载系统内置资源。 参数:传入的ImageInfo。 |
| void SetImagePosition(const int16_t x, const int16_t y) | 设置资源图片相对于控件的位置。 |
| void Disable() | UIButton不可点击。 |
| void Enable() | 恢复UIButton可点击。 |
| void SetStateForStyle(ButtonState state) | 设置样式状态。非当前状态,而是即将要设置的样式对应的状态。 |
| void SetStyle(uint8_t key, int64_t value) override | 设置当前style对应属性的样式。 |
| void SetStyleForState(uint8_t key, int64_t value, ButtonState state) | 定制对应状态的样式。 |
| void SetHeight(int16_t height) | 设置组件高度。 |
| void SetWidth(int16_t width) | 设置组件宽度。 |
UILabelButtonExt
UILabelButtonExt继承于UILabelButton,支持文本语言切换以及整形。
表 1 UILabelButtonExt核心函数
| 函数 | 描述 |
|---|---|
| void SetTextId(uint16_t textId) | 设置TextId。 • 参数:uint16_t textId • 返回值:void |
| void ForceResetText() override | 强制根据控件内部的TextId设置文本内容。 • 参数:N/A • 返回值:void |
UILabelButton
UILabelButton是展示文字的按钮。该组件继承于UIButton,事件监听可以使用UIButton的函数设置监听器。
表 1 UILabelButton核心函数
| 函数 | 介绍 |
|---|---|
| void SetText(const char* text) | 为组件设置文字。 |
| const char* GetText() const | 获取组件当前设置的文字。 |
| void SetLabelPosition(int16_t x, int16_t y) | 设置文字在组件位置。 |
| Point GetLabelPosition() const | 获取文字在组件位置。 |
| void SetAlign(UITextLanguageAlignment align) | 设置文字在组件中的对齐方式。 |
| void SetDirect(UITextLanguageDirect direct) | 设置文字在组件中的方向。 |
| void SetTextColor(ColorType color) | 设置文字颜色。 |
| void SetFont(const char* name, uint8_t size) | 设置字体和字体大小。 |
| void SetLabelStyle(uint8_t key, int64_t value) | 设置标签样式。 |
UICheckBox
UICheckBox常用来表示状态开关,包括选中和非选择状态。具体使用流程请参考示例“/src/ohos/foundation/arkui/ui_lite/test/uitest/test_button/ui_test_button.cpp”。
表 1 UICheckBox核心函数
| 函数 | 介绍 |
|---|---|
| Void SetOnChangeListener(OnChangeListener* onStateChangeListener) | 为UICheckBox设置监听器,在状态改变时回调监听器的OnChange函数。 |
| bool OnClickEvent(const ClickEvent& event) override | 执行点击事件。 |
| virtual void SetImages(const char selectedImageSrc, const char unselectedImageSrc) | 通过图片路径设置选中和不选择状态的图片。 |
| virtual void SetImages(const ImageInfo selectedImageSrc, const ImageInfo unselectedImageSrc) | 通过ImageInfo设置选中和不选择状态的图片。 |
| UICheckBoxState GetState() const | 获取当前状态。 |
| void SetState(UICheckBoxState state, bool needAnimater = false) | 设置状态以及状态改变是否触发动效。 |
| void SetSelectedStateColor(ColorType color) | 设置选中状态颜色。 |
| ColorType GetSelectedStateColor() const | 获取选中状态颜色。 |
UIRadioButton
UIRadioButton又称为单选按钮,继承于UICheckBox,可以复用父类的函数。常将多个UIRadioButton添加到一个ViewGroup中作为一组。具体使用流程请参考示例“/src/ohos/foundation/arkui/ui_lite/test/uitest/test_button/ui_test_button.cpp”。
表 1 UIRadioButton核心函数
| 函数 | 介绍 |
|---|---|
| void SetName(const char* name) | 设置名称。 |
UIToggleButton
UIToggleButton继承于UICheckBox,其展示方式类似于拨码开关。没有自定义扩展的函数,使用方法参考UICheckBox。
UIArcLabel
UIArcLabel是以圆弧形态展示字体的组件,可以在圆形表盘的圆周按照指定的圆心、半径和角度展示文字,显示效果如图1所示,常用函数如表1所示。

具体使用流程请参考示例“/src/ohos/foundation/arkui/ui_lite/test/uitest/test_arc_label/ui_test_arc_label.cpp”。
表 1 UIArcLabel核心函数
| 函数 | 介绍 |
|---|---|
| void SetText(const char* text) | 设置展示的文字。 |
| void SetAlign(UITextLanguageAlignment horizontalAlign) | 设置此文本的对齐模式。 |
| UITextLanguageAlignment GetHorAlign() | 获取水平对齐方式。 |
| UITextLanguageDirect GetDirect() | 获取此文本的方向。 |
| void SetFont(const char* name, uint8_t size) | 设置此圆弧标签的字体及字体大小。 |
| void SetArcTextCenter(int16_t x, int16_t y) | 设置此圆弧文本的中心位置。 |
| void SetArcTextRadius(uint16_t radius) | 设置此圆弧文本的半径。 |
| uint16_t GetArcTextRadius() const | 获取此圆弧文本的半径。 |
| void SetArcTextAngle(int16_t startAngle, int16_t endAngle) | 设置此圆弧文本的开始角度和结束角度。 |
| int16_t GetArcTextStartAngle() const | 获取此圆弧文本的起始角度。 |
| int16_t GetArcTextEndAngle() const | 获取此圆弧文本的结束角度。 |
| void SetArcTextOrientation(TextOrientation orientation) | 设置此圆弧文本的方向。 参数orientation (INSIDE或OUTSIDE) |
UIBoxProgress
UIBoxProgress是以条状形式表示进度的组件,例如播放视频时的进度条。继承关系为UIBoxProgress→UIAbstractProgress。父类UIAbstractProgress的常用函数如表1所示。
表 1 UIAbstractProgress核心函数
| 函数 | 介绍 |
|---|---|
| void EnableBackground(bool enable) | 设置进度条背景是否可见。对UISlider无效。 |
| void SetValue(int32_t value) | 设置此进度条的当前值。 |
| int32_t GetValue() const | 获取此进度条的当前值。 |
| void SetRange(int32_t rangeMax, int32_t rangeMin) | 设置此进度条的范围。 |
| int32_t GetRangeMin() const | 获取进度条最小值。 |
| int32_t GetRangeMax() const | 获取进度条最大值。 |
| void SetCapType(CapType cap) | 设置端点风格。 |
| void SetImage(const char foregroundImage, const char backgroundImage = nullptr) | 设置此进度条的图像。 |
| void SetImage(const ImageInfo foregroundImage, const ImageInfo backgroundImage = nullptr) | 设置此进度条的图像。 |
| void SetStep(uint32_t step) | 设置此进度条的步长。 |
| uint32_t GetStep() const | 获取此进度条的步长。 |
UIBoxProgress常用函数如表2所示,具体使用流程请参考示例“/src/ohos/foundation/arkui/ui_lite/test/uitest/test_progress_bar/ui_test_box_progress.cpp”。
表 2 UIBoxProgress核心函数
| 函数 | 介绍 |
|---|---|
| void SetDirection(const Direction& direction) | 设置此进度条的方向。 |
| void SetValidWidth(int16_t width) | 设置实际进度条宽度。 |
| void SetValidHeight(int16_t height) | 设置实际进度条高度。 |
| int16_t GetValidWidth() const | 获取实际进度条宽度。 |
| int16_t GetValidHeight() const | 获取实际进度条高度。 |
UICircleProgress
UICircleProgress组件是以圆形来展示进度的组件。该组件继承关系为UICircleProgress→UIAbstractProgress,常用函数如表1所示。具体使用流程请参考示例“/src/ohos/foundation/arkui/ui_lite/test/uitest/test_progress_bar/ui_test_circle_progress.cpp”。
表 1 UICircleProgress核心函数
| 函数 | 介绍 |
|---|---|
| void SetCenterPosition(int16_t x, int16_t y) | 设置此圆形进度条的中心点坐标。 |
| void SetRadius(uint16_t radius) | 设置此圆形进度条的外半径。 |
| void SetStartAngle(int16_t startAngle) | 设置开始角度(进度条初始值)。 |
| void SetEndAngle(int16_t endAngle) | 设置结束角度(进度条100%时加载位置)。 |
| void SetCenterPosition(int16_t x, int16_t y) | 设置进度条相对于控件的中心点位置。 |
| Point GetCenterPosition() const | 获取进度条相对于控件的中心点位置。 |
| void SetProgressImagePosition(int16_t x, int16_t y) | 设置此进度条的前景图像相对于视图的坐标。 |
| void SetBackgroundImagePosition(int16_t x, int16_t y) | 设置此进度条的背景图像相对于视图的坐标。 |
| void SetLineColor(ColorType color) | 设置此进度条的前景色。 |
UISlider
UISlider继承于UIBoxProgress,也是以进度条的方式展示进度,常用于音量条。相较于UIBoxProgress,该组件额外支持拖动以及点击事件。具体使用流程请参考示例“/src/ohos/foundation/arkui/ui_lite/test/uitest/test_slider/ui_test_slider.cpp”。

表 1 UISlider核心函数
| 函数 | 介绍 |
|---|---|
| void SetKnobWidth(int16_t width) | 设置此旋钮的宽度。 |
| int16_t GetKnobWidth() | 获取此旋钮的宽度。 |
| void SetImage(const ImageInfo backgroundImage, const ImageInfo foregroundImage) | 将图像设置为此滑块的像素贴图,包括背景、前景。 |
| void SetImage(const char backgroundImage, const char foregroundImage) | 设置此滑块的图像,包括背景、前景。 |
| void SetSliderColor(const ColorType backgroundColor, const ColorType foregroundColor) | 设置此滑块的颜色,包括背景、前景。 |
| void SetSliderRadius(int16_t backgroundRadius, int16_t foregroundRadius) | 设置此滑块的半径,包括背景、前景。 |
| void SetKnobImage(const ImageInfo* knobImage) | 设置旋钮图片。 |
| void SetKnobImage(const char* knobImage) | 设置旋钮图片。 |
| void SetKnobColor(const ColorType knobColor) | 设置旋钮颜色。 |
| void SetKnobRadius(int16_t knobRadius) | 设置旋钮半径。 |
| void SetKnobStyle(const Style& style) | 设置旋钮样式。 |
| void SetKnobStyle(uint8_t key, int64_t value) | 设置旋钮样式。 |
| int64_t GetKnobStyle(uint8_t key) const | 获取旋钮样式。 |
| void SetSliderEventListener(UISliderEventListener* listener) | 为该组件设置监听器,使用参考sample。 |
UITextureMapper
UITextureMapper继承于UIImageView,主要用于做动画效果:缩放和旋转,常用函数如表1所示。具体使用流程请参考示例“/src/ohos/foundation/arkui/ui_lite/test/uitest/test_texture_mapper/ui_test_texture_mapper.cpp”。
表 1 UITextureMappre核心函数
| 函数 | 介绍 |
|---|---|
| void Start() | 启动动画。 |
| void SetRotateStart(int16_t start) | 设置此图像的起始旋转角度。 |
| void SetRotateEnd(int16_t end) | 设置此图像的旋转结束角。 |
| void SetScaleStart(float start) | 设置缩放此图像的起始比率。 |
| void SetScaleEnd(float end) | 设置缩放此图像的结束比率。 |
| void SetDurationTime(uint16_t durationTime) | 设置此动画器的持续时间,以毫秒为单位。 |
| void SetDelayTime(uint16_t delayTime) | 设置此动画器的延迟时间,以毫秒为单位。 |
| void SetEasingFunc(EasingFunc easingFunc) | 设置此动画器的函数。 |
| void Cancel() | 取消此动画。 |
| void Reset() | 显示原始图像。 |
| void SetPivot(float x, float y) | 设置此图像的旋转和缩放轴的变换中心点。 |
| void SetAnimatorStopListener(AnimatorStopListener* listener) | 设置此动画器停止的监听器。 |
UIQrcode
UIQrcode继承于UIImageView,主要是用来生成二维码,二维码显示效果如图1所示,常用函数介绍如表1所示。

具体使用流程请参考示例“/src/ohos/foundation/arkui/ui_lite/test/uitest/test_qrcode/ui_test_qrcode.cpp”。
表 1 UIQrcode核心函数
| 函数 | 介绍 |
|---|---|
| void SetQrcodeInfo(const char* val, ColorType backgroundColor = Color::White(), ColorType qrColor = Color::Black()) | 设置二维码信息。 • 参数val:生成二维码内容的字符串。 • 参数backgroundColor:二维码的背景色,默认为白色。 • 参数qrColor:二维码颜色,默认为黑色。 |
| void SetQrcodeInfo(const uint8_t* val, uint16_t len, ColorType backgroundColor = Color::White(), ColorType qrColor = Color::Black()) | 设置二维码信息。参数说明: • val:生成二维码内容的binary地址。 • len:binary数据流长度。 • backgroundColor:二维码的背景色,默认为白色。 • qrColor:二维码颜色,默认为黑色。 |
| void SetWidth(int16_t width) override | 设置生成二维码图片的宽度。 |
| void SetHeight(int16_t height) override | 设置生成二维码图片的高度。 |
| void SetECCLevel(QrCode::Ecc level) | 设置二维码纠错等级。 |
UIBarcode
UIBarcode继承于UIImageView,主要是用来生成条形码。

UIBarcode的使用方式与UIQrcode类似,不再赘述。
表 1 UIBarcode核心函数函数介绍
| 函数 | 介绍 |
|---|---|
| void SetBarcodeInfo(const char* srcVal) | 设置条形码信息。 参数srcVal:生成条形码内容的字符串。 |
| void SetWidth(int16_t width) override | 设置生成条形码图片的宽度。 |
| void SetHeight(int16_t height) override | 设置生成条形码码图片的高度。 |
UICanvas
UICanvas继承于UIView, 用于绘制各个形状的图案,如直线,圆,弧线等,常用函数介绍如表1所示。具体使用流程请参考示例“/src/ohos/foundation/arkui/ui_lite/test/uitest/test_canvas/ui_test_canvas.cpp”。
表 1 UICanvas核心函数
UICanvasExt
UICanvasExt继承于UIView,与UICanvas功能相似,是基于硬件绘制能力定制的一个画布控件,绘制属性通过继承于Paint的PaintExt设置。常用函数介绍如表1、表2所示。具体使用流程请参考示例“/src/middleware/services/gui/uikit/sample/uitest/components/ui_test_draw/ui_test_canvas_ext.cpp”。
表 1 PaintExt核心函数
| 函数 | 介绍 |
|---|---|
| void SetLinearGradient(const LinearGradient& linear, const ColorStop* stops, uint16_t stopCount) | 设置线性渐变。 |
| void SetRadialGradient(const RadialGradient& radial, const ColorStop* stops, uint16_t stopCount) | 设置放射渐变。当前芯片不支持渐变中心点为负坐标。 |
| void SetSweepGradient(const SweepGradient& sweep, const ColorStop* stops, uint16_t stopCount) | 设置扫描渐变,默认12点钟方向为0度位置,若传入值为负数,则按0处理。当前芯片不支持渐变中心点为负坐标。 注意旧版扫描渐变是以3点钟为起始方向,弧形绘制是以12点钟为起始方向;新版扫描渐变和弧形绘制都是以12点钟为方向。 |
| void SetFillRule(const FillRule& fillRule) | 设置填充规则。仅对Fill有效。 |
| void SetGradientSpread (const GradientSpread& gradientSpread) | 设置超出渐变区域的渲染模式。 |
| void SetCapType(const CapType& capType) | 设置线帽样式。仅对Stroke类型有效。 注:如果设置线帽类型为round,会在原有路径两端加上以线宽为直径的半圆。 |
| void SetJoinType (const JoinType& joinType) | 设置线段连接样式。仅对Stroke类型有效。 |
| void SetMiterLimit(float miterLimit) | 设置线端连接时内接点和外接点的长度限制。仅对Stroke类型且线段连接样式为JOIN_MITER有效。 |
| void SetAntialiased (bool antialiased) | 设置是否抗锯齿。 |
| void SetClipRect(Rect clipRect) | 设置剪切矩阵。 |
说明: 渐变指的是多色的一个渐变效果,设置单色会提示错误。
表 2 UICanvasExt核心函数
说明: DrawSvg API入参为svg_to_bin工具转换出的二进制文件路径。 该工具由 graphic_tools.tar.gz 提供,解压后进入
graphic_tools/svg_to_path/src使用。
- Linux环境:
- 前置条件:需要安装python 3.8.10以上版本。
- 使用命令:python3 main.py -f [FILE] -output [output] * [FILE]:svg格式文件,文件名中不能包含空格。 * [output]:输出路径,非必要。
- 使用示例:python3 main.py -f ./run.svg
- Windows环境:
- 前置条件:需要安装python 3.11.2以上版本,并将添加到计算机环境变量内。
- 使用命令:python main.py -f [FILE] -output [output] * [FILE]:svg格式文件,文件名中不能包含空格。 * [output]:输出路径,非必要。
- 使用示例:python main.py -f ./run.svg
UILiteSurfaceView
UILiteSurfaceView是用于播放视频的组件,继承于UIView。具体使用流程请参考示例“/src/middleware/services/gui/uikit/sample/uitest/components/ui_test_video_play/ui_test_video_play.cpp”。
表 1 UILiteSurfaceView核心函数
| 函数 | 介绍 |
|---|---|
| Surface* GetSurface() const | 获取Surface。 |
| void SetPosition(int16_t x, int16_t y, int16_t width, int16_t height) override | 设置当前视图的位置以及宽高。 |
| void Resize(int16_t width, int16_t height) override | 调整此视图的大小。 |
| void SetX(int16_t x) override | 设置此视图的X坐标位置。 |
| void SetY(int16_t y) override | 设置此视图的Y坐标位置。 |
| void SetWidth(int16_t width) override | 设置此视图的宽度。 |
| void SetHeight(int16_t height) override | 设置此视图的高度。 |
| void SetVideoResizeMode(VideoResizeMode resizeMode) | 设置视频自适应模式。自适应模式默认为Fill。 VideoResizeMode枚举包含以下值: • Fill:视频的内容完全填充容器。内容将被拉伸以适应容器的尺寸,可能会导致内容变形。 • Contain:视频的内容在保持其宽高比的情况下完全适应容器。内容将被缩放以适应容器的尺寸,但不会被裁剪。 |
| VideoResizeMode GetVideoResizeMode() | 获取视频自适应模式。 |
| void SetRotation(VideoRotation rotation) | 设置视频旋转度数。默认不旋转。 VideoRotation枚举包含以下值: • ROTATE_0:不旋转; • ROTATE_90:旋转90度; • ROTATE_180:旋转180度; • ROTATE_270:旋转270度。 |
| VideoRotation GetRotation() | 获取视频旋转度数。 |
LiteSurface是由UILiteSurfaceView中通过GetSurface获取的Surface,用于管理媒体和图形的共享内存。
表 2 LiteSurface核心函数
UIEditText
UIEditText是支持输入法编辑的文本类组件,继承于UIView。
支持两种以下模式:
- 明码模式:显示文本具体内容。
- 密码模式:不显示具体输入的内容,以符合“·”替代。


常用函数介绍如表1所示。具体使用流程请参考示例“/src/middleware/services/gui/uikit/sample/uitest/components/ui_test_keyboard/ui_test_keyboard.cpp”。
表 1 UIEditText核心函数
| 函数 | 介绍 |
|---|---|
| void SetTextColor(ColorType color) | 设置文本内容显示颜色。 |
| ColorType GetTextColor() | 获取文本内容显示颜色。 |
| void SetInputType(InputType type) | 设置文本内容显示模式。 |
| InputType GetInputType() | 获取文本内容显示模式。 |
| void SetText(const char* text) | 设置当前文本内容。 |
| const char* GetText() | 获取当前文本内容。 |
| void SetPlaceholder(const char* placeholder) | 设置提示文本内容。 |
| const char* GetPlaceholder() | 获取提示文本内容。 |
| void SetMaxLength(uint16_t maxLength) | 设置最大文本内容长度。 |
| uint16_t GetMaxLength() | 获取最大文本内容长度。 |
| void SetPlaceholderColor(ColorType color) | 设置提示文本内容显示颜色。 |
| ColorType GetPlaceholderColor() | 获取提示文本内容显示颜色。 |
| void SetCursorColor(ColorType color) | 设置光标颜色。 |
| ColorType GetCursorColor() | 获取光标颜色。 |
| void SetFontId(uint16_t fontId) | 设置字体。 |
| uint8_t GetFontId() | 获取字体。 |
| void SetFont(const char* name, uint8_t size) | 设置字体。 |
| uint16_t GetTextWidth() | 获取字体宽度。 |
| uint16_t GetTextHeight() | 获取字体高度。 |
| void InsertText(std::string text) | 在末尾插入文本。 |
| void DeleteBackward(uint32_t length) | 删除末尾文本。 |
说明: 软键盘功能为客户参考代码,适配的屏幕为 454×454 屏,客户可按需进行布局调整,包括布局效果调整、适配不同屏幕尺寸等。重新适配需要修改文件 ui_soft_keyboard.cpp 中的控件位置、大小等布局信息。
UIKaleidoscopeView
UIKaleidoscopeView是基于原始图片素材生成万花筒效果的控件。该控件将直接读写送显Buffer,因此需要设置控件起始位置为[0, 0],并保持其尺寸与送显Buffer尺寸一致。具体使用流程请参考示例middleware/services/gui/uikit/sample/uitest/components/ui_test_kaleidoscope/ui_test_kaleidoscope.cpp。

表 1 UIKaleidoscopeView核心函数
| 函数 | 描述 |
|---|---|
| bool SetSrc(const ImageInfo* src) | 设置万花筒效果的源素材。 |
| void Rotate(float rotate) | 根据设定的旋转刻度,生成新的万花筒效果图。 |
| void SetRotateEventFactor(float factor) | 设置万花筒响应表冠旋转事件的因子。 |
| void SetRotateAnimatorValue(float rotate) | 设置万花筒动画使用的旋转刻度。 |
| void StartRotateAnimator() | 启动万花筒动画。 |
| void StopRotateAnimator() | 停止万花筒动画。 |
UIFloatBoxView
UIFlloatBoxView是弧形悬浮框中显示圆形图标的控件,常用于界面之上的快捷应用浮窗。该控件以内部有效区域的中心点为圆心,并以偏小一侧的尺寸作为直径去构建弧形布局。建议使用宽高相等的控件,便于布局计算。具体使用流程请参考示例“/src/middleware/services/gui/uikit/sample/uitest/components/ui_test_float_box/ui_test_float_box.cpp”。

表 1 UIFloatBoxView核心函数
UILottView
UILottView是支持播放Lottie矢量动画的控件。Lottie矢量动画相较于序列帧方案占用资源更小。设计师通过After Effects软件设计矢量动画,通过Bodymovin插件导出Lottie Json文件,通过自研的Lottie转换工具将Json文件转为Bin文件,最终通过UILottView解析Bin文件播放矢量动画,如图1所示。

表 1 UI3DView核心函数
函数 |
描述 |
|---|---|
bool SetSrc(std::string file, FILE *fp = nullptr, uint32_t offset = 0) |
设置通过Lottie工具转换生成的Lottie Bin文件。 |
播放Lottie矢量动画。 |
|
暂停Lottie矢量动画 |
|
继续Lottie矢量动画。 |
|
停止Lottie矢量动画。 |
|
设置是否重复播放动画。 |
|
获取是否重复播放动画。 |
|
获取Lottie矢量动画状态。 |
须知: 目前仅支持基础矢量图形和基础样式绘制,矢量变换,矢量路径裁剪功能。不支持全量Lottie功能。
UI3DView
UI3DView是支持3D能力的基类,为UI3DSphere、UI3DMesh、UI3DCylinder等派生类提供了通用的属性和函数。
表 1 UI3DView核心函数
| 函数 | 描述 |
|---|---|
| virtual bool SetModel(std::string file) | 设置通过3D工具生成的3D模型。 UI3DSphere和UI3DCylinder必须设置模型文件。 UI3DMesh弱交互网格变形模式下,需要设置对应类型的模型文件;而强交互网格变形模式下,则无需设置模型文件。 |
| void ClearModel() | 清除3D模型。 |
| virtual bool SetTexture(const ImageInfo* info) | 设置纹理。 UI3DSphere和UI3DCylinder必须设置纹理素材。 UI3DMesh可选是否设置纹理素材。如果没有设置纹理素材,将在内部自动生成背景截图当作纹理使用。 |
| void ClearTexture() | 清除纹理。 |
| const ImageInfo* GetTexture() const | 获取纹理。 |
UI3DSphere
UI3DSphere是支持3D球体模型纹理贴图的控件。具体使用流程请参考示例“/src/middleware/services/gui/uikit/sample/uitest/components/ui_test_3d/ui_test_sphere.cpp”。

表 1 UI3DSphere核心函数
| 函数 | 描述 |
|---|---|
| void RotateAroundXAxis(float angle) | 绕X轴旋转特定角度。 |
| void RotateAroundYAxis(float angle) | 绕Y轴旋转特定角度。 |
| void RotateAroundZAxis(float angle) | 绕Z轴旋转特定角度。 |
| float GetAngleAroundXAxis() | 获取绕X轴旋转的角度。 |
| float GetAngleAroundYAxis() | 获取绕Y轴旋转的角度。 |
| float GetAngleAroundZAxis() | 获取绕Z轴旋转的角度。 |
UI3DMesh
UI3DMesh是支持纹理网格变形动画的控件。具体使用流程请参考示例“/src/middleware/services/gui/uikit/sample/uitest/components/ui_test_3d/ui_test_mesh.cpp”。


表 1 UI3DMesh核心函数
| 函数 | 描述 |
|---|---|
| bool SetMeshType(VGUMeshType meshType) | 设置网格变形模式。 |
| VGUMeshType GetMeshType() const | 获取网格变形模式。 |
| void SetMeshPosition(int16_t x, int16_t y) | 设置网格变形原点。 |
| void SetTime(uint32_t time) | 设置网格变形动画时长。 |
| void Start() | 启动网格变形动画。 |
| void Pause() | 暂停网格变形动画。 |
| void Resume() | 恢复网格变形动画。 |
| void Stop() | 停止网格变形动画。 |
| uint8_t GetState() | 获取网格变形动画状态。 |
| void SetReverse(bool reverse) | 设置网格变形动画是否逆序播放。 |
| bool GetReverse() const | 获取网格变形动画是否逆序播放。 |
| void SetRealTimeScreencap(bool realTime) | 设置网格变形动画过程中是否每帧实时截图,该属性仅针对没有设置纹理的场景有效。 |
| bool GetRealTimeScreencap() | 获取网格变形动画过程中是否每帧实时截图。 |
表 2 VGUMeshType枚举
枚举值 |
描述 |
|---|---|
VGU_MESH_ARRAY |
强交互网格变形模式。无需设置对应的模型文件。通过SetMeshPosition函数配置网格变形原点。
|
VGU_MESH_CONVEX |
弱交互网格变形模式。需要设置对应的模型文件。SetMeshPosition函数无法生效。
|
VGU_MESH_CONCAVE |
弱交互网格变形模式。需要设置对应的模型文件。SetMeshPosition函数无法生效。
|
VGU_MESH_VORTEX |
弱交互网格变形模式。需要设置对应的模型文件。SetMeshPosition函数无法生效。
|
VGU_MESH_WAVE |
弱交互网格变形模式。需要设置对应的模型文件。SetMeshPosition函数无法生效。
|
VGU_MESH_MORIE |
弱交互网格变形模式。需要设置对应的模型文件。SetMeshPosition函数无法生效。
|
VGU_MESH_RIPPLE |
强交互网格变形模式。无需设置对应的模型文件。通过SetMeshPosition函数配置网格变形原点。
|
VGU_MESH_INVALID |
无效的网格变形模式。 |
UI3DCylinder
UI3DCylinder是支持3D柱状体模型纹理贴图的控件。具体使用流程请参考示例“/src/middleware/services/gui/uikit/sample/uitest/components/ui_test_3d/ui_test_cylinder.cpp”。

表 1 UI3DCylinder核心函数
| 函数 | 描述 |
|---|---|
| void SetStartY(int16_t y) | 设置局部显示部分相对于整张纹理素材的起始Y坐标。 |
| int16_t GetStartY() const | 获取局部显示部分相对于整张纹理素材的起始Y坐标。 |
| void SetCameraAngle(float angle) | 设置相机旋转角度。 |
| void SetCameraVFov(float distance) | 设置相机垂直视角。 |
| void SetCameraAspectRatio(float ratio) | 设置相机画面宽高比。 |
| void SetCameraNearPlane(float value) | 设置相机近裁剪平面。 |
| void SetCameraFarPlane(float value) | 设置相机远裁剪平面。 |
| void SetCameraAxis(Vector3 |
设置相机中心轴。 |
| void SetCameraScale(Vector3 |
设置相机缩放比。 |
| void SetCameraTranslation(Vector3 |
设置相机平移。 |
| void SetCameraPosition(Vector3 |
设置相机位置。 |
UIPostEffectImageView
UIPostEffectImageView是支持对图片进行HSV或者Colorize后处理的控件。HSV是指通过调整颜色模型的色相(Hue)、饱和度(Saturation)和明度(Value)来调整图像颜色。Colorize是指根据输入的颜色对图像进行染色。
HSV具体使用流程请参考示例“/src/middleware/services/gui/uikit/sample/uitest/components/ui_test_hsv/ui_test_hsv.cpp”。
Colorize具体使用流程请参考示例“/src/middleware/services/gui/uikit/sample/uitest/components/ui_test_colorize/ui_test_colorize.cpp”。
表 1 UIPostEffectImageView核心函数
| 函数 | 描述 |
|---|---|
| void EnableColorize(bool enable) | 设置Colorize是否使能。 |
| bool IsEnableColorize() | 获取Colorize是否使能。 |
| void SetColorize(ColorType color) | 设置Colorize的颜色类型。 |
| ColorType GetColorize() | 获取Colorize的颜色类型。 |
| void EnableHSVAdjust(bool enable) | 设置HSV是否使能。 |
| bool IsEnableHSVAdjust() | 获取HSV是否使能。 |
| void SetHSVInfo(int16_t hAdjust, int8_t sAdjust, int8_t vAdjust, int16_t threshold) | 设置HSV参数。 |
| void SetHSVMask(const std::string& mask) | 设置HSV蒙版。 |
UIRainView
UIRainView是支持呈现雨滴效果以及擦拭交互的控件。具体使用流程请参考示例“/src/middleware/services/gui/uikit/sample/uitest/components/ui_test_rain/ui_test_rain.cpp”。
表 1 UIRainView核心函数
| 函数 | 描述 |
|---|---|
| void SetRain(const ImageInfo* rainInfo[], uint8_t rainNum) | 设置RainView所需要的图片以及图片数量。 |
| void SetTimeOfUpdate(uint16_t timeOfUpdate) | 设置RainView的动画播放速度。 |
| uint16_t GetTimeOfUpdate() | 获取RainView的动画播放速度。 |
| void SetTimeOfPause(uint16_t timeOfPause) | 设置无限重复动画的两次播放之间的间隔。 |
| uint16_t GetTimeOfPause() | 获取无限重复动画的两次播放之间的间隔。 |
| void Start() | 播放动画。 |
| void Pause() | 暂停动画。 |
| void Resume() | 恢复动画。 |
| void Stop() | 停止动画。 |
| void GetState() | 获取动画状态。 |
| void SetBlur(float radius) | 设置高斯模糊值。 |
| float GetBlur() | 获取高斯模糊值。 |
| uint8_t ClearWipeArea() | 启动手动擦拭擦拭区域。 |
| void SetWipeWidth(uint32_t width) | 设置手动擦拭屏幕的宽度。 |
| uint32_t GetWipeWidth() | 获取手动擦拭屏幕的宽度。 |
| void Clear() | 手动清除雨水图像缓存并擦拭区域,应在此动画器停止后调用。 |






