（2）touchgfx的轮播效果

其他 2019-06-12 21:30:10 阅读次数: 0
版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/ZenNaiHeQiao/article/details/86234076

轮播 “旋转木马”效果
Carousel 小部件的目的是提供一个漂亮的轮播功能，不使用大量的MCU资源。
Carousel 小部件例程中为5个可见元素。但是，如果需要，可改变。
请注意，Carousel小部件使用ExtendedZoomAnimationImage.hpp。此小部件也可以在TouchGFX Open Widget Repository中找到。此文件包含在Carousel.hpp文件中，并使用路径gui / common / ExtendedZoomAnimationImage.hpp。如果将hpp文件放在其他位置，只需更改包含路径即可。
在这里插入图片描述
素材：
链接：https://pan.baidu.com/s/1rJUrUxOsWKR8XIP_24wGoQ
提取码：4quz
第一步：设置背景
在这里插入图片描述

第二步：
查看Defines.hpp 中包含的enum类型

class Defines
{
public:
    enum MainMenuType
    {
        ANIMATING_BUTTONS_MENU = 0,
        CAROUSEL_MENU,
        NO_MENU
    };

    enum DemoID
    {
        GAME2048 = 0,
        GAME2D,
        CONTROLS,
        HOME_AUTOMATION,
        SETTINGS,
        NUMBER_OF_DEMO_SCREENS,
        NO_DEMO_SCREEN
    };
};

增加公用资源

Model.hpp

#include <gui/common/Defines.hpp>
...
public:
...
	Defines::DemoID getSelectedDemoScreen()
	{
		return selectedDemoScreen;
	}
	void setSelectedDemoScreen(Defines::DemoID demoId)
	{
		selectedDemoScreen = demoId;
	}
...
protected:
...
	Defines::DemoID selectedDemoScreen;

MainMenuCarouselPresenter引用 上面的函数：

MainMenuCarouselPresenter.hpp

#include <gui/model/ModelListener.hpp>
...
public:
...
	void setSelectedDemoScreen(Defines::DemoID demoId);
	Defines::DemoID getSelectedDemoScreen();

MainMenuCarouselPresenter.cpp

...
Defines::DemoID MainMenuCarouselPresenter::getSelectedDemoScreen()
{
	return model->getSelectedDemoScreen();
}

void MainMenuCarouselPresenter::setSelectedDemoScreen(Defines::DemoID elementIndex)
{
	model->setSelectedDemoScreen(elementIndex);
}

在这里插入图片描述

MainMenuCarouselView.hpp

...
#include <touchgfx/widgets/TouchArea.hpp>
#include <texts/TextKeysAndLanguages.hpp>

#include <gui/common/Carousel.hpp>
#include <gui/common/Defines.hpp>
...
public:
...
	virtual void handleClickEvent(const ClickEvent& evt);   //和控件点击相关
	virtual void handleDragEvent(const DragEvent& evt);     //和控件的拖动相关
...
protected:
...
	enum State
	{
		ELEMENT_SELECTED,
		NO_STATE
	};

	State currentState;          //状态

	Carousel carousel;           //轮播组件定义

	Defines::DemoID demoIDs[Defines::NUMBER_OF_DEMO_SCREENS];  
	Defines::DemoID selectedDemoScreen;

	int pauses;                  //停顿
	void setupCarousel();        //建立组件函数
	Callback<MainMenuCarouselView, const Carousel&> carouselAnimationEnded;  //定义回调函数
	void carouselAnimationEndedhandler(const Carousel& c);       //回调函数        
	void setSelectedDemoScreen(Defines::DemoID demoId);         
	void gotoSelectedDemoScreen();


	int16_t dragDistance;
	bool dragInsideCarousel;
	bool dragInsideCenterButton;
	bool hasAnimatedDrag;

MainMenuCarouselView.cpp


#include <gui/mainmenucarousel_screen/MainMenuCarouselView.hpp>
#include <BitmapDatabase.hpp> //调用图片 


