AA UX BSMA Lesson 13 - Animating the Search Panel into View From the Top of The Screen

Uploaded on Nov 22, 2014 / 128 views / 190 impressions / 0 comments


More from this user


In the previous lesson we hooked up the event handler for the 'Search' menu choice in the slide-in menu. When the user clicks on the 'Search' menu item in the menu, the Search Panel slides in from the left.
The reason that is slides in from the left is that the Panel that contains the search screen (PANEL_SEARCH) is one of the Panel Cards in the parent Panel Navigator (PANELNAVIGATOR_1), and the 'flow' of this Panel Navigator is set to 'LTR' (left-to-right).
However, in the Demo Mobile Application you will notice that the animation for the Search Panel is different. It shows the Search Panel animating into view from the bottom, not the right.
In this lesson we show how we can wrap the PANEL_CUSTOMERLIST and PANEL_SEARCH panels in their own Panel Navigator, and set the 'flow' direction of this child Panel Navigator to 'bottom-to-top' to achieve the animation effect that we want.
At the end of the lesson, your component won't look any different than it did at the start, but clicking on the 'Search' option in the slide-in menu will display the Search Panel animating in from the bottom of the screen.

NOTE: If you did not complete lesson 12, and want to start with this lesson, you can download the Lesson13_Start component to use as your starting point:



  • No tags