跳转至
项目
版本
全文检索

UIKit 容器类组件

容器类组件

容器类组件均继承于UIViewGroup，包含添加、删除、移动子节点等功能。布局类组件也属于容器类组件。

RootView

RootView类为单例模式，是UIKit组件视图树的根节点。

表 1 RootView核心函数

函数 介绍
void SetOnKeyActListener(OnKeyActListener* onKeyActListener) 设置物理按键事件上报时需调用的监听器。
virtual void OnKeyEvent(const KeyEvent& event) 回调物理按键事件监听器回调。
void ClearOnKeyActListener() 清除物理按键监听器。
void SetOnVirtualDeviceEventListener(OnVirtualDeviceEventListener* onVirtualDeviceEventListener) 设置监听器，用于监控虚拟设备的输入事件。
void ClearOnVirtualDeviceEventListener() 清除虚拟设备监听器。
static bool FindSubView(const UIView& parentView, const UIView* subView); 检查目标视图是否为指定父视图的子视图之一。
void Invalidate() override 刷新视图。
void AddSystemView(UIView* view) 系统层添加视图（主要用于消息、弹窗类视图，显示在最上层）。
void RemoveSystemView(UIView* view) 系统层删除视图。

OnKeyActListener，该监听器主要用来响应处理按键事件。

表 2 OnKeyActListener回调函数

函数 介绍
virtual bool OnKeyAct(UIView& view, const KeyEvent& event) 当触发按键事件时调用。

• 参数view：接受按键事件的视图。
• 参数event：按键事件。 返回值为bool类型：

• 返回true表示事件已经处理。
• 返回false表示事件未处理完成，会将该事件继续传递到父视图。

GridLayout

GridLayout又称为网格布局，继承关系为GridLayout→Layout→UIViewGroup，对外开发接口如表1所示。具体使用流程请参考示例“/src/ohos/foundation/arkui/ui_lite/test/uitest/test_view_percent/ui_test_view_percent.cpp”。

表 1 GridLayout核心函数

函数 介绍
void SetRows(const uint16_t& rows) 设置行数。
参数rows：行数。
void SetCols(const uint16_t& cols) 设置列数。
参数cols：列数。
void LayoutChildren(bool needInvalidate = false) 布局子组件。
参数needInvalidate：是否刷新。

FlexLayout

FlexLayout又称为弹性布局，继承关系为FlexLayout→Layout→UIViewGroup。具体使用流程请参考示例“/src/ohos/foundation/arkui/ui_lite/test/uitest/test_view_percent/ui_test_view_percent.cpp”。

表 1 FlexLayout核心函数

函数 介绍
void SetMajorAxisAlign(const AlignType& align) 设置主方向上的布局方式。
参数align：开始、居中、结尾等
void SetSecondaryAxisAlign(const AlignType& align) 设置副方向上的布局方式。
参数align：开始、居中、结尾等。
void SetFlexWrap(uint8_t wrap) 设置是否支持换行NOWRAP（默认不换行）。
参数wrap：换行。
void LayoutChildren(bool needInvalidate = false) 布局子组件。
参数needInvalidate：是否刷新。

ListLayout

ListLayout又称为线性布局，继承关系为ListLayout→FlexLayout→Layout→UIViewGroup，和Android中的LinearLayout类似。具体使用流程请参考示例“/src/ohos/foundation/arkui/ui_lite/test/uitest/test_ui_list_view/ui_test_list_layout.cpp”。

表 1 ListLayout核心函数

函数 介绍
void SetDirection(uint8_t direction) 设置布局方向。
参数direction：方向
• HORIZONTAL（横向）
• VERTICAL（纵向）
uint8_t GetDirection() 获取布局方向。

UIAbstractScroll

UIAbstractScroll是所有支持滑动的容器组件的父类。

表 1 UIAbstractScroll核心函数

函数 介绍
void SetScrollBlankSize(uint16_t size) 设置头结点或尾节点可滑动超出顶部或底部的距离。
void SetMaxScrollDistance(uint16_t distance) 设置单次滑动手势造成的滑动距离限制。
uint16_t GetMaxScrollDistance() 获取单次滑动手势造成的滑动距离限制。
void SetDragFunc(EasingFunc func) 设置拖动动效的函数。
void SetThrowDrag(bool throwDrag) 设置结束拖动时，是否产生惯性滑动动效。
void SetReboundSize(uint16_t size) 设置头结点或尾节点可滑动超出顶部或底部并回弹的距离，达到对应位置后，即可回弹至顶部或底部对齐的状态。
void SetXScrollBarVisible(bool state) 设置X轴滚动条是否可见。
void SetYScrollBarVisible(bool state) 设置Y轴滚动条是否可见。
void SetScrollBarSide(uint8_t side) 设置滚动条显示方位。参数参考枚举ScrollBarSide。
void SetScrollBarCenter(const Point& center) 获取滚动条中心点。
void SetDirection(uint8_t direction) 设置方向。
uint8_t GetDirection() 获取方向。
void SetElastic(bool isElastic) 设置弹簧效果。
void SetElasticTime(uint16_t elasticTime) 设置回弹时间（多长时间完成回弹）。

UIScrollView

UIScrollView是一个容器类组件。主要作用是在屏幕大小有限制时，在控件范围内移动内容，展示更多内容。

继承关系为UIScrollView→UIAbstractScroll→UIViewGroup。

UIScrollView内部定义了滚动监听器OnScrollListener，用来监听滚动状态。具流程请参考示例“/src/ohos/foundation/arkui/ui_lite/test/uitest/test_ui_scroll_view/ui_test_ui_scroll_view.cpp”。

表 1 UIScrollView核心函数

函数 介绍
void SetVerticalScrollState(bool state) 设置纵向是否可滚动。
bool GetVerticalScrollState() const 获取纵向是否可滚动。
void SetHorizontalScrollState(bool state) 设置横向是否可滚动。
bool GetHorizontalScrollState() const 获取横向是否可滚动。
void ScrollBy(int16_t xDistance, int16_t yDistance) 设置滚动距离。
注意：坐标系基准点是左上为（0，0），如果要向左下偏移，xDistance和yDistance应为负值。

• xDistance：X轴上偏移
• yDistance：Y轴上偏移

UISwipeView

UISwipeView类似于android中的ViewPage的Tab，继承于UIAbstractScroll，常用函数如表1所示。

具体使用流程请参考示例“/src/ohos/foundation/arkui/ui_lite/test/uitest/test_ui_swipe_view/ui_test_ui_swipe_view.cpp”。

表 1 UISwipeView核心函数

函数 介绍
void SetDirection(uint8_t direction) 设置拖动方向。
void Add(UIView* view) override 添加视图。
void Insert(UIView prevView, UIView insertView) override 向UISwipeView中的prevView后面插入视图。
virtual void Remove(UIView* view) override 移除视图。
void SetCurrentPage(uint16_t index, bool needAnimator = false) 设置当前选项卡的索引（注意：需要保证已添加子元素）。
uint16_t GetCurrentPage() const 获取当前选项卡的索引。
void SetBlankSize(uint16_t size) 设置空白大小，默认DEFAULT_BLANK_SIZE。
bool OnDragEvent(const DragEvent& event) override 拖动事件（内部回调，无需用户主动调用）。
bool OnDragEndEvent(const DragEvent& event) override 拖动事件结束（内部回调，无需用户主动调用）。
void SetAlignMode(AlignMode alignMode = ALIGN_CENTER) 设置UISwipeView子组件的对齐模式。
void SetOnSwipeListener(OnSwipeListener* onSwipeListener) 设置滑动事件上报时需调用的监听器。
UIView* GetViewByIndex(uint16_t index) const 获取当前View在UISwipeView中的位置。
void SetLoopState(bool loop) 设置子视图循环显示。
void SetAnimatorTime(uint16_t time) 设置页面动画的时间（ms）。

