Introduction
This tutorial cover how to create a layout for a navigation which adapt to multiple screen sizes.
Use Horizontal Menu
EachScape allows you to publish your own component for later use.
In this Tutorial we use a component from the Published Component section of the Studio.
This component is a Layout, this is the 'Horizontal Menu' Layout.
Go to the Published Component section and drag & drop that Layout in your app - drop it on a Canvas Layout -
Here is a screenshot of the 'Horizontal Menu' showing in Published Component :
Drag & drop that Horizontal Menu layout into one of your view.
When you drop that component in your view it has an initial position and size that you can edit in Size & Position.
Description
Horizontal Menu extends to its edges.
In this example to the side of the view as we set the edge constraints to 0 on both left and right side of our view.
It is made of an Horizontal Stack Layout.
It uses simple Text Block to list the menu items. You edit them by changing the text in the Blocks.
Now, the spaces in between these respective Text Block will extend to fill the remaining space whatever the width of the menu. That way your Menu items will always be evenly horizontally distributed
Here is the trick:
To achieve this we use a Stack for which the direction is set to 'Horizontal'.
We did not set it to scrollable - we do not want the menu to scroll horizontally - but you might want to change this if your menu is long.
Length & Setting
Now, inside the stack, we use different 'Length & Setting'.
For the Text Block we use a Fixed size.
We arbitrarily choose 80 pixel width (choose the size you like)
However the in between 'Empty' Block is set to 'Fill reminder'
Fill reminder is really powerful.
It will use whatever space is left and divide that amount of space by the block set to this setting.
In our case, we have 4 empty blocks used a 'filler'.
Therefore Fill reminder divides the reminding space by 4 and allocate it to these blocks.
That way the Text block are evenly distributed across the space.
Now you know how to create any sort of Menu or Distribute Buttons / Images across a screen.
This tutorial shows how it's done for an horizontal menu, just switch the stack setting to vertical to have it vertical.
Learn More