（2）touchgfx的轮播效果
轮播 “旋转木马”效果
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
...
public:
...
Defines::DemoID getSelectedDemoScreen()
{
return selectedDemoScreen;
}
void setSelectedDemoScreen(Defines::DemoID demoId)
{
selectedDemoScreen = demoId;
}
...
protected:
...
Defines::DemoID selectedDemoScreen;
MainMenuCarouselPresenter引用 上面的函数：
MainMenuCarouselPresenter.hpp
#include
...
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
#include
#include
#include
...
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 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
#include //调用图片
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(Application::getInstance())->gotoGame2048ScreenNoTransition();
break;
case Defines::GAME2D:
//static_cast(Application::getInstance())->gotoGame2DScreenNoTransition();
break;
case Defines::CONTROLS:
//static_cast(Application::getInstance())->gotoControlsScreenNoTransition();
break;
case Defines::HOME_AUTOMATION:
//static_cast(Application::getInstance())->gotoHomeAutomationScreenNoTransition();
break;
case Defines::SETTINGS:
//static_cast(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