UISwipeViewNested

UISwipeViewNested继承于UISwipeView，用于解决滑动冲突。具体使用流程请参考示例“/src/middleware/services/gui/uikit/sample/uitest/components/ui_test_nested/ui_test_nested.cpp”。

表 1 UISwipeViewNested核心函数

函数

介绍

void SetBoundaryIntercept(uint8_t direction, bool isIntercept)

设置当滑动超出边界时是否拦截滑动事件。

bool IsBoundaryIntercept(uint8_t direction) const

查询当滑动超出边界时是否拦截滑动事件。

UIList

UIList控件用于展示垂直或水平排列的列表项。支持绑定适配器、选择项位置对齐、事件响应等功能。主要适用于设置界面、菜单界面、文件列表、聊天记录等。

基类继承：UIAbstractScroll

参考示例：/src/ohos/foundation/arkui/ui_lite/test/uitest/test_ui_list/ui_test_ui_list.cpp

表 1 UIList核心函数

函数 介绍
UIList() 构造函数，默认创建垂直排列的列表。
UIList(uint8_t direction) 构造函数，选择创建垂直或者水平排列的列表。
void SetDirection(uint8_t direction) 设置列表排列方向。
uint8_t GetDirection() const 获取列表排列方向。
void SetAdapter(AbstractAdapter* adapter) 绑定列表的适配器，主要用于传递数据。sample中使用的是TextAdapter，还可以自定义适配器，继承于AbstractAdapter，实现类似于微信朋友圈效果。
注意，调用该接口前需要保证UIList内部没有残余控件。
void SetStartIndex(uint16_t index) 设置当前显示列表从第几项开始展示。该函数仅在SetAdapter前调用才能生效。
void SetLoopState(bool state) 设置列表是否循环展示。
UIView* GetSelectView() 获取当前选择的项。
void RefreshList() 刷新列表。
void SetSelectPosition(uint16_t position) 设置当前选择的项，可以在选择项上做放大效果操作。
注意：该值设置后，需要调用RefreshList刷新列表，GetSelectView()才会生效。
void ScrollBy(int16_t distance) 滚动列表。
注意：向上滚动应为负值。
void ScrollTo(uint16_t index) 滚动到第index条开始展示。
bool OnDragEvent(const DragEvent& event) override 处理拖动事件，并上报父类，不需要主动调用。
一般不重写，除非自定义组件。
bool OnDragEndEvent(const DragEvent& event) override 处理拖动事件，并上报父类，不需要主动调用。
一般不重写，除非自定义组件。
bool OnPressEvent(const PressEvent& event) override 处理按下事件，并上报父类，不需要主动调用。
一般不重写，除非自定义组件。

须知：

  • UIList控件进度条已开启，默认设为圆屏（即弧形进度条），若用户使用的方屏，请在启动阶段将屏幕类型设置为方屏（即矩形进度条）：BaseGfxEngine::GetInstance()->SetScreenShape(RECTANGLE);
  • 只需开启scroll bar即可看到对应的效果：SetXScrollBarVisible(true);
  • 推荐使用“UISimpleList”控件。

AbstractAdapter

AbstractAdapter虚类，列表适配器。主要用于指定列表中的列如何显示以及存储列的数据。

基类继承：HeapBase

参考示例：

/src/middleware/services/gui/uikit/ui/interfaces/kits/components/text_adapter.h

/src/middleware/services/gui/uikit/ui/frameworks/components/text_adapter.cpp

表 1 AbstractAdapter核心函数

函数

介绍

virtual uint16_t GetCount() = 0;

获取列表列数据的个数。

virtual UIView* GetView(UIView* inView, int16_t index) = 0;

获取列表列的显示实例。

入参说明：

inView：列的可复用控件实例，如果该参数为nullptr则没有可复用的实例对象。

index： 当前需要显示的列号。

virtual void DeleteView(UIView*& view)

删除视图对象

virtual int16_t GetItemWidthWithMargin(int16_t index)

获取当前index列的宽。

virtual int16_t GetItemHeightWithMargin(int16_t index)

获取当前index列的高。

说明： 推荐用户根据具体场景使用“UISimpleList”和“UISimpleTransformList”控件，不需要再关注对该类的继承实现。

UIListExt

UIListExt控件用于展示垂直或水平排列的列表项，列为UIMenuItem控件时，滑动过程中可支持列缩放。适用于圆屏的“单个图标 + 单个文本”的特殊列表场景。

基类继承：UIList

参考示例：“/src/middleware/services/gui/uikit/sample/uitest/components/ui_test_list_ext/ui_test_list_ext.cpp”

表 1 UIListExt核心函数

函数 介绍
void SetScaleFactor(int16_t value) 设置缩放因子。
void SetItemSpace(uint16_t value) 设置条目与条目之间的间隙。

说明： 推荐使用“UISimpleTransformList”组件。

UIMenuItem

UIMenuItem控件是一个“单个图标 + 单个文本”的特定列表适配器。支持设置图片和文本。

基类继承：UIViewGroup介绍

参考示例：/src/middleware/services/gui/uikit/sample/uitest/components/ui_test_list_ext/menu_item_adapter.cpp

表 1 UIMenuItem核心函数

函数 介绍
void SetImageSrc(const char* imgSrc) 设置图片资源。
void SetImageSrc(const ImageInfo* imgSrc) 设置图片资源。
void SetText(const char* text) 设置文本。
void SetAlign(UITextLanguageAlignment align) 设置文字对齐。
void SetDirect(UITextLanguageDirect direct) 设置文字显示方向。
void SetLabelStyle(Style& labelStyle) 设置文字风格。
void SetLabelStyle(uint8_t key, int64_t value) 设置文字风格。
void SetTextColor(ColorType color) 设置文字颜色。
void SetFont(const char* name, uint8_t size) 设置字体属性。
void SetFontId(uint16_t fontId) 设置字体属性。
void SetLineBreakMode(const uint8_t lineBreakMode) 设置文本的显示模式。
void SetTextId(uint16_t textId) 设置文本多语言。
void SetImgResizeMode(UIImageView::ImageResizeMode mode) 设置图片填充模式。
void SetImgOffset(int16_t offset) 设置图片距离控件左边缘的偏移。
void SetTextOffset(int16_t offset) 设置文本距离图片右边缘的偏移。
void SetScaleAlignMode(ScaleAlignMode mode) 设置控件的缩放模式。

UIListNested

UIListNested用于解决滑动冲突。适用于嵌套使用列表与滚动场景，

基类继承：UIList

参考示例：“/src/middleware/services/gui/uikit/sample/uitest/components/ui_test_nested/ui_test_nested.cpp”

表 1 UIListNested核心函数

函数

介绍

void SetBoundaryIntercept(uint8_t direction, bool isIntercept)

设置当滑动超出边界时是否拦截滑动事件。

bool IsBoundaryIntercept(uint8_t direction) const

查询当滑动超出边界时是否拦截滑动事件。

说明： 推荐使用“UISimpleList”控件。

UISimpleList

UISimpleList是“UIListNested”和AdapterWrapper类的组合。UISimpleList为实现列表中的列，可以显示不同的控件类型组合，例如，（UIImageView, UILabel, UIImageView）组合、（UIImageVIew, UILabel, UIToggleButton）组合都可以在一个列表内进行显示，效果如图1所示。并且该控件相比于普通的列表控件，用户不需要再关注对Adapter类的重写，只有需要关心每列属性，具体参考Contents类。列数据的增删改功能通过AdapterWrapper类设置给列表。

