发帖
回复
楼主
多屏应用
在本教程中，您将学习如何在应用程序中创建多个屏幕以及如何在两个屏幕之间共享数据。我们将创建一个模拟时钟的应用程序，它将使用一个屏幕设置小时和分钟，并将设置的时间传递给另一个带有运行时钟的屏幕。
您还将学习如何使用TouchGFX Designer根据交互（例如屏幕更改）创建动画。
可以从此链接下载本教程中将使用的图像 。将文件解压缩到磁盘上的目录。
设置屏幕1
创建的第一个屏幕是Screen1，它是可以设置小时和分钟并将其与运行时钟一起发送到屏幕的屏幕。屏幕1如下所示，其中包含两个文本框，其中包含所需的时钟时间。要调整框中的值，请使用向上和向下箭头。为了保存所选值并将其传递到时钟上，使用了相应框下方的保存按钮。最后，通过按时钟按钮，随时钟切换到Screen2。
插入背景和文本区域的操作如下图和表格所示。
屏幕1的屏幕快照，突出显示了背景的位置和文本区域
| 位置 | 小部件 | 物产 |
| 1个 | 图片 |
|
| 2 | 文字区 |
|
| 3 | 文字区 |
|
| 4 | 文字区 |
|
| 5 | 文字区 |
|
这些按钮将插入到应用程序中，如下图和表所示。
屏幕1的屏幕快照，突出显示了按钮的位置
| 位置 | 小部件 | 物产 |
| 1个 | 纽扣 |
|
| 2 | 纽扣 |
|
| 3 | 纽扣 |
|
| 4 | 纽扣 |
|
| 5 | 带标签的按钮 |
|
| 6 | 带标签的按钮 |
|
| 7 | 带标签的按钮 |
|
通过设置图形元素，下一步是添加按钮的触发器，按钮将调整所选值并保存它们：
| 相互作用 | 物产 |
|
单击小时增加按钮 |
|
| 单击小时减少按钮 |
|
| 单击分钟向上按钮 |
|
| 单击分钟向下按钮 |
|
| 单击“节省时间”按钮 |
|
| 单击“保存分钟”按钮 |
|
利用设计人员生成的虚拟功能，我们首先集成了箭头按钮的四个功能。为了跟踪小时和分钟的值，还添加了两个计数器。
因此，以下代码应添加到Screen1View.hpp
Screen1View.hpp
...
public:
...
virtual void buttonHourUpClicked();
virtual void buttonHourDownClicked();
virtual void buttonMinuteUpClicked();
virtual void buttonMinuteDownClicked(); protected: int16_t hour; int16_t minute; ...
当按下箭头时，相应的值将更改为适合时钟的值。
应当以以下方式添加这四个功能的逻辑。
Screen1View.cpp
... void Screen1View::buttonHourUpClicked() { hour = (hour + 1) % 24; // Keep new value in range 0..23 Unicode::snprintf(textAreaHourBuffer, TEXTAREAHOUR_SIZE, "%02d", hour); textAreaHour.invalidate(); } void Screen1View::buttonHourDownClicked() { hour = (hour + 24 - 1) % 24; // Keep new value in range 0..23 Unicode::snprintf(textAreaHourBuffer, TEXTAREAHOUR_SIZE, "%02d", hour); textAreaHour.invalidate(); } void Screen1View::buttonMinuteUpClicked() { minute = (minute + 1) % 60; // Keep new value in range 0..59 Unicode::snprintf(textAreaMinuteBuffer, TEXTAREAMINUTE_SIZE, "%02d", minute); textAreaMinute.invalidate(); } void Screen1View::buttonMinuteDownClicked() { minute = (minute + 60 - 1) % 60; // Keep new value in range 0..59 Unicode::snprintf(textAreaMinuteBuffer, TEXTAREAMINUTE_SIZE, "%02d", minute); textAreaMinute.invalidate(); }
设置屏幕2
第二个屏幕Screen2是运行时钟的放置位置，从Screen1中保存的值开始。除时钟外，Screen2还包含一个围绕时钟动画的圆圈，表示时钟正在运行。最后，要返回到Screen1，将执行一个按钮，将屏幕更改为Screen1。
使用模拟器运行应用程序时的“ screen2”屏幕截图
在将元素添加到Screen2之前，必须创建一个新屏幕。这是通过TouchGFX Designer中的添加屏幕按钮完成的，如下图所示。
TouchGFX Designer中添加屏幕按钮的位置
当进入“ screen2”时，时钟和动画都通过进入视图而动画到其位置，时钟从左侧移入，圆圈从右侧移入。因此，这两个小部件最初放在TouchGFX Designer中的画布外部。
窗口小部件的放置应按照下面的图片和表格进行。
Wigets在“ screen2”中的位置
| 位置 | 小部件 | 物产 |
| 1个 | 图片 |
|
| 2 | 纽扣 |
|
| 3 | 文字区 |
|
| 4 | 圈 |
|
在屏幕之间切换
屏幕1上的时钟按钮和屏幕2上的配置按钮需要交互才能切换屏幕。此外，输入Screen2时，需要将放置在Screen2上屏幕区域之外的两个元素移动到位。
将以下交互添加到Screen1：
| 相互作用 | 物产 |
|
“更改为Screen2” |
|
还将以下交互添加到Screen2：
| 相互作用 | 物产 |
|
更改为“ Screen1” |
|
|
将圆移到位 |
|
|
将文字时钟移到位 |
|
要在运行时更新时钟并为圆圈设置动画，请handleTickEvent 使用虚拟功能 。
handleTickEvent 由TouchGFX框架定期调用，使它能够动态更新活动屏幕中的元素，在这种情况下将是时钟和循环。
类似于Screen1，一个小时和一个分钟的计数器用于跟踪时钟。由于 handleTickEvent 调用频率比应更新的时钟频率高，因此添加了tickCounter来确定时钟更新之间的滴答声数量。为了更新圆弧的角度，使用了addStart和addEnd函数。handleTickEvent 如下所示，将函数和变量添加到Screen2View.hpp中。
Screen2View.hpp
public:
...
virtual void handleTickEvent(); protected: int16_t hour; int16_t minute; int16_t tickCount; int16_t addStart; int16_t addEnd; ...
集成handleTickEventScreen2View.cpp，从而更新时钟和圆圈的代码如下所示
Screen2View.hpp
... void Screen2View::handleTickEvent() { if (tickCount == 60) { minute++; hour = (hour + (minute / 60)) % 24; minute %= 60; Unicode::snprintf(textClockBuffer1, TEXTCLOCKBUFFER1_SIZE, "%02d", hour); Unicode::snprintf(textClockBuffer2, TEXTCLOCKBUFFER2_SIZE, "%02d", minute); textClock.invalidate(); tickCount = 0; } if (!textClock.isMoveAnimationRunning()) { tickCount++; if (circle.getArcStart() + 340 == circle.getArcEnd()) { addStart = 2; addEnd = 1; } else if (circle.getArcStart() + 20 == circle.getArcEnd()) { addStart = 1; addEnd = 2; } circle.invalidate(); circle.setArc(circle.getArcStart() + addStart, circle.getArcEnd() + addEnd); circle.invalidate(); } }
回复
举报
