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
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
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.
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
0 just before the
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
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.)