Contents类如下：

class Contents {
public:
    CreateViewCallback createFunc;  // 创建当前列控件组合。
    UpdateViewCallback updateFunc;  // 更新当前列控件属性。
    uint8_t type;                   // 当前列的控件组合类型。List会将同类型的列进行内存复用。
    void* data;                     // 当前列的数据。
};

图 1 UISimpleList效果图

UISimpleList效果图

表 1 AdapterWrapper核心函数

函数 介绍
void AddContent(Contents& metadata) 添加列的属性

• 入参metadata：在列表最后，添加一列属性。
bool UpdateContent(int16_t index, Contents& metadata) 更新指定列的属性

• 入参index：更新的列位置。
• 入参metadata：更新的列属性。
void RemoveContent(int16_t index) 删除指定列

• 入参index：删除的列位置。
void ClearAll() 清空所有列。

UITransformGroup

UITransformGroup容器支持整体变换。对容器设置的变换将应用到子控件上。支持子控件为UIImageView、UIImageAnimatorView、UILabel、UILabelExt、UICanvasExt、UISlider。

须知： 因为“UILabel”、“UILabelExt”控件不支持旋转变换，如果UITransformGroup添加了以上控件，请不要进行旋转变换。

表 1 UITransformGroup核心函数

函数 介绍
void Add(UIView* view) override 添加子控件。
void Insert(UIView prevView, UIView insertView) 插入子控件。
void Remove(UIView* view) override 移除子控件。
void RemoveAll() override 移除所有子控件。
void TransformChild(UIView* view, TransformMap transmap) 对内部特定子控件配置变换。内部计算时会根据实时位置调用SetTransMapRect。
void SetAllStyle(uint8_t key, int64_t value) override 对内部所有控件（一级子控件）和本身设置style。

UITransformList

UITransformList容器继承于“UIListNested”，使用时需要搭配列类型的Adapter。与UIList有所不同，该控件支持自定义设置在列表滑动时各列的变换状态。

具体使用流程请参考示例“/src/middleware/services/gui/uikit/sample/uitest/components/ui_test_simple_list/ui_test_simple_transform_list.cpp”。

说明： “UISimpleTransformList”控件继承与UITransformList控件，UISimpleTransformList无需配置Adapter。所以推荐使用“UISimpleTransformList”控件。

表 1 UITransformList核心函数

函数 介绍
void SetItemSpace(uint16_t value) 设置条目与条目之间的间隙。
using TransformFunc = bool()(UITransformList list, UIView* item) 滑动时，回调函数类型。
void SetItemTransformFunc(TransformFunc func) 设置滑动时的回调函数，栏目将按照回调事件进行变换。

UISimpleTransformList

UISimpleTransformList是“UITransformList”和AdapterWrapper类的组合。UISimpleTransformList可以实现列的仿射变换。UISimpleTransformList与UISimpleList功能一致，但是相较于UISimpleList，UISImpleTransformList可以自定义滑动时列表列的变换。具体效果如图1所示。

图 1 UISimpleList显示效果

UISimpleList显示效果

UIAnalogClock

UIAnalogClock是显示时间的组件，继承关系为UIAnalogClock→UIAbstractClock→ViewGroup。按照时针、分针、秒针的表盘模式来展示。具体创建流程和使用方法请参考“/src/ohos/foundation/arkui/ui_lite/test/uitest/test_ui_analog_clock/ui_test_analog_clock.cpp”。

表 1 UIAnalogClock核心函数

函数 介绍
void SetHandImage(HandType type, const UIImageView& img, Point position, Point center) 设置用于绘制时钟指针的图像。

• 参数type：指针类型（时针、分针、秒针）。
• 参数img：指针类型对应的图片。
• 参数position：图像的开始位置。
• 参数center：此时钟指针的旋转中心。
void SetHandLine(HandType type, Point position, Point center, ColorType color, uint16_t width, uint16_t height, OpacityType opacity) 设置用于绘制时钟指针的线。

• 参数type：指针类型（时针、分针、秒针）。
• 参数position：线端点靠近旋转中心的位置。
• 参数center：指示此时钟指针的旋转中心。
• 参数color：线条颜色。
• 参数width：线条宽度。
• 参数height：线条长度。
• 参数opacity：线条透明度。
Point GetHandRotateCenter(HandType type) const 获取指定时钟指针的旋转中心。
参数type：指针类型（时针、分针、秒针）。
Point GetHandPosition(HandType type) const 获取指定时钟指针的位置。
参数type：指针类型（时针、分针、秒针）。
uint16_t GetHandInitAngle(HandType type) const 获取指定时钟指针的初始旋转角度。
参数type：指针类型（时针、分针、秒针）。
uint16_t GetHandCurrentAngle(HandType type) const 获取指定时钟指针的当前旋转角度。
参数type：指针类型（时针、分针、秒针）。
void SetInitTime24Hour(uint8_t hour, uint8_t minute, uint8_t second) 以24小时格式设置初始时间。
void SetInitTime12Hour(uint8_t hour, uint8_t minute, uint8_t second, bool am) 以12小时格式设置初始时间。
void SetPosition(int16_t x, int16_t y) override 设置组件的X、Y位置。
void SetPosition(int16_t x, int16_t y, int16_t width, int16_t height) override 设置组件的X、Y、宽、高。
void SetWorkMode(WorkMode newMode) override 设置时钟工作模式。

UISweepClock

UISweepClock是显示时间的组件，继承关系为UISweepClock→UIAbstractClock→ViewGroup。基本功能与UIAnalogClock相似，但可额外支持到毫秒级的精度。按照时针、分针、秒针以及每根指针对应的圆圈的表盘模式来展示。具体使用流程请参考示例“/src/middleware/services/gui/uikit/sample/uitest/components/ui_test_clock_dial/MainClockView.cpp”。

图 1 UISweepClock效果

UISweepClock效果

表 1 UISweepClock核心函数

函数 介绍
void SetHandImage(HandType type, const UIImageView& img, Point position, Point center) 设置用于绘制时钟指针的图像。

• 参数type：指针类型（时针、分针、秒针）。
• 参数img：指针对应的图片。
• 参数position：图像的开始位置。
• 参数center：此时钟指针的旋转中心。
void SetHandCircleImage(HandType type, const Image& img, Point position) 设置用于绘制时钟时指针圆圈的图像。

• 参数type：对应指针的类型（时针、分针、秒针）。
• 参数img：指针圆圈的图片。
• 参数position：图像的开始位置。
void SetHandLine(HandType type, Point position, Point center, ColorType color, uint16_t width, uint16_t height, OpacityType opacity) 设置用于绘制时钟指针的线。

