[问答]

如何利用TouchGFX做个iphone的下滑设置栏？

问答对人有帮助，内容完整，我也想知道答案 0 如何利用TouchGFX做个iphone的下滑设置栏？ 0
2021-10-14 08:51:48　　评论淘帖0 邀请回答您可以邀请以下用户，快速回答问题 × heks 该类别下有 50 个回答。邀请回答 hgimtk 该类别下有 44 个回答。邀请回答新星之火12138 该类别下有 42 个回答。邀请回答 wang21cj 该类别下有 41 个回答。邀请回答 chm5 该类别下有 40 个回答。邀请回答 hjfjsdgfjdsf 该类别下有 37 个回答。邀请回答 fdjslkjd 该类别下有 35 个回答。邀请回答 uvysdfydad 该类别下有 35 个回答。邀请回答 werywer 该类别下有 35 个回答。邀请回答 h1654155957.9520 该类别下有 35 个回答。邀请回答 jenny042 该类别下有 34 个回答。邀请回答 dfzvzs 该类别下有 34 个回答。邀请回答维生素B2 该类别下有 34 个回答。邀请回答凤毛麟角该类别下有 34 个回答。邀请回答 hfgdzc 该类别下有 33 个回答。邀请回答 ggfvxv 该类别下有 33 个回答。邀请回答刘洋该类别下有 33 个回答。邀请回答 meihuacg 该类别下有 33 个回答。邀请回答储蓄叛逆该类别下有 32 个回答。邀请回答尼克wo 该类别下有 32 个回答。邀请回答举报刘艳相关推荐 • 用的是stm32h7系列的板子，touchgfx的显示页面有没有向下滑动？ 262 • 如何取消labview WebBrower控件右侧的下滑滚动条显示？ 10278 • 请问鸿蒙Java UI怎么设置全屏，无标题栏和导航栏？ 1933 • 请问如何利用touchGFX Designer 4.13.0实现手环中滚动菜单？ 625 • 工具栏设计！ 3358 • png数据在TouchGFX“运行模拟器”上无法正确显示怎么处理？ 168 • 如何更改TouchGFX中的分辨率？ 379 • CC2540 获得的iphone蓝牙地址一直在变化，请问该怎样才能获得正确且唯一的iphone蓝牙地址？ 2421 • 如何利用touchGFX创建一个新项目？ 178 • 请问TouchGFX如何设置中文字体？ 3196 1个回答

答案对人有帮助，有参考价值 0 之前给大家介绍了TouchGFX整体的使用方法，这里我会通过事件界面及动态效果三个方向给大家演示并讲解一个例子。接下来会给大家做个iphone的下滑设置栏。其中使用到的功能包括自定义窗口，下拉菜单，菜单页，滑动监控。请先看演示。由于录制软件的原因信号栏有点闪，效果还是可行的。下拉菜单首先需要看一下控件的组成。需要一个主窗口以及背景窗口。除此之外还需要一个自定义的容器控件，即下拉菜单页。在自定义章节会给大家介绍自定义控件的使用。下拉菜单，主要的过程是滑动事件，还记的Container类吗，该类可以作为承载下拉菜单及主窗口显示的容器，通过重载该类，获取滑动事件，这样就可以获得想要的滑动了。现在看一下代码。 #ifndef SLIDEMENU_CONTAINER_HPP #define SLIDEMENU_CONTAINER_HPP #include #include #include 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& callback) { menuChangeAction = &callback; } private: enum States状态类型的定义 { ANIMATE_COLLAPSE, ANIMATE_SHOW, NO_ANIMATION } currentState; GenericCallback* menuChangeAction; }; #include #include #include "BitmapDatabase.hpp" #include 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 rn", evt.getDeltaX()); //该拖拽事件，如果需要些特殊操作可以使用该事件 } void SlideMenuContainer::handleGestureEvent(const GestureEvent& evt) { 手势事件只检测上下滑动 if (evt.getType() == evt.SWIPE_VERTICAL) { //touchgfx_printf("SlideMenuContainer->handleGestureEvent rn"); 区分上滑或者下滑 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 #include #include class MainWindowView : public MainWindowViewBase { public: MainWindowView(); 这里我没有在设计时添加按钮逻辑 virtual ~MainWindowView() {} virtual void setupScreen(); virtual void tearDownScreen(); protected: SlideMenuContainer m_slideWindow; 定义一个我们之前写好的滑动窗口 Callback SliderCallback; 滑动窗口使用的回调 void SliderHandler(const SlideMenuContainer& sc); }; #endif // MAINWINDOWVIEW_HPP 再看cpp文件 #include 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!!!rn"); 这里判断当前设置栏的位置，是否是显示的。 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。滑动窗口好了，讲到这里主要的都讲到了，除了这种下滑外，我们可以发散下思维，制作多个窗口，也可以做到横滑的开发，这样是不是就能达到想要的效果了呢。

2021-10-14 15:39:20 评论举报潘福乔