MainMenuCarouselView::MainMenuCarouselView():
currentState(NO_STATE),   
carouselAnimationEnded(this, &MainMenuCarouselView::carouselAnimationEndedhandler),
dragDistance(0),
dragInsideCarousel(false),
dragInsideCenterButton(false),
hasAnimatedDrag(false)
{

}


void MainMenuCarouselView::setupScreen()
{
	setupCarousel();
	add(carousel);
}

void MainMenuCarouselView::tearDownScreen()
{
    MainMenuCarouselViewBase::tearDownScreen();
}




void MainMenuCarouselView::handleClickEvent(const ClickEvent& evt)
{

	if (evt.getType() == ClickEvent::PRESSED)
	{
		dragDistance = 0;
		hasAnimatedDrag = false;
		dragInsideCarousel = carousel.getAbsoluteRect().intersect(evt.getX(), evt.getY());
		dragInsideCenterButton = Rect(carousel.getX() + ((carousel.getWidth() - 150) / 2), carousel.getY() + ((carousel.getHeight() - 150) / 2), 150, 150).intersect(evt.getX(), evt.getY());
	}
	else if (evt.getType() == ClickEvent::RELEASED)
	{
		if (dragInsideCarousel && !hasAnimatedDrag)
		{
			if (dragInsideCenterButton)
			{
				currentState = ELEMENT_SELECTED;
				pauses = 4;
				carousel.highlightSelectedElement();
			}
			else if (evt.getX() < carousel.getX() + carousel.getWidth() / 2)
			{
				carousel.selectedPrevious();
			}
			else
			{
				carousel.selectedNext();
			}
		}
	}

	View::handleClickEvent(evt);
}




void MainMenuCarouselView::handleDragEvent(const DragEvent& evt)
{

	View::handleDragEvent(evt);

	if (dragInsideCarousel)
	{
		dragDistance += evt.getDeltaX();

		if (abs(dragDistance) > 30)
		{
			dragDistance = 0;
			hasAnimatedDrag = true;
			if (abs(evt.getDeltaX()) > 0)
			{
				if (evt.getDeltaX() < 0)
				{
					carousel.selectedNext();
				}
				else
				{
					carousel.selectedPrevious();
				}
			}
		}
	}

}