• 参数type：指针类型（时针、分针、秒针）。
• 参数position：线端点靠近旋转中心的位置。
• 参数center：指示此时钟指针的旋转中心。
• 参数color：线条颜色。
• 参数width：线条宽度。
• 参数height：线条长度。
• 参数opacity：线条透明度。
Point GetHandRotateCenter(HandType type) const 获取指定时钟指针的旋转中心。
参数type：指针类型（时针、分针、秒针）。
Point GetHandPosition(HandType type) const 获取指定时钟指针的位置。
参数type：指针类型（时针、分针、秒针）。
uint16_t GetHandInitAngle(HandType type) const 获取指定时钟指针的初始旋转角度。
参数type：指针类型（时针、分针、秒针）。
uint16_t GetHandCurrentAngle(HandType type) const 获取指定时钟指针的当前旋转角度。
参数type：指针类型（时针、分针、秒针）。
void SetInitTime24Hour(uint8_t hour, uint8_t minute, uint8_t second) 以24小时格式设置初始时间。
void SetInitTime12Hour(uint8_t hour, uint8_t minute, uint8_t second, bool am) 以12小时格式设置初始时间。
void SetSweepTime24Hour(uint8_t hour, uint8_t minute, uint16_t millisecond) 以24小时格式设置当前时间。此函数支持设置毫秒，由此可支持扫秒能力。
void SetSweepTime12Hour(uint8_t hour, uint8_t minute, uint16_t millisecond, bool am) 以12小时格式设置当前时间。此函数支持设置毫秒，由此可支持扫秒能力。
void SetPosition(int16_t x, int16_t y) override 设置组件的X、Y位置。
void SetPosition(int16_t x, int16_t y, int16_t width, int16_t height) override 设置组件的X、Y、宽、高。
void SetWorkMode(WorkMode newMode) override 设置时钟工作模式。

表盘开发约束及应用举例

  1. 表盘使用的指针图片请使用垂直指针图片如图2所示，方便后续位置计算。

    图 2 垂直指针图片

    垂直指针图片

  2. 以秒针为例，计算SetHandImage对应的center及position坐标：

    秒针图片分辨率为50×315，假定使用454×454圆形屏幕，且表盘显示在正中间，如图1所示。

    1. center选定为（25，211），center点位指的是在图片内的位置，与图片在屏幕上的位置无关，后续旋转也是以这个点为中心，大体位置如图3所示。

      图 3 center位置示意图

      center位置示意图

      说明： center的y值以实际展示效果为准，可以进行上下调整，此处仅以sample为例给出参考。

    2. position选定为（202，16），这个点代表图片在表盘中的位置，即图片左上角对应的位置。

      这个点选取的原因如下：屏幕的中心点为（227，227），想要以屏幕中心点为各指针的旋转中心，则需要将center移到（227，227）位置，所以position值为（227，227）－（25，211）＝（202，16）。

  3. SetHandCircleImage的position值确定。

    sample中，时、分、秒的circle image原图都是50×50的图片，图片的中心点为（25， 25），所以直接将此center移到屏幕正中心（227， 227）即可，所以position值为（227，227）－（25，25）＝（202，202）。

说明： 上述sample指的是随SDK版本发的uikit sample中“Sweep Clock”这个测试用例。

代码位置：/src/middleware/services/gui/uikit/sample/uitest/components/ui_test_clock_dial/MainClockView.cpp

UIDigitalClock

UIDigitalClock又称数字时钟，继承关系为UIDigitalClock→UIAbstractClock，常用函数参考如表1所示。具体使用流程请参考示例“/src/ohos/foundation/arkui/ui_lite/test/uitest/test_digital_clock/ui_test_digital_clock.cpp”。

图 1 UIDigitalClock效果

UIDigitalClock效果

表 1 UIDigitalClock核心函数

函数 介绍
void SetFont(const char* name, uint8_t size) 设置此数字时钟的动态字体。
void SetFontId(uint8_t fontId) 设置此数字时钟的动态字体ID。
void SetColor(ColorType color) 设置展示时间的字体颜色。
void SetDisplayMode(DisplayMode dm) 设置此数字时钟的显示模式。
参数DisplayMode有四个枚举：

• DISPLAY_12_HOUR_NO_SECONDS：12小时制，不展示秒。
• DISPLAY_24_HOUR_NO_SECONDS：24小时制，不展示秒。
• DISPLAY_12_HOUR：12小时制。
• DISPLAY_24_HOUR：24小时制。
DisplayMode GetDisplayMode() const 获取此数字时钟的显示模式。
void DisplayLeadingZero(bool displayLeadingZero) 设置是否在此数字时钟的小时之前添加‘0’。
void SetOpacity(uint8_t opacity) 设置此数字时钟的不透明度。

UIPicker

UIPicker是滑动选择器，主要使用场景是选择Item，常用函数介绍如表1所示。

具体使用流程请参考示例“/src/ohos/foundation/arkui/ui_lite/test/uitest/test_picker/ui_test_ui_picker.cpp”。

表 1 UIPicker核心函数

函数 介绍
virtual bool SetValues(const char* value[], uint16_t count) 使用字符串数组在选取器中设置动态文本数据。
virtual bool SetValues(int16_t start, int16_t end) 使用给定的数字范围设置选取器中的数字数据。
virtual void ClearValues() 清除选取器中的所有值。
void SetFontId(uint8_t backgroundFontId, uint8_t highlightFontId) 设置动态文本的字体ID。
void SetBackgroundFont(const char* name, uint8_t size) 设置背景文本的字体名称和大小。
void SetHighlightFont(const char* name, uint8_t size) 设置高亮显示文本的字体名称和大小。
void SetTextColor(ColorType backgroundColor, ColorType highlightColor) 设置文本颜色。
bool SetSelected(uint16_t index) 设置当前选定项目的索引。
void SetItemHeight(int16_t height) 设置每个项目的高度。
void SetWidth(int16_t width) override 设置当前组件的宽度。
void SetHeight(int16_t height) override 设置当前组件的高度。
void SetLoopState(bool state) 设置当前组件是否可以循环滑动。
void RegisterSelectedListener(SelectedListener* pickerListener) 为选定事件注册侦听器。
void SetDirect(UITextLanguageDirect direct) 设置文本方向。
void SetTextFormatter(TextFormatter* formatter) 设置文本格式器。
uint16_t GetSelected() 获取当前选中值的下标。

UITimePicker

UITimePicker又称作时间选择器，主要用于时间选择，常用函数介绍如表1所示。具体使用流程请参考示例“/src/ohos/foundation/arkui/ui_lite/test/uitest/test_picker/ui_test_ui_picker.cpp”。

表 1 UITimePicker核心函数

函数 介绍
bool SetSelected(const char* value) 设置UITimePicker中当前选定的时间。
const char* GetSelectValue() 获取UITimePicker中当前选择的时间。
const char* GetSelectHour() const 获取UITimePicker中当前选定的小时。
const char* GetSelectMinute() const 获取UITimePicker中当前选定的分钟。
const char* GetSelectSecond() const 获取UITimePicker中当前选定的秒钟。
void SetItemHeight(int16_t height) 设置每一项Item的高度。
void EnableSecond(bool state) 设置是否在时间选择器中启用秒。
void SetTextStyle(uint16_t backgroundFontId, uint16_t highlightFontId, ColorType backgroundColor, ColorType highlightColor) 设置时间选择器中的文本格式，包括字体ID和颜色。
void SetTextColor(ColorType backgroundColor, ColorType highlightColor) 设置时间选择器中的文本颜色。
void SetBackgroundFont(const char* name, uint8_t size) 设置背景文本的字体名称和大小。
void SetHighlightFont(const char* name, uint8_t size) 设置高亮显示文本的字体名称和大小。
void RegisterSelectedListener(SelectedListener* timePickerListener) 为选定事件注册监听器。

UIAxis

UIAxis是用来表示坐标轴的组件。该组件继承于UIViewGroup，常以子类UIXAxis和UIYAxis来展示坐标轴。具体使用流程请参考示例“/src/ohos/foundation/arkui/ui_lite/test/uitest/test_chart/ui_test_chart_pillar.cpp”。

UIAxis

表 1 UIAxis核心函数

函数 介绍
virtual bool SetDataRange(uint16_t min, uint16_t max) = 0 设置坐标轴的取值范围。
virtual void SetMarkNum(uint16_t count) = 0 设置坐标轴上的刻度数。
void SetLineColor(const ColorType& color) 设置线条颜色。

