Designing the header for a single screen application is fine but when having many screens application is a bit time consuming.
To make things more productive and have a much uniform work it is better to use components.
Let’s demonstrate it by creating a simple header and using it in application with two screens.
Here we have a simple component with a rectangle blue set to match the components parameters, a label as the header main text and a home icon.
Just for demonstration purposes we will add three properties one for a behavior one for the components main text and the other one for the visibility of the home icon.
Set the visibility of the icon to the HomeLogoVisible property, the text of the header component to the screen name property and the on select of the icon call the OnHomeSelect property.
Now all we will have to do is add this component on every screen and set up the properties to the corresponding screen.
For the Home Screen Component se the properties like this:
OnHomeSelect: false //do nothing on icon select
ScreenName: “Home Screen” // set the text on the component to home screen
HomeLogoVisible: false //the home icon will be invisible
And the header should look like this:
for the main screen component set the properties like this:
OnHomeScreenSelect: Navigate(homescreen) //this comand will navigate the user to the home screen whenever he clicks on the icon
ScreenName: “Main Screen” // set the text on the component to main screen
HomeLogoVisible: true //the icon will be visible
And the header should look like this:
Every time we add a new screen on the application, we simply need to do the same things as for the second screen and that way we have a uniform header for every screen.