//建立画面
void MainMenuCarouselView::setupCarousel()
{
	carousel.setPosition(162, 192, 470, 180);
	carousel.setCarouselAnimationEndedCallback(carouselAnimationEnded);  //回调函数 ，用于轮播动画结束

	// The y position difference between the images          
	uint16_t yDiff = 4;  //基准y值高度

	// 首先计算出图片的宽度
	uint16_t widthOfSmallElements = Bitmap(BITMAP_CAROUSEL_MENU_ICONS_2048_SMALL_ID).getWidth();
	uint16_t widthOfMediumElements = Bitmap(BITMAP_CAROUSEL_MENU_ICONS_2048_MEDIUM_ID).getWidth();
	uint16_t widthOfLargeElements = Bitmap(BITMAP_CAROUSEL_MENU_ICONS_2048_LARGE_ID).getWidth();
	uint16_t widthOfInvisibleElements = widthOfSmallElements - 30;
	// 其次计算出图片的高度
	uint16_t heightOfSmallElements = Bitmap(BITMAP_CAROUSEL_MENU_ICONS_2048_SMALL_ID).getHeight();
	uint16_t heightOfMediumElements = Bitmap(BITMAP_CAROUSEL_MENU_ICONS_2048_MEDIUM_ID).getHeight();
	uint16_t heightOfLargeElements = Bitmap(BITMAP_CAROUSEL_MENU_ICONS_2048_LARGE_ID).getHeight();
	uint16_t heightOfInvisibleElements = heightOfSmallElements - 30;

	uint16_t offsetWidthForInvisibleEndElements = 20;
	uint16_t visibleWidthOfSmallElements = 50;
	uint16_t visibleWidthOfMediumElements = 80;
	carousel.setPositionOfCarouselElement(0, 0,
		(3 * yDiff), widthOfInvisibleElements, heightOfInvisibleElements);

	carousel.setPositionOfCarouselElement(1, offsetWidthForInvisibleEndElements,
		(2 * yDiff), widthOfSmallElements, heightOfSmallElements);

	carousel.setPositionOfCarouselElement(2, carousel.getXPositionOfVisibleElement(1) + visibleWidthOfSmallElements,
		yDiff + 4, widthOfMediumElements, heightOfMediumElements);

	carousel.setPositionOfCarouselElement(3, carousel.getXPositionOfVisibleElement(2) + visibleWidthOfMediumElements,
		0, widthOfLargeElements, heightOfLargeElements);

	carousel.setPositionOfCarouselElement(4, carousel.getXPositionOfVisibleElement(3) + widthOfLargeElements - widthOfMediumElements + visibleWidthOfMediumElements,
		yDiff + 4, widthOfMediumElements, heightOfMediumElements);

	carousel.setPositionOfCarouselElement(5, carousel.getXPositionOfVisibleElement(4) + widthOfMediumElements - widthOfSmallElements + visibleWidthOfSmallElements,
		(2 * yDiff), widthOfSmallElements, heightOfSmallElements);

	carousel.setPositionOfCarouselElement(6, carousel.getXPositionOfVisibleElement(5) + offsetWidthForInvisibleEndElements + 20,
		(3 * yDiff), widthOfInvisibleElements, heightOfInvisibleElements);

	carousel.addElement(Bitmap(BITMAP_CAROUSEL_MENU_ICONS_2048_SMALL_ID), Bitmap(BITMAP_CAROUSEL_MENU_ICONS_2048_MEDIUM_ID), Bitmap(BITMAP_CAROUSEL_MENU_ICONS_2048_LARGE_ID));
	carousel.addElement(Bitmap(BITMAP_CAROUSEL_MENU_ICONS_CONTROLS_SMALL_ID), Bitmap(BITMAP_CAROUSEL_MENU_ICONS_CONTROLS_MEDIUM_ID), Bitmap(BITMAP_CAROUSEL_MENU_ICONS_CONTROLS_LARGE_ID));
	carousel.addElement(Bitmap(BITMAP_CAROUSEL_MENU_ICONS_GAME_2D_SMALL_ID), Bitmap(BITMAP_CAROUSEL_MENU_ICONS_GAME_2D_MEDIUM_ID), Bitmap(BITMAP_CAROUSEL_MENU_ICONS_GAME_2D_LARGE_ID));
	carousel.addElement(Bitmap(BITMAP_CAROUSEL_MENU_ICONS_HOME_AUTOMATION_SMALL_ID), Bitmap(BITMAP_CAROUSEL_MENU_ICONS_HOME_AUTOMATION_MEDIUM_ID), Bitmap(BITMAP_CAROUSEL_MENU_ICONS_HOME_AUTOMATION_LARGE_ID));
	carousel.addElement(Bitmap(BITMAP_CAROUSEL_MENU_ICONS_SETTINGS_SMALL_ID), Bitmap(BITMAP_CAROUSEL_MENU_ICONS_SETTINGS_MEDIUM_ID), Bitmap(BITMAP_CAROUSEL_MENU_ICONS_SETTINGS_LARGE_ID));

	demoIDs[0] = Defines::GAME2048;  //ID 数组
	//headlines[0] = T_CAROUSEL_GAME_2048_HEADLINE;
	//texts[0] = T_CAROUSEL_GAME_2048_TEXT;

	demoIDs[1] = Defines::CONTROLS;
	//headlines[1] = T_CAROUSEL_CONTROLS_HEADLINE;
	//texts[1] = T_CAROUSEL_CONTROLS_TEXT;

	demoIDs[2] = Defines::GAME2D;
	//headlines[2] = T_CAROUSEL_GAME_2D_HEADLINE;
	//texts[2] = T_CAROUSEL_GAME_2D_TEXT;

	demoIDs[3] = Defines::HOME_AUTOMATION;
	//headlines[3] = T_CAROUSEL_HOME_AUTOMATION_HEADLINE;
	//texts[3] = T_CAROUSEL_HOME_AUTOMATION_TEXT;

	demoIDs[4] = Defines::SETTINGS;
	//headlines[4] = T_CAROUSEL_SETTINGS_HEADLINE;
	//texts[4] = T_CAROUSEL_SETTINGS_TEXT;

	// Set the carousel to the element that was selected last
	for (int i = 0; i < Defines::NUMBER_OF_DEMO_SCREENS; i++)
	{
		// Map demoId to position in carousel
		if (demoIDs[i] == presenter->getSelectedDemoScreen())
		{
			carousel.setSelectedElement(i);
		}
	}

}