UIXAxis

表 2 UIXAxis核心函数

函数

介绍

void TranslateToPixel(int16_t& value) override

将数据转换为像素的X坐标。

bool SetDataRange(uint16_t min, uint16_t max) override

设置X轴的取值范围。

void SetMarkNum(uint16_t count) override

设置X轴上的刻度数。

UIYAxis

表 3 UIYAxis核心函数

函数 介绍
void TranslateToPixel(int16_t& value) override 将数据转换为像素的Y坐标。
bool SetDataRange(uint16_t min, uint16_t max) override 设置Y轴的取值范围。
void SetMarkNum(uint16_t count) override 设置Y轴上的刻度数。
void SetAxisAlign(AxisAlign axisAlign) 设置Y轴位置：左边或者右边。

UIChart

UIChart是图表类，提供添加、删除数据集等功能，以显示图表。常以子类UIChartPolyline（线条形）和UIChartPillar（柱状图）形式提供。具体使用流程请参考示例“/src/ohos/foundation/arkui/ui_lite/test/uitest/test_chart/ui_test_chart_polyline.cpp”和“/src/ohos/foundation/arkui/ui_lite/test/uitest/test_chart/ui_test_chart_pillar.cpp”。

UIChart

表 1 UIChart核心函数

函数 介绍
void SetHeight(int16_t height) override 设置当前组件的高度。
void SetWidth(int16_t width) override 设置当前组件的宽度。
virtual bool AddDataSerial(UIChartDataSerial* dataSerial) 添加数据集。
virtual bool DeleteDataSerial(UIChartDataSerial* dataSerial) 删除数据集。
virtual void ClearDataSerial() 清理所有数据。
virtual void RefreshChart() = 0 刷新图表并重新绘制脏区域。
UIXAxis& GetXAxis() 获取X轴实例。
UIYAxis& GetYAxis() 获取Y轴实例。
void EnableReverse(bool enable) 启用图表反转。

UIChartPillar

图 1 UIChartPillar效果

UIChartPillar效果

表 2 UIChartPillar核心函数

函数 介绍
void RefreshChart() override 刷新柱状图并重新绘制脏区域。
bool SetGradient(const LinearGradient& linear, const ColorStop* stops, uint16_t stopCount) 设置chart线性梯度渐变。

UIChartPolyline

图 2 UIChartPolyline效果

UIChartPolyline效果

表 3 UIChartPolyline核心函数

函数 介绍
void RefreshChart() override 刷新折线图并重新绘制脏区域。
void SetGradientOpacity(uint8_t minOpa, uint8_t maxOpa) 设置填充颜色渐变的不透明度范围。
void SetGradientBottom(uint16_t bottom) 设置填充颜色范围的底边与x轴之间的距离。

UICrossView

UICrossView是用于管理主界面的卡片的容器组件，该组件支持的功能如下：

  • 支持卡片添加、插入、删除。水平添加卡片数无限制，上下卡片各只支持一个。
  • 支持上下卡片的局部和全局模糊。
  • 支持监听滑动开始、滑动结束、覆盖开始、覆盖结束事件。
  • 支持资源的预加载与卸载，可预加载当前显示卡片的上下左右页面。
  • 支持卡片切换动效配置。目前GUI提供缩放、翻转、翻页动效，其他动效用户可以自定义。
  • 水平方向至少需要插入一个页面，如果需要在某个界面支持上下拉，需要将这个页面的coverable设置为true（参考UICardPage）。

具体使用流程请参考示例“/src/middleware/services/gui/uikit/sample/uitest/components/ui_test_clock_dial/ui_test_clock_dial.cpp”。

表 1 UICrossView核心函数

函数 介绍
void HorAdd(UICardPage* view) 添加水平卡片。
void HorInsert(UICardPage prevView, UICardPage insertView) 插入水平卡片。
void VerAdd(UICardPage* view, VPage page) 添加垂直卡片。
void Remove(UIView* view, uint8_t direction) 删除卡片。
void SetHorCurrentPage(uint16_t index, bool loadAdjacent = true) 设置当前水平显示卡片，并配置是否加载相邻的两张卡片。
void SetSwipeACCLevel(uint8_t value, uint8_t direction = 0) 设置快速滑动后松手的加速权值。direction为0代表水平方向，direction为1代表垂直方向。
uint16_t GetCurrentPageId(uint8_t direction = 0) 获取目标方向的当前卡片索引。
UICardPage* GetCurrentPageView(uint8_t direction = 0) 获取目标方向的当前卡片对象。
void SetAnimatorTime(uint16_t time) 设置松手动画时间。
void SetLoopState(bool loop) 设置水平卡片循环模式。
void EnableScreenCap(bool enable) 设置切换卡片时，是否使能截图模式。
bool IsEnableScreenCap(void) 判断当前切换卡片模式。
void RegisterSwipeCallback(CardSwipe* callback) 注册一个拖拽动效回调函数。
void SetOnSwipeListener(UISwipeView::OnSwipeListener* onSwipeListener) 注册一个滑动动画结束监听器。
UIViewType GetViewType() 获取控件类型。
void SetBlurRadius(float radius) 设置上下界面的高斯模糊半径。
参数radius：模糊半径。内部调参值，并非指半径内的区域才会模糊，此值决定不同程度的高斯模糊效果，合法值为[0，32]。

UICardPage

表 2 UICardPage核心函数

函数 介绍
virtual void PreLoad(void) 卡片资源加载回调函数：在水平方向卡片切换（SetHorCurrentPage）或者滑动结束时，如果当前卡片未加载并且位于屏幕中间或者紧邻的左/右任一位置时，则会调用该函数。
virtual void UnLoad(void) 卡片资源卸载回调函数：在水平方向卡片切换（SetHorCurrentPage）或者滑动结束时，如果当前卡片已加载并且远离屏幕（不在屏幕中间以及紧邻左右位置）时，则会调用该函数。
virtual void ScrollBegin(bool isActive) 卡片滑动开始回调函数：在水平滑动开始时，当前水平方向显示的卡片以及左右相邻卡片将调用该函数。向上滑动时，下界面调用该函数；向下滑动时，上界面调用该函数。
isActive参数：无论是水平滑动，还是垂直滑动，滑动开始显示的卡片为true，其它调用该函数的卡片为false。
virtual void ScrollEnd(bool isActive) 卡片滑动结束回调函数：在水平/垂直滑动动画结束时，滑动开始时已经调用了ScrollBegin函数的卡片，都会接收到结束事件。
isActive参数：滑动结束时当前显示的卡片为true，其他为false。
virtual void CoverBegin(bool isCovered) 卡片覆盖开始回调函数：在垂直滑动开始时，水平方向当前显示的卡片调用该函数。
isCovered参数：水平卡片被覆盖时为true，否则为false。
virtual void CoverEnd(bool isCovered) 卡片覆盖结束回调函数：在垂直滑动动画结束时，水平方向当前显示的水平卡片调用该函数。
isCovered参数：水平界面被覆盖时为true，否则为false。
virtual void OnActive(void) 水平方向卡片切换（SetHorCurrentPage）回调函数：当水平方向卡片切换后，当前显示的卡片调用该函数。
Slice状态变化回调函数：当Slice切换到Resume状态时，水平方向显示的卡片调用该函数。
virtual void OnPause(void) Slice状态变化回调函数：当Slice切换到Pause状态时，水平方向显示的卡片调用该函数。
virtual void OnInactive(void) 水平方向卡片切换（SetHorCurrentPage）回调函数：当水平方向显示卡片切换后，切换前显示的卡片调用该函数。
virtual void OnCovered(void) 垂直方向卡片切换（SetVerCurrentPage）回调函数：在垂直方向卡片切换结束后，水平方向显示的卡片由被覆盖切换到可见状态时，调用该函数。
virtual void OnUncovered(void) 垂直方向卡片切换（SetVerCurrentPage）回调函数：在垂直方向卡片切换结束后，水平方向显示的卡片由可见切换到被覆盖状态时，调用该函数。
void SetCoverable(bool coverable) 设置当前水平卡片是否能被垂直卡片覆盖。
bool IsCoverable(void) 获取当前卡片覆盖状态。
UIViewType GetViewType() 获取控件类型。

