How to use the TabNavigator component

The TabNavigator class supports navigation between views using a TabBar component to select the current view.

Navigation can be enhanced with animation, called a transition. Feathers UI provides a number of animated transitions out of the box, and a simple API allows anyone to create custom transitions.

The Basics

Start by creating a TabNavigator, and add it to the display list.

var navigator = new TabNavigator();
addChild(navigator);

Data provider

A view can be a Feathers UI component or any OpenFL display object. The following example creates a simple view with a label.

class HomeView extends LayoutGroup {
    public function new() {
        super();

        var message = new Label();
        message.text = "Hello World";
        addChild(message);
    }
}

To add a new view that the navigator can show, create one or more TabItem objects and add them to a collection:

navigator.dataProvider = new ArrayCollection([
    TabItem.withClass("Home", HomeView),
    TabItem.withClass("Profile", ProfileView),
    TabItem.withClass("Settings", SettingsView)
]);

The first argument passed to TabItem.withClass() is the text to be displayed on the tab. The second argument is the HomeView class from earlier. The navigator will automatically create an instance of this class when the view needs to be shown.

The TabItem class defines three static functions for creating items.

  • withClass() accepts any subclass of DisplayObject. Each time that the view is shown, a new instance of the class will be instantiated.
  • withFunction() accepts a function that returns a display object. Each time that the view is shown, this function will be called. Using a function can be useful for adding children to a view or setting its properties before showing it in the navigator.
  • withDisplayObject() accepts an already-instantiated display object. When the view is shown, the same instance will always be reused. This one can allocate a lot of memory if overused, so be careful!

To show the view at a specific index in the data provider, set the navigator's selectedIndex property

navigator.selectedIndex = 2;

Alternatively, pass one of the TabItem instances from the collection to the selectedItem property.

navigator.selectedItem = navigator.dataProvider.get(2);