//回调函数用于 页面跳转


void MainMenuCarouselView::carouselAnimationEndedhandler(const Carousel& c)
{

	if (currentState == ELEMENT_SELECTED)
	{
		if (pauses-- > 0)
		{
			//Pauses implemented by just re initiating some highlight requests
			carousel.highlightSelectedElement();
		}
		else
		{
			setSelectedDemoScreen(demoIDs[carousel.getSelectedElementIndex()]);
			gotoSelectedDemoScreen();
		}
	}
	else
	{
		// Carousel moved to previous or next element
        // pdateDemoText();
	}


}


void MainMenuCarouselView::setSelectedDemoScreen(Defines::DemoID demoId)
{

	selectedDemoScreen = demoId;

}

void MainMenuCarouselView::gotoSelectedDemoScreen()
{

	presenter->setSelectedDemoScreen(selectedDemoScreen);

	switch (selectedDemoScreen)
	{
	case Defines::GAME2048:
		//static_cast<FrontendApplication*>(Application::getInstance())->gotoGame2048ScreenNoTransition();
		break;
	case Defines::GAME2D:
		//static_cast<FrontendApplication*>(Application::getInstance())->gotoGame2DScreenNoTransition();
		break;
	case Defines::CONTROLS:
		//static_cast<FrontendApplication*>(Application::getInstance())->gotoControlsScreenNoTransition();
		break;
	case Defines::HOME_AUTOMATION:
		//static_cast<FrontendApplication*>(Application::getInstance())->gotoHomeAutomationScreenNoTransition();
		break;
	case Defines::SETTINGS:
		//static_cast<FrontendApplication*>(Application::getInstance())->gotoSettingsScreenNoTransition();
		break;
	case Defines::NUMBER_OF_DEMO_SCREENS:

	case Defines::NO_DEMO_SCREEN:
	default:
		break;
	}

}

在这里插入图片描述

实现：
控件的轮播效果，以及点击选择。
链接：https://pan.baidu.com/s/1O8-EDeoFq4UT1VeQTGnuUg
提取码：iozw

猜你喜欢

转载自blog.csdn.net/ZenNaiHeQiao/article/details/86234076
今日推荐
面壁智能发布 Eurux-8x22B 开源大模型 —— 堪称「理科状元」
开源日报 | 谷歌扶持鸿蒙上位；开源Rabbit R1；Docker加持的安卓手机；微软的焦虑和野心；海尔电器把开放平台关了
中国码农的“35岁魔咒”
蘭雅 CorelDRAW 插件 2024.5.1 国际劳动节版，免费下载
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
周排行
OOP第二次作业
java web 乱码问题
android 禁止scrollview 因控件变化自动滚动到底的方法
mysql服务解压版的安装(5.7)
centos7 nginx+tomcat配置https 安装免费SSL Let’s Encrypt
使用Mosquitto遗嘱机制实现感知客户端上下线功能的方法
面向对象之------多态与多态性
开发Teams Tabs应用程序
C# 希尔排序
第2章 Jupyter Notebooks
每日归档
更多
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)
2024-04-27(56)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022