表 3 CardSwipe核心函数

函数 介绍
virtual void CardSwipeAlg(UICardPage leftCard, UICardPage rightCard, int16_t xOffset) 拖动卡片时的滑动算法，输入为UICardPage类型。
virtual void CardSwipeAlg(UIImageView leftCard, UIImageView rightCard, int16_t xOffset) 拖动卡片时的滑动算法，输入为UIImageView类型。

UIRollerView

UIRollerView将图片按照滚筒的形式排布并支持滚动交互，目前仅支持水平方向。具体使用流程请参考示例“/src/middleware/services/gui/uikit/sample/uitest/components/ui_test_roller_view/ui_test_roller_view.cpp”。

图 1 UIRollerView Display模式效果

UIRollerView-Display模式效果

表 1 UIRollerView核心函数

函数 介绍
void SetItemSize(uint16_t width, uint16_t height) 设置滚筒元素的原始宽高。
void SetItemPadding(uint16_t padding) 设置滚筒元素的间隔距离。
void SetMirrorOpacity(uint8_t opa) 设置滚筒元素镜像图的透明度。
void SetSensitivityFactor(float sensitivity) 设置滚筒灵敏度。
float GetSensitivityFactor() 获取滚筒灵敏度。
bool AddItem(std::string name, const ImageInfo* src) 添加滚筒元素。
void RemoveItem(std::string name) 移除滚筒元素。
void ClearAll() 清除所有滚筒元素。
std::string GetCurrentItemName() 获取当前对齐的元素名称。
UIViewGroup* GetCurrentItem() 获取当前对齐的元素组，包含原始元素以及该元素的镜像图。
void SetCurrentItem(std::string name, bool enableAnimator = false) 设置当前对齐的元素，并配置是否进行切换动画。
void SetMode(RollerViewMode mode, bool enableAnimator = false) 设置元素陈列模式，并配置是否进行切换动画。
陈列模式分为以下三种：

• DISPLAY：将元素按照圆筒的形式排布。
• COVER：将当前对齐的元素平铺满控件。
• TRANSITION：特指上述两个模式切换过程中的状态，仅内部使用。
RollerViewMode GetMode() 获取元素陈列模式。
void SetOnModeChangeListener(OnModeChangeListener* onModeChangeListener) 设置元素陈列模式变化监听器。
OnModeChangeListener*& GetOnModeChangeListener() 获取元素陈列模式变化监听器。
void SetOnScrollListener(OnScrollListener* onScrollListener) 设置滚动监听器。
OnScrollListener*& GetOnScrollListener() 获取滚动监听器。
void SetCamDistance(int16_t distance) 设置相机距离。
void SetCamY(int16_t y) 设置相机Y坐标。

UICoverflowView

UICoverflowView用于添加图片，使图片之间存在覆盖流效果。仅支持水平方向，效果如图1所示。具体使用流程请参考示例“/src/middleware/services/gui/uikit/sample/uitest/components/ui_test_coverflow/ui_test_coverflow.cpp”。

图 1 覆盖流效果

覆盖流效果

表 1 UICoverflowView核心函数

函数 介绍
void Add(const char id, const ImageInfo src); 添加图片资源，以及对应的ID值。
void Remove(const char* id); 移除对应ID的图片。
void SetImgSize(uint16_t width, uint16_t height); 设置图片的大小。
void SetImgPadding(uint16_t padding); 设置图片之间的间距。(需要在添加子控件前设置)
void SetRotateAngle(float angle); 设置左右图片的最大旋转角度。
void SetOnCoverflowListener(OnCoverflowScrollListener* onCoverflowListener) 设置滑动监听器，监听该控件的滑动事件，实现自定义的滑动处理。

说明： 建议使用UICoverflowView2控件，具体请参见“UICoverflowView2”。UICoverflowView2能够覆盖UICoverflowView功能，而且适用于更多的UI场景。

UICoverflowView2

适用于UICoverflowView子控件的内容为多种图片场景，示例如图1所示。具体使用流程请参考示例“/src/middleware/services/gui/uikit/sample/uitest/components/ui_test_coverflow/ui_test_coverflow2.cpp”。

图 1 UICoverflowView实例显示效果

UICoverflowView实例显示效果

表 1 UICoverflowView2核心函数

函数 介绍
void Add(UIView* view); 添加一个UITransformGroup类型的子控件。
void Insert(UIView prevView, UIView insertView) 插入一个UITransformGroup类型的子控件。
void Remove(UIView* view); 删除一个已添加的子控件。
void SetPagePadding(uint16_t padding) 设置每项之间的间距。(需要在添加子控件前设置)
void SetChildMaxRotateAngle(float angle) 设置项的最大旋转角度。
void SetOnCoverflowListener(OnCoverflowScrollListener* onCoverflowListener) 设置滑动监听器，监听该控件的滑动事件，实现自定义的滑动处理。

须知： 不要添加UILabel UILabelExt到UITransformGroup类型的子控件中，会导致位置显示异常。

UISphereView

该控件可以实现2.5D球形菜单界面，显示效果如图1所示。

具体使用流程请参考示例“/src/middleware/services/gui/uikit/sample/uitest/components/ui_test_sphere_view/ui_test_sphere_view.cpp”。

图 1 球形效果

球形效果

表 1 UISphereView核心参数

函数 介绍
UISphereView(uint8_t numberOfRow); 构造函数，需要输入球形的一行最多显示数量，超过则换行。
void Add(UIView* view) override; 添加子控件，只支持UITransformGroup类型控件。
void Insert(UIView prevView, UIView insertView) override; 插入子控件，只支持UITransformGroup类型控件。
void Remove(UIView* view) override; 删除子控件，需要输入add或者insert的控件对象。
void SetNumberOfRow(uint8_t numberOfRow); 设置球形每行最多显示控件数。
uint8_t GetNumberOfRow()； 获取当前球形每行的数量。
void UpdateItemAngle(float angle); 从当前位置旋转设置的角度。
void SetSensitivityFactor(float sensitivity)； 设置球形灵敏度。
float GetSensitivityFactor()； 获取球形灵敏度。

须知： 球形控件的宽高需要设置一致。

以下是球型菜单控件的示例代码：

    UISphereView sphereView = new UISphereView(8); // 创建一个每行显示8个控件的球形菜单
    sphereView->SetPosition(0, 0, Screen::GetInstance().GetWidth(), Screen::GetInstance().GetHeight()); // 设置球形菜单大小为屏幕大小
    sphereView->SetThrowDrag(true);
    sphereView->RequestFocus(); // 申请焦点，支持表冠滚动。
     for (uint8_t i = 0; i < 24; i++) { // 添加24的子控件到球形菜单
        UITransformGroup* group = new UITransformGroup(); // 创建UITransformGroup控件。
        group->SetPosition(0, 0, 60, 60);
        group->SetStyle(STYLE_BACKGROUND_OPA, OPA_TRANSPARENT);
        UIImageView* image = new UIImageView(); // 创建需要显示的图片控件。
        image->SetPosition(0, 0, 60, 60);
        image->SetAutoEnable(false);
        image->SetResizeMode(UIImageView::ImageResizeMode::FILL);
        ImageInfo* info = ImageCacheManager::GetInstance().LoadSingleRes("[图片资源路径]");
        image->SetSrc(info);
        group->Add(image);
        sphereView->Add(group);
    }

