TouchGFX使用教程（三）

界面事件

之前和大家共享了一些基本的操作，這章會給大家共享下界面使用的一些小技巧及方法。
除去現成控件的事件外，不知道大家有沒有考慮過其他一些界面的實現方式，例如，類似手機下滑菜單，或者上滑菜單，再比如一個動態背景。或者自己做的地圖的量算尺子。
這些方法都涉及到界面的滑動事件或者界面的定時刷新事件又或者點擊事件之類。TouchGFX給大家提供了UIEventListener類用於事件監聽。
此類爲用戶界面事件（即由用戶與設備交互生成的事件）聲明處理程序接口。除系統計時器刻度外，所有其他與用戶界面設備外圍設備（顯示器，按鍵等）無關的其他系統事件均不屬於該界面。
下方是類中函數的介紹。

函數名	介紹
virtual void handleClickEvent(const ClickEvent & event)	系統檢測到鼠標單擊或顯示觸摸事件時，將調用此處理程序。
virtual void handleDragEvent(const DragEvent & event)	當系統檢測到拖動事件時，將調用此處理程序。
virtual void handleGestureEvent(const GestureEvent & event)	當系統檢測到手勢事件時，將調用此處理程序。
virtual void handleKeyEvent(uint8_t c)	當系統檢測到按鍵（或按鈕）事件時，將調用此處理程序。
virtual void handlePendingScreenTransition()	當更改屏幕事件掛起時，將調用此處理程序。
virtual void handleTickEvent()	生成系統滴答事件後將調用此處理程序。（該事件代表着屏幕每刷新一次 則會調用一次該處理程序）

UIEventListener類在我們創建窗口界面時該類已經繼承過來了，實際上在view類中並沒有這些方法的實現，所以需要自己根據需要實現方法。
之後會給大家展示例子。

如意控件

上面介紹了界面事件類，現在介紹修改控件的方法以及如何自定義控件，在正常的開發中，TouchGFX Designer提供的控件經常滿足不了我們的需求，此時就需要動態的修改控件，或者自己定義控件。首先先介紹動態的修改控件。
還記得第二章講到的Base類嗎，其中有個add（）函數，該函數的作用是在窗口上添加一個控件，這就是修改的一種，除此之外，還可以使用控件自身的屬性進行更改，例如換圖片，移動，漸變，更改文字，具體的需要根據控件的API進行開發。但是需要注意的是控件更改後爲了保證可以及時刷新，需要使用invalidate()函數。

Container

Container容器，容器這個控件可以說在TouchGFX裏使用量最大的控件，容器可以理解爲一個透明的窗口，可以將其他控件放到容器裏，再將容器作爲單獨控件放到窗口中，由此可以實現多個界面切換，或者也可以在容器中添加動畫，或者事件監聽。
添加位置：
可以在TouchGFX Designer的“容器”小部件組中找到“容器”。
您可以在用戶代碼中使用這些函數以及Container類中可用的其他函數。container1.invalidate()如果更改小部件的外觀，請記住要通過調用來強制重繪。

重載容器

該方法是將容器重載，在容器中創建自己了的邏輯，並且將子控件加入容器之中，針對自己的需要編寫對外的接口。
下面看一個例子。

#ifndef SLIDEMENU_CONTAINER_HPP
#define SLIDEMENU_CONTAINER_HPP

#include <touchgfx/containers/Container.hpp>
#include <touchgfx/widgets/Image.hpp>
#include <touchgfx/containers/ListLayout.hpp>

using namespace touchgfx;

class SlideMenuContainer : public touchgfx::Container 繼承容器
{
public:
	SlideMenuContainer();
	virtual ~SlideMenuContainer();
	將事件添加到容器中，這部分的事件上述提到了
	virtual void handleTickEvent();
	virtual void handleClickEvent(const touchgfx::ClickEvent& evt);
	virtual void handleDragEvent(const touchgfx::DragEvent& evt);
	virtual void handleGestureEvent(const touchgfx::GestureEvent& evt);

	
	uint8_t getSelectedScreen()
	{
		return currentState;
	}
	對外設置回調函數的接口
	void setMenuChangeEndedCallback(touchgfx::GenericCallback<const SlideMenuContainer&>& callback)
	{
		menuChangeAction = &callback;
	}
private:
	enum States
	{
		ANIMATE_COLLAPSE,
		ANIMATE_SHOW,
		NO_ANIMATION
	} currentState;

