touchGFX手环滚动菜单的实现（二）

touchGFX手环滚动菜单的实现（二）

前言

本系列文章由萧萧宵小(wurendikunn@outlook.com)编写，转载请注明出处。

文章链接：https://blog.csdn.net/qq_33350808/article/details/108590304

本文涉及到的软件为touchGFX Designer 4.13.0。本文学习如何实现手环中滚动菜单，希望在具体实例中学习各种控件的使用，在学习过程中会涉及到图片控件、文字控件、自定义容器、滚动控件、动作事件等等。内容过多，分几次发布。

在上一章我们学会了图片控件，文字控件和滚动控件的简单使用，并在touchGFX Designer中布置好相应的控件。在这一章学习如何在代码中实现相应的滚动效果，即滚动显示不同的图标及文字说明。

1.简单认识项目工程

接上文，在touchGFX Designer中点击左下角的"Browse Code"，进入文件夹，找到"TouchGFX\simulator\msvs\Application.sln"，打开它（需要安装Visual Studio，自行百度即可，非常常用的软件）。打开之后会有一个提醒，点击"确定"即可。

打开之后观察右手边的项目代码布局，如下所示。

分别为：

1. generated：touchGFX Designer自动生成的代码，只读属性。在每一次修改UI控件之后内容都会发生改变，所以请不要强行修改，不然重新修改之后丢失改动内容。虽然不需要我们修改它，但是同样很重要，可以观察到UI控件的初始化方式和自己定义的虚函数，通过重写虚函数实现自己的功能（在之后的章节会讲如何生成虚函数）。
2. gui：实现逻辑的代码的地方，这也是我们主要需要编辑的地方，这里的实现实际是通过继承的generated的类，所以可以使用UI定义的控件。这里分为4种：commom（主控制区），containers（自定义容器区），model（MVP模型的model，在之后的多屏之间的通信会讲到），xxx_screen（定义的各个屏幕）。
3. simulator：仿真相关
4. TouchGFX：硬件平台相关

2.自定义容器逻辑

先找到gui/containers/StartMenu.hpp，打开在其中添加如图所示的代码。

总计添加了两个头文件和一个子程序。

头文件：

#include <BitmapDatabase.hpp>
#include <texts/TextKeysAndLanguages.hpp>

子程序：

void setIcon(int16_t itemIndex)
	{
		switch (itemIndex)
		{
		case 0:icon.setBitmap(Bitmap(BITMAP_CLOCK_ID));
			iconText.setTypedText(TypedText(T_CLOCK));
			break;
		case 1:icon.setBitmap(Bitmap(BITMAP_DIAL_ID));
			iconText.setTypedText(TypedText(T_DIAL));
			break;
		case 2:icon.setBitmap(Bitmap(BITMAP_OPTIONS_ID));
			iconText.setTypedText(TypedText(T_OPTIONS));
			break;
		case 3:icon.setBitmap(Bitmap(BITMAP_SETTING_ID));
			iconText.setTypedText(TypedText(T_SETTING));
			break;
		case 4:icon.setBitmap(Bitmap(BITMAP_VIEW_ID));
			iconText.setTypedText(TypedText(T_VIEW));
			break;
		}
	}

其中注意子程序中设置图片和文字用的名称要和上一章中自己定义的资源名称一致。至此自定义容器的逻辑已经完成。

这里我们可以看看图片和文字资源长什么样子。

首先打开图片头文件，画风是这样的：

// Generated by imageconverter. Please, do not edit!

#ifndef BITMAPDATABASE_HPP
#define BITMAPDATABASE_HPP

#include <touchgfx/hal/Types.hpp>
#include <touchgfx/lcd/LCD.hpp>
#include <touchgfx/Bitmap.hpp>

const uint16_t BITMAP_CLOCK_ID = 0;
const uint16_t BITMAP_DIAL_ID = 1;
const uint16_t BITMAP_OPTIONS_ID = 2;
const uint16_t BITMAP_SETTING_ID = 3;
const uint16_t BITMAP_VIEW_ID = 4;

namespace BitmapDatabase
{
const touchgfx::Bitmap::BitmapData* getInstance();
uint16_t getInstanceSize();
}

#endif

然后打开文字资源头文件，画风是这样的：

/* DO NOT EDIT THIS FILE */
/* This file is autogenerated by the text-database code generator */

#ifndef TEXTKEYSANDLANGUAGES_HPP
#define TEXTKEYSANDLANGUAGES_HPP


typedef enum
{
    GB,
    EN,
    NUMBER_OF_LANGUAGES
} LANGUAGES;


typedef enum
{
    T_CLOCK,
    T_DIAL,
    T_OPTIONS,
    T_SETTING,
    T_VIEW,
    NUMBER_OF_TEXT_KEYS
} TEXTS;

#endif // TEXTKEYSANDLANGUAGES_HPP

可以看到图片和文字资源的名称和当初定义的时候都是一一对应的。

3.菜单滚动刷新

之后打开gui/screen_start_screen/Screen_startView.hpp，实现滚动控件的刷新，程序很简单，如图所示：

红色框内是添加的程序：

	//重写滚动刷新函数
	virtual void scrollList_startUpdateItem(StartMenu& item, int16_t itemIndex)
	{
		item.setIcon(itemIndex);
	}

这里可以看到实现的是通过重写虚函数来实现滚动刷新的，调用的也是上面在自定义控件部分写的子程序。问题来了，怎么知道这个函数的。

其实是官方例程里教的，但是依葫芦画瓢不是个事，可以尝试自己找找。由于gui中的类通过都是继承generated中的类实现的，所以打开Screen_startView的父类Screen_startViewBase。在generated/screen_start_screen/Screen_startViewBase.hpp中我们找到了

    virtual void scrollList_startUpdateItem(StartMenu& item, int16_t itemIndex)
    {
        // Override and implement this function in Screen_start
    }

然后在generated/screen_start_screen/Screen_startViewBase.cpp中找到了

void Screen_startViewBase::updateItemCallbackHandler(touchgfx::DrawableListItemsInterface* items, int16_t containerIndex, int16_t itemIndex)
{
    if (items == &scrollList_startListItems)
    {
        touchgfx::Drawable* d = items->getDrawable(containerIndex);
        StartMenu* cc = (StartMenu*)d;
        scrollList_startUpdateItem(*cc, itemIndex);
    }
}

可以看出官方已经准备好了需要重写的函数，甚至提供了注释提示此函数需要重写。所以之后写控件逻辑可以不急着找API手册，先看父类代码中的实现，有没有给出实现接口。

4.编译仿真

实际上上面两步只添加了一点点代码，分别是自定义控件的图片和文字资源设置子程序和重写开始界面中滚动控件的刷新程序。添加完之后就可以直接编译仿真了，F5即可。可以看到效果：

如果有开发板的话，就可以直接烧录到开发板中用手滑动试试了。

后记

这一章完成了滚动菜单的显示功能，涉及到简易的工程代码认知，图片和文字资源的使用，自定义控件逻辑的编写，滚动控件刷新逻辑的编写。下一章准备实现点击菜单进入选中的界面，也就是滚动控件的点击回调函数和屏幕的切换实现。

本系列文章总目录：touchGFX学习记录