UISlipflowView

具体使用流程请参考示例“/src/middleware/services/gui/uikit/sample/uitest/components/ui_test_slipflow/ui_test_slipflow.cpp”。

图 1 滑动流效果

滑动流效果

表 1 UISlipflowView核心函数

函数 介绍
void Add(UIView* view); 添加子控件。
void Remove(UIView* view); 删除子控件。
void SetCurrentPage(uint16_t index, bool needAnimator); 设置当前页。
void SetAnimatorTime(uint16_t time); 设置页面切换的动画时间。
void SetMoveCoefficient(uint16_t coefficient); 设置当前页面及右侧页面相对于其他页面的移动系数，及当前页面及右侧页面的移动速度是其他页的coefficient倍。
void SetOnSlipflowListener(OnSlipflowScrollListener* onSlipflowListener) 设置滑动监听器，监听该控件的滑动事件，实现自定义的滑动处理。

UIIcosahedronView

UIIcosahedronView二十面体容器控件，可以实现足球效果，效果如图1所示。具体使用流程请参考示例“/src/middleware/services/gui/uikit/sample/uitest/components/ui_test_icosahedron/ui_test_icosahedron.cpp”。

图 1 足球效果

足球效果

该控件实际是一个由20个三角面（三个顶点）组成的容器控件，每个六边形都按照特定方向在三角内，所以如果需要实现足球效果，对传入的各个面的图片资源存在限制。每个面图片需要是背景透明的正六边的图片，如图2所示，方向也需要特别注意，要与实例一致。具体使用流程请参考示例“/src/middleware/services/gui/uikit/sample/uitest/components/ui_test_icosahedron/ui_test_icosahedron.cpp”。

图 2 足球面的图片要求

足球面的图片要求

表 1 UIIcosahedronView核心函数

函数 介绍
void SetSideLength(uint16_t sideLen); 设置二十面体的棱长，通过该接口可以控制球体的大小。
void Add(UIView* view) override; 添加UIViewImage控件。
void RefreshIcosahedron(); 刷新二十面体容器，在更新棱长或旋转的角度后使用。
bool RotatePlanes(int16_t angle, const Vector3& pivotStart, const Vector3& pivotEnd); 旋转二十面体容器。
void SetDefaultImage(ImageInfo* src) 设置默认图片。在添加子控件不满二十面体时，使用该图片进行显示。
void SetLuminanceFactor(float value) 设置惯性的补偿系数。系数越大，惯性越大。

UIHexagonList

UIHexagonList是呈蜂窝状排布子节点的容器控件，常用于陈列菜单界面的各应用图标。该控件仅支持添加UIImageView和UITransformGroup。具体使用流程请参考示例“/src/middleware/services/gui/uikit/sample/uitest/components/ui_test_hexagons_list/ui_test_hexagons_list.cpp”。

表 1 UIHexagonList核心函数

函数 介绍
void SetImageDistance(uint16_t distance) 设置图标的间距。
void SetImageSizeInCenter(uint16_t size) 设置图标居中显示时的尺寸。
void SetScaleFactorByDistance(float factor) 设置图标缩放系数。
float GetScaleFactorByDistance() 获取图标缩放系数。
void SetScaleThesholdOfZeroFactor(float threshold) 设置图标缩放阈值。
float GetScaleThesholdOfZeroFactor() 获取图标缩放阈值。
void Add(UIView* view) 添加控件，支持控件类型为UIImageView和UITransformGroup。
void Insert(UIView prevView, UIView insertView) 插入控件，支持控件类型为UIImageView和UITransformGroup。
void LayoutChildren(bool needInvalidate = false) 按照蜂窝状布局控件。
void MoveChildByOffset(int16_t offsetX, int16_t offsetY) 移动控件。
void Scale(float scale, uint8_t centerIndex) 以索引值为centerIndex的控件为中心点缩放指定倍数。
float GetGlobalScale() 获取全局缩放倍数。
UIView* GetViewByIndex(uint8_t index) 获取指定索引值关联的控件。
void SetReboundMode(ReboundMode mode) 设置回弹模式，支持模式为：

• NEAREST_IMG_ON_SCR_CENTER：离屏幕中心点最近的图标将回弹至屏幕中间。
• CENTER_IMG_ON_SCR_CENTER：初始位于中心的图标将回弹至屏幕中间。
• NORMAL：与UIScrollView相同的模式。
int8_t GetFocusedImgIndex() 获取位于屏幕中间的图标索引。
Vector2 GetCurrentPosition(uint8_t index) 获取指定索引值关联的控件位置。

UICustomHexagonsList

UICustomHexagonList继承自UIHexagonList，额外支持表冠响应，可通过SetOnRotateListener实现表冠转动监听。具体使用流程请参考示例“/src/middleware/services/gui/uikit/sample/uitest/components/ui_test_hexagons_list/ui_test_hexagons_list.cpp”。

表 1 UICustomHexagonList核心函数

函数

介绍

void StartRotateAnimator(uint8_t center, int16_t xDistance, int16_t yDistance, float startScale, float endScale)

以索引值为center的控件为中心，启动一段动画完成指定距离偏移和指定倍数缩放。

void StopRotateAnimator()

停止动画。

UIWaterfallList

UIWaterfallList是以每行3列或4列交叉排布子控件的容器控件，常用于陈列菜单界面的各应用图标。具体使用流程请参考示例“/src/middleware/services/gui/uikit/sample/uitest/components/ui_test_waterfall_list/ui_test_waterfall_list.cpp”。

表 1 UIWaterfallList核心函数

函数 介绍
void SetImageDistance(uint16_t distance) 设置图标的间距。
void SetImageSizeInCenter(uint16_t size) 设置图标居中显示时的尺寸。
void SetScaleFactorByDistance(float factor) 设置图标缩放系数。
float GetScaleFactorByDistance() 获取图标缩放系数。
void SetScaleThesholdOfZeroFactor(float threshold) 设置图标缩放阈值。
float GetScaleThesholdOfZeroFactor() 获取图标缩放阈值。
void Add(UIView* view) 添加控件，支持控件类型为UIImageView和UITransformGroup。
void Insert(UIView prevView, UIView insertView) 插入控件，支持控件类型为UIImageView和UITransformGroup。
void LayoutChildren(bool needInvalidate = false) 按照瀑布状布局控件。
void MoveChildByOffset(int16_t offsetX, int16_t offsetY) 移动控件。
void Scale(float scale, int16_t centerIndex = -1) 以索引值为centerIndex的控件为中心点缩放指定倍数。
float GetGlobalScale() 获取全局缩放倍数。
UIView* GetViewByIndex(uint8_t index) 获取指定索引值关联的控件。
int8_t GetFocusedImgIndex() 获取位于屏幕中间的图标索引。
Vector2 GetCurrentPosition(uint8_t index, WaterfallListMode mode = NORMAL) 获取指定索引值关联的控件位置。
int16_t GetInitRow(uint8_t index) 获取指定索引值关联的控件初始行数。
int16_t GetInitCol(uint8_t index) 获取指定索引值关联的控件初始列数。
Vector2 GetInitPosition(uint8_t index) 获取指定索引值关联的控件初始位置。
void EnterMove(float curTime, float totalTime) 启动入场动画。
Vector2 GetReboundDistance() 获取回弹距离。

