Add Header, Footer, Body, Navigation and Pages to the Canvas workspace area.
Current Hierarchy
Under the “bg” component, add a new Empty GameObject, name it “top”. Notice the “top” object is now a child of the “bg”. This will serve as a placeholder for the top bar area.
With the “top” component selected, go to the Rect Transform, select Alt + Top and Stretch-Top. It should look like this:
Next, add an Image component as a child element of the “top”, change the color.
The hierarchy should now look like this:
Next, go back to the Simulator to test. Make sure the objects scales to different devices and rotates properly as well.
Confirm the top flex’s properly: Select Simulator, iPad 12.9, Landscape Mode
Now switch back to portrait mode on iPhone. Add in the footer.
To do this, right click on “bg” select Create Empty GameObject. Rename it “footer”. Using the Rect Transform, select Alt + Bottom, Stretch.
Now add the background: add an Image as a child of the “footer”. Stretch it: In Rect Transform select Alt + Stretch/Stretch. Change the color.
Here is the result:
Next, we will add a body area that will be common to all pages.
Add an Empty GameObject as child of “bg”, rename it “body”. Align it in Rect Transform: Select Alt + Stretch/Stretch. Note that it will go to the far extents/edges. We only want it to cover the center area of the body, not go past the header or footer:
So to fix this, using the rect tool, drag the blue dots until they encapsulate the area between the header and footer, they will snap in place:
In the next section we will create the Canvas Pages and show how to flip through them using the footer navigation.
