跳转到主要内容

滑动菜单

TouchGFX中的滑动菜单是由内部容器图像和可选按钮构成的专门化的容器,可以动画形式显示收起和展开状态的变化过程。

在模拟器中运行的滑动菜单

控件组

滑动菜单位于TouchGFX Designer中的容器控件组中。

TouchGFX Designer中的滑动菜单

属性

下面的部分介绍了滑动菜单的属性。

属性组属性说明
名称控件的名称名称是TouchGFX Designer和代码中使用的唯一标识符
位置XY 指定控件左上角相对于其父的位置。

WH 指定控件的宽度和高度。
滑动菜单的大小是由其背景和按钮图像的大小决定的。

锁定指定控件是否应锁定为其当前的X、Y、W和H。
如果锁定控件,还会禁止通过屏幕与控件进行交互。

可见 指定控件的可见性。
如果将控件标记为不可见,还会禁止通过屏幕与控件进行交互。
展开方向展开方向指定滑动菜单的展开方向。
状态状态指定滑动菜单的初始状态。

收起:可见像素数指定状态为收起时应可见的像素数。

展开:隐藏像素数 指定状态为展开时应隐藏的像素数。

展开超时指定从展开状态自动恢复到收起状态之前的时长。
背景背景图像 指定用作背景的图像。

背景位置 指定背景图像相对于控件坐标的x、y坐标。
按钮使用按钮 指定是否使用按钮来控制控件的状态。

释放图像指定用于按钮已发布状态的图像。

按下图像指定用于按钮已按下状态的图像。

按钮位置指定按钮相对于控件坐标的x、y坐标。
动画缓动缓动选项指定动画使用的缓动方程。

持续时间指定动画应持续的时长。
Mixin可拖动 指定在运行时控件是否可拖动。

ClickListener 指定控件被点击时是否会调用回调函数。

FadeAnimator 指定控件是否可绘制其 Alpha 值变化的动画。

MoveAnimator 指定控件是否可绘制 XY 值变化的动画。

交互

下面的部分介绍了滑动菜单支持的操作和触发条件。

操作

控件特有的操作说明
更改滑动菜单的状态将滑动菜单的状态改为收起或展开
复位滑动菜单的定时器复位定时器会自动将滑动菜单状态恢复为收起状态
标准控件操作说明
移动控件随时间的推移将控件移动到新位置。
隐藏控件隐藏控件(将可见性设置为false)。
显示控件使隐藏的控件可见(将可见性设置为true)。

触发条件

触发条件说明
滑动菜单动画结束从一种状态变为另一种状态的滑动菜单动画已结束。
滑动菜单状态已更改滑动菜单的状态已更改。

性能

滑动菜单为Container类型,默认情况下不会出现在绘图链中。 因此,性能主要取决于子控件的绘图性能。

更多关于绘图性能的信息,请阅读常规UI组件性能部分。

示例

生成代码

在生成的视图基类的代码中,可以查看TouchGFX Designer是如何创建滑动菜单的。

Screen1ViewBase.cpp
#include <gui_generated/screen1_screen/Screen1ViewBase.hpp>
#include "BitmapDatabase.hpp"

Screen1ViewBase::Screen1ViewBase()
{
slideMenuName.setup(touchgfx::SlideMenu::EAST,
touchgfx::Bitmap(BITMAP_LEFT_SLIDE_MENU_BACKGROUND_ID),
touchgfx::Bitmap(BITMAP_LEFT_SLIDE_MENU_BUTTON_ID),
touchgfx::Bitmap(BITMAP_LEFT_SLIDE_MENU_BUTTON_ID),
0, 0, 49, 111);
slideMenuName.setState(touchgfx::SlideMenu::COLLAPSED);
slideMenuName.setVisiblePixelsWhenCollapsed(24);
slideMenuName.setHiddenPixelsWhenExpanded(0);
slideMenuName.setAnimationEasingEquation(touchgfx::EasingEquations::circEaseInOut);
slideMenuName.setAnimationDuration(18);
slideMenuName.setExpandedStateTimeout(180);
slideMenuName.setXY(0, 0);

add(slideMenuName);
}
Tip
可在用户代码中使用这些函数以及SlideMenu类中提供的其他函数。 如果更改控件的外观,请必须调用 Slide MenuName.invalidate() 强制进行重新绘制。

TouchGFX Designer示例

如需进一步了解滑动菜单,请尝试在TouchGFX Designer中使用以下UI模板创建新应用:

TouchGFX Designer中的滑动菜单示例UI模板

API参考