TouchGFX使用教程（四）

之前給大家介紹了TouchGFX整體的使用方法，這裏我會通過事件界面及動態效果三個方向給大家演示並講解一個例子。接下來會給大家做個iphone的下滑設置欄。
其中使用到的功能包括自定義窗口，下拉菜單，菜單頁，滑動監控。
請先看演示。

由於錄製軟件的原因信號欄有點閃，效果還是可行的。

下拉菜單

首先需要看一下控件的組成。需要一個主窗口以及背景窗口。除此之外還需要一個自定義的容器控件，即下拉菜單頁。在自定義章節會給大家介紹自定義控件的使用。

下拉菜單，主要的過程是滑動事件，還記的Container類嗎，該類可以作爲承載下拉菜單及主窗口顯示的容器，通過重載該類，獲取滑動事件，這樣就可以獲得想要的滑動了。
現在看一下代碼。

#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 該類繼承了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);
			}
		}
	}
}

好了如此寫就定義好了一個自定義的容器，再將放在窗口中的控件拿出放入該容器中就可以實現監聽滑動事件了。

自定義窗口

在設計軟件中選擇自定義容器窗口，在這裏創建一個自己的頁面，之後編輯自己的菜單頁，將需要的控件放入其中，當然這個給個建議，對於模塊話的控件最好以功能性的需要將控件放入容器中，這樣可以根據需要設置容器即可。

當開發完成後將子頁面放在主窗口的上方，這樣保證菜單頁是隱藏在外面的下滑時逐漸移動下來。如圖所示。

這裏需要注意我勾選了MoveAnimator選項，這樣移動時纔有移動動畫。

高仿IPhone

好了到這裏將要開發主頁面的邏輯了。
同樣先看.h文件。

#ifndef MAINWINDOWVIEW_HPP
#define MAINWINDOWVIEW_HPP

#include <gui_generated/mainwindow_screen/MainWindowViewBase.hpp>
#include <gui/mainwindow_screen/MainWindowPresenter.hpp>
#include <gui/common/SlideMenuContainer.hpp>

class MainWindowView : public MainWindowViewBase
{
public:
    MainWindowView();
    這裏我沒有在設計時添加按鈕邏輯
    virtual ~MainWindowView() {}
    virtual void setupScreen();
    virtual void tearDownScreen();
    
protected:
    SlideMenuContainer m_slideWindow; 定義一個我們之前寫好的滑動窗口
    Callback<MainWindowView, const SlideMenuContainer&> SliderCallback; 滑動窗口使用的回調
    void SliderHandler(const SlideMenuContainer& sc);
};

#endif // MAINWINDOWVIEW_HPP

再看cpp文件

#include <gui/mainwindow_screen/MainWindowView.hpp>

MainWindowView::MainWindowView():
    SliderCallback(this,&MainWindowView::SliderHandler)
{

}

void MainWindowView::setupScreen()
{
在窗口初始化時將窗口中的控件移除，再將移除的控件放到m_slideWindow中，再將m_slideWindow放入窗口
    MainWindowViewBase::setupScreen();
    remove(sliderWindow1);
    remove(Background);
    m_slideWindow.setPosition(0,0,
        Background.getWidth(),
        Background.getHeight());
    m_slideWindow.setMenuChangeEndedCallback(SliderCallback);
    
    m_slideWindow.add(Background);
    m_slideWindow.add(sliderWindow1);
    add(m_slideWindow);
}

void MainWindowView::tearDownScreen()
{
    MainWindowViewBase::tearDownScreen();
}

void MainWindowView::SliderHandler(const SlideMenuContainer& sc)
{
    //touchgfx_printf("RUN!!!\r\n");
    這裏判斷當前設置欄的位置，是否是顯示的。
    const int endPosition=sliderWindow1.getY() >= 0 ? -800 : 0; 
    這裏處理上滑或者下滑
    if (m_slideWindow.getSelectedScreen() == 1)
    {
    	滑動時調用startMoveAnimation，這裏要和大家加一個點EasingEquations是一個緩動函數，可以根據需要去平滑動畫的運動軌跡，具體的介紹我會在下方放入鏈接。
        sliderWindow1.startMoveAnimation(sliderWindow1.getX(), endPosition,
            20,
            EasingEquations::cubicEaseInOut,
            EasingEquations::cubicEaseInOut);
    }
    else if (m_slideWindow.getSelectedScreen() == 0)
    {
        sliderWindow1.startMoveAnimation(sliderWindow1.getX(), endPosition,
            20,
            EasingEquations::cubicEaseInOut,
            EasingEquations::cubicEaseInOut);
    }
}

菜單頁

除此之外，官方還提供了自帶的菜單頁，但是提供的菜單頁是點擊事件才能實現的，當然也可以按照我們的方法將自定義容器與菜單控件結合使用。這裏就看大家的發揮了。
如果需要的話可以看官方的demo。demo名字叫SlideMenu example，需要的話大家可以看看這個demo。

滑動窗口

好了，講到這裏主要的都講到了，除了這種下滑外，我們可以發散下思維，製作多個窗口，也可以做到橫滑的開發，這樣是不是就能達到想要的效果了呢。

緩動函數的鏈接