Headers and footers

What if your design has a navigation bar, or even just a status bar, that you don’t want to have to add to all the artboards?

You can make it the FlowComponent’s ‘sticky’ header, like this:

flow.header = navBar

The navBar, in this case, will stick to the top of the FlowComponent, on all the screens.

And there’s also a footer, for when you have a toolbar, tab bar, or anything else that should appear at the bottom of every screen.

flow.footer = tabBar

Difference between static and scrollable screens

When you showNext() to a static screen (by which I mean: not scrollable), the screen will be placed underneath the header and footer, like if they weren’t there.

But scrollable screens will automatically get content inset so that the screen appears between the header and footer.

See this next prototype’s artboards in Design:

I had to leave room for the header on the “static screen” artboard, but not on the “scrollable screen” artboard next to it.

How to temporarily hide a header or footer

It took some time to figure this one out.

At first, I thought that you could temporarily hide a header by changing its visibility, like this:

flow.header.visible = no

… but this will result in a gap above the scrollable content because the FlowComponent doesn’t know that the header disappeared.

The solution: What seems to work for temporarily hiding a header (or footer) is to set its height to zero.

Obviously, you do this before the showNext() to another screen, so that the FlowComponent knows it and can take the new height into account.

# 4th tab: Scrollable screen without header
button_no_navbar.onTap ->
    # Give the header zero height
    flow.header.height = 0
    # Transition to the artboard (without animation)
    flow.showNext screen_without_navbar,
         animate: no

This is the same prototype as the former example.

The fourth tab doesn’t have a navigation bar because I’ve set the height of flow.header to 0 just before the showNext().

By the way, the status bar remains visible on that screen. It’s a child of the navigation bar, but it’s set to not resize together with its parent.

Of course, with this hack, you have to set the header to its original height again when moving to a different screen.

I saved the header’s height in an initial_height property at the beginning of the project …

# Save the header’s original height
flow.header.initial_height = flow.header.height

… which I used to reset the height when transitioning to any other screen:

# 1st tab: Home screen
button_home.onTap ->
    # Reset the header to its original height
    flow.header.height = flow.header.initial_height

Automatic headers and footers from Design artboards

When you showNext() to a screen created in Design, you’ll automatically get fixed headers and footers, if these conditions are met:

• The artboard is longer than the FlowComponent is high (makes sense, because otherwise, the content will not even be scrollable)
• The header and/or footer are anchored to the top or bottom of the artboard

But anchoring happens automatically anyway. You’ll notice that when you place something at the top of an artboard, like a navigation bar, it will by default anchor to the top of the screen.

These automatic headers and footers will be inserted even when your FlowComponent already has a manually set header and/or footer.

Take the following example project. It has statusBar as a fixed header and tabBar as a fixed footer.

# Fixed statusBar
flow.header = statusBar
# Fixed footer
flow.footer = tabBar

The project’s second screen, ‘screen B’, is higher and has a navigation bar and a footer that are both anchored.

So when we showNext() to screenB …

today.onTap ->
    flow.showNext screenB

… a new header (the navigation bar with back arrow) will be fixed underneath the current one (the status bar).

And we’ll also have a second footer. The transparent layer that contains the FAB (Floating Action Button) will be placed underneath the tab bar.

One tweak was necessary, though: the scrollable content will be placed between the header and footer. Our footer is transparent, so I adjusted the height of scroll to have the content also appear under the FAB.

I did this by just adding the Footer’s height again.

# Adding the Footer’s height
flow.scroll.height += Footer.height

(Note the difference. With the usual automatic scrolling the ScrollComponent will get content inset for headers and footers, but in this case, the height of the ScrollComponent itself is set to the available space.)