	GenericCallback<const SlideMenuContainer&>* menuChangeAction;

};

接下來看一下cpp文件

#include <gui/common/SlideMenuContainer.hpp>
#include <touchgfx/EasingEquations.hpp>
#include "BitmapDatabase.hpp"
#include <touchgfx/Color.hpp>

using namespace touchgfx;

SlideMenuContainer::SlideMenuContainer():
	currentState(NO_ANIMATION),
	menuChangeAction(0)
{
	touchgfx::Application::getInstance()->registerTimerWidget(this);
	setTouchable(true);

}

SlideMenuContainer::~SlideMenuContainer()
{
	touchgfx::Application::getInstance()->unregisterTimerWidget(this);
}

void SlideMenuContainer::handleTickEvent()
{
}
void SlideMenuContainer::handleClickEvent(const ClickEvent& evt)
{

}
void SlideMenuContainer::handleDragEvent(const DragEvent& evt)
{
	//touchgfx_printf("SlideMenuContainer->getDeltaX :%d   \r\n", evt.getDeltaX());
	
}
手勢響應函數，上滑收起下滑彈出
void SlideMenuContainer::handleGestureEvent(const GestureEvent& evt)
{
	if (evt.getType() == evt.SWIPE_VERTICAL)
	{
		//touchgfx_printf("SlideMenuContainer->handleGestureEvent   \r\n");
		if (evt.getVelocity() < 0)
		{
			currentState = ANIMATE_COLLAPSE;
			if (menuChangeAction && menuChangeAction->isValid())
			{
				menuChangeAction->execute(*this);
			}

		}
		else if (evt.getVelocity() > 0)
		{
			currentState = ANIMATE_SHOW;
			if (menuChangeAction && menuChangeAction->isValid())
			{
				menuChangeAction->execute(*this);
			}
		}
	}
}

自定義控件

除了之上的兩種方法，如果需要更爲具體的定義控件，或者想要節省空間可以選擇自定義控件的方法。
TouchGFX Designer當前不支持自定義窗口小部件的創建。因此，您將需要手動編寫自定義小部件的代碼，然後將小部件插入View的用戶代碼部分。
您可以通過擴展Widget類來創建自己的自定義窗口小部件。這樣做需要在用戶方面付出更多的努力，但也將完全控制小部件繪製的所有像素。您的自定義窗口小部件不一定使用任何現有的窗口小部件，而是通過指定像素的顏色來定義應如何繪製。自定義窗口小部件方法通常還將具有較小的內存佔用空間，這在某些情況下非常重要。

#ifndef QR_CODE_WIDGET_HPP
#define QR_CODE_WIDGET_HPP

#include <touchgfx/widgets/Widget.hpp>
以這種方法重載widget窗口，但是如果不是有特殊需要的話還是建議用容器去做。
class QRCodeWidget : public touchgfx::Widget
{
public:
    QRCodeWidget();

    virtual void draw(const touchgfx::Rect& invalidatedArea) const;
    virtual touchgfx::Rect getSolidRect() const;

    void setQRCodeData(QRCodeData* data);
    void setScale(uint8_t s);

private:
    void updateSize();

    QRCodeData* data;
    uint8_t scale;
};
#endif

具體類中的繼承和重載請參照官方的API文檔。

圖片等資源放置位置

好了說了這麼多也可以大致的製作界面了，但是界面在開發過程中需要放入一些圖片資源或者字庫資源，這些地方放在TouchGFX\assets中，進入後可以看見放入資源的文件夾，但是注意圖片格式爲png。


到這裏大體的框架都給大家介紹完畢了，之後會給大家介紹幾個細節性的控件。