UIParticleView

UIParticleView是用于生成粒子效果的容器控件。UIParticleView通过ParticleCell来定义一组粒子的样式和行为，同时也提供适用于所有粒子的全局属性配置。通过调整属性，可以创造丰富多样的粒子效果。具体使用流程请参考示例“/src/middleware/services/gui/uikit/sample/uitest/components/ui_test_particle/ui_test_particle.cpp”。

图 1 粒子效果

粒子效果

表 1 UIParticleView核心函数

函数 介绍
UIParticleView() 粒子容器控件构造函数。粒子动画将不间断运行。具体是否有内容显示取决于ParticelCell的配置。
UIParticleView(uint32_t time, bool repeat) 粒子容器控件构造函数。可指定粒子动画运行时长（ms）以及是否重复运行。
virtual ~UIParticleView() override 粒子容器控件析构函数。停止粒子动画，并销毁所有ParticleCell及粒子。
ParticleCell* CreateParticleCell() 创建并返回ParticleCell。ParticleCell用于定义一组粒子的样式和行为。
void SetBirthRateRatio(float ratio) 设置粒子生产率系数，将与ParticleCell定义的粒子生产率相乘，默认值为1.0。
void SetLifetimeRatio(float ratio) 设置粒子生命周期系数，将与ParticleCell定义的粒子生命周期相乘，默认值为1.0。
void SetScaleRatio(float ratio) 设置粒子缩放系数，将与ParticleCell定义的粒子缩放倍数相乘，默认值为1.0。
void SetVelocityRatio(float ratio) 设置粒子速度系数，将与ParticleCell定义的粒子速度相乘，默认值为1.0。
float GetBirthRateRatio() 获取粒子生产率系数。
float GetLifetimeRatio() 获取粒子生命周期系数。
float GetScaleRatio() 获取粒子缩放系数。
float GetVelocityRatio() 获取粒子速度系数。
void SetTime(uint32_t time) 设置粒子动画运行周期。
uint32_t GetTime() 获取粒子动画运行周期。
bool IsRepeat() 获取粒子动画是否重复运行。
void Start() 启动粒子动画。
void Pause() 暂停粒子动画。
void Resume() 继续粒子动画。
void Stop() 停止粒子动画。将销毁所有ParticleCell及粒子。
uint8_t GetState() 获取粒子动画状态。
void ClearParticles() 销毁所有ParticleCell及粒子。

表 2 ParticleCell核心函数

函数 介绍
void SetSrc(const ImageInfo* src) 设置粒子图源。
void SetSize(int16_t width, int16_t height) 设置粒子初始宽高。
void SetSizeRange(int16_t range) 设置粒子初始宽高上下浮动范围。
void SetPos(int16_t x, int16_t y) 设置粒子初始位置。
void SetPosRange(int16_t xRange, int16_t yRange) 设置粒子初始位置上下浮动范围。
void SetLifetime(int16_t lifetime) 设置粒子生命周期。
void SetLifetimeRange(int16_t range) 设置粒子生命周期上下浮动范围。
void SetBirthRate(int16_t birthRate) 设置粒子生产率：每个动画周期生产多少粒子。
void SetVelocity(float velocity) 设置粒子速度。
void SetVelocityRange(float range) 设置粒子速度上下浮动范围。
void SetAcceleration(float x, float y) 设置粒子加速度：每个动画周期x和y方向的速度变化。
void SetEmissionAngle(float angle) 设置粒子发射角度，有效范围为[0, 360]。定义3点钟方向为0度，顺时针增加度数。
void SetEmissionRange(float range) 设置粒子发射角度上下浮动范围。
void SetScale(float scaleX, float scaleY) 设置粒子最终缩放倍数。
void SetScaleRange(float range) 设置粒子最终缩放倍数上下浮动范围。
void SetScaleFunc(EasingFunc func) 设置粒子缩放变化的数学函数。
void SetAlpha(int16_t startAlpha, int16_t finalAlpha) 设置粒子起始和最终透明度，有效范围为[0，255]。
void SetAlphaRange(int16_t range) 设置粒子起始和最终透明度上下浮动范围。
void SetAlphaFunc(EasingFunc func) 设置粒子透明度变化的数学函数。
void SetSpin(float spin, ParticleCell::SpinMode mode = ParticleCell::SpinMode::CENTER) 设置粒子周期性旋转度数和旋转模式，默认为绕中线旋转。
SpinMode::CENTER：绕中线旋转。
SpinMode::DIAGONAL_LR：绕左上至右下的对角线旋转。
SpinMode::DIAGONAL_RL：绕右上至左下的对角线旋转。
void SetSpinRange(float range) 设置粒子周期性旋转度数上下浮动范围。
bool HasParticles() 获取当前ParticleCell是否包含粒子。
void SetTotalPeriod(int16_t period) 设置ParticleCell活跃周期。仅在活跃周期内的ParticleCell可以生产粒子。
PERIOD_FOREVER：代表永远活跃的特殊周期。
int16_t GetTotalPeriod() 获取ParticleCell活跃周期。
int16_t GetCurrentPeriod() 获取ParticleCell当前周期。
const ImageInfo* GetSrc() 获取粒子图源。
void ClearParticles() 销毁ParticleCell所生产的所有粒子。

UIMapView

UIMapView为定制化的地图显示控件，该控件只针对私有数据进行显示，私有数据格式如图1所示。具体使用流程请参考示例“/src/middleware/services/gui/uikit/sample/uitest/components/ui_test_map/ui_test_map.cpp”。

图 1 私有格式结构图

私有格式结构图

地图显示效果如图2所示。

图 2 显示效果

显示效果

表 1 UIMapView核心函数

函数 描述
bool SetSVG(const char* path); 使用文件路径设置SVG。
bool SetSVG(uint8_t* data, uint32_t length); 使用文件缓冲区设置SVG。
void SetOnPOIClickListener(OnPOIClickListener* listener); 设置POI的监听器。
void EnableCache(bool enable); 启用缓存。当enable为true时，它将立即缓存这个图块，并立即释放缓存。我们需要在设置SVG的时候开启缓存，或者在缩放地图完成之后开启缓存，在缩放地图之前关闭缓存。
void ScaleMap(float scale, const Vector2& pivot); 用于以目标点为基准缩放地图。
void HidePOI(uint16_t tag, bool isHide = true); 通过标签隐藏POI。

UIPlanetList

UIPlanetList是一个容器控件，其核心布局是一个3×3的网格结构，除此之外，还可以在上下左右四个方向各额外显示最多3个组件。这个控件常用于菜单界面中，用来展示应用程序的图标。该控件支持通过旋转表冠进行缩放操作，当放大至极限时，每个组件的标题将被显示。

图 1 UIPlanetList 效果示意图

UIPlanetList-效果示意图

表 1 UIPlanetList核心函数

函数 描述
AddItemVIew(UIView* view) 添加一个子控件。
AddLabel(UIView* view) 添加一个子控件对应的标题。
MoveChildTo(int16_t posX, int16_t posY); 移动所有子控件到指定的位置。
MoveChildByOffset(int16_t offsetX, int16_t offsetY) 按照偏移量移动所有子控件。
GetViewType() 获取控件的类型。
SetImageDistance(uint16_t distance) 设置子控件的间隔。
GetImageDistance() 获取子控件的间隔。
SetImageSize(uint16_t size) 设置子控件的大小。
GetImageSize() 获取子控件的大小。
SetLastOffset(int16_t x, int16_t y) 设置子控件的初始偏移量。
GetLastOffset(int16_t& x, int16_t& y) 获取子控件的初始偏移量。