How to use the Feathers
TabNavigator class supports navigation between screens or pages using a
First, let's create a
TabNavigator component and add it to the display list:
You may set its
height, but that's optional because the
TabNavigator will automatically resize itself to fill the entire stage, if you don't provide explicit dimensions.
To add a new screen that the navigator can show, call
addScreen() and pass in an ID string to associate with the screen along with a
This screen's ID is
"newsFeed". We can use use this ID later to programatically show the screen.
The first argument required by the
TabNavigatorItem constructor may be one of three types. We can pass in a
Class to instantiate, a display object that has already been instantiated, or a
Function that returns a display object. In most cases, a
Class is recommended. For more details, see the
The second argument required by the
TabNavigatorItem is the label to display on the tab associated with the screen. In this case, we've set it to
Finally, we can also pass in an icon to be displayed on the tab. However, this is optional, and we've skipped it in the example above.
The active screen changes when the user selects a tab. When the first tab is added to a
TabNavigator, it is automatically selected.
To show a specific screen programatically, we can set the
showScreen(), and pass in the screen's ID. For this example, we'll use the
"newsFeed" string that we registered with
showScreen() method supports an additional arugment that allows a custom animated transition between screens. We'll look at transitions in a moment.
To access the currently visible screen, use the
You can also use
activeScreenID to get the ID of the active screen. In this case, again, it would be
As we learned above, we can change to a new screen in a couple of different ways. The transition between two screens can also be animated, improving the user experience and adding a little bit of life to our games and apps. This animation during navigation is called a transition.
We can find a number of useful transition classes in the
feathers.motion package. One example is the
Fade class, which fades a screen by animating its
Each of the built-in transition classes has one or more static methods that you can call to create a transition function that tab navigator calls when navigating to a different screen. In this case, let's call
We can pass the result to the tab navigator's
In the code above, we didn't pass any arguments to
Fade.createFadeInTransition(). However, this function exposes some optional parameters that we can customize, if desired. For instance, we might want to customize the duration of the animation (in seconds) and the easing function:
Now, the animation will last a little longer while easing in and out.
Events when transitions start and complete
FeathersEventType.TRANSITION_START when a new screen is being shown and the transition animation begins. Similarly, it dispatches
FeathersEventType.TRANSITION_COMPLETE when the transition animation has ended.
Let's listen for
The event listener might look like this:
Optionally, we can pass properties to the screen before it is shown. If we have multiple screens that need to share some data, this is a useful way to ensure that each screen has access to it. For instance, we might have an
OptionsData class that stores things like audio volume and other common options. We'd want to pass that to the
OptionsScreen to let the user change the volume, obviously. We'd also want to pass it to other screens that play audio so that it plays at the correct volume.
When we create the
TabNavigator, let's create an
OptionsData instance too. In a moment, we'll pass it to each screen that needs it.
Now, when we add our
OptionsScreen to the
TabNavigator, we pass it the
OptionsData instance in using the
properties property on the
OptionsScreen, we need to add a variable or a getter and setter named
options to match up with
We want to update the screen when the
options property changes, so we should invalidate the screen, and the
draw() function will be called again: