Screen & Canvas
The Screen, the unit of a screen, and the design space
2 min read
A Screen is a single screen shown to the user, and it is the basic unit of design in Layerz. An app is made up of several Screens; you design each Screen independently and then connect them to complete a single app.
Creating a Screen
Create a new Screen from the add menu in the left panel.
- Add Empty Screen — An empty Screen
- Add List Screen — A Screen with a List already set up
The Screen you create appears in the list in the left panel, and selecting it lets you edit it on the center canvas.
Canvas
The canvas is the space where you design a Screen. You build the screen by dragging and dropping components from the UI Library onto an iPhone-sized Screen. You can move around freely by zooming and scrolling, and you can change the device (iPhone/iPad, landscape/portrait) from the top toolbar.
Navigation Bar Settings
At the very bottom of every Screen is the Screen itself, where you configure the Navigation Bar. Select the Screen and look at the Inspector to configure the following:
- Whether to show the Navigation Bar (it's on by default for new Screens)
- Title Text (if not specified, the Screen's Title is used automatically)
- Whether to show a Large Title
- Appearance — Default / Blurred / Opaque / Transparent
- Tint Color
When you show the Navigation Bar, you can set the menu buttons (Right Items / Left Items) to place on it. For each menu, you can define its appearance and connect an event or create a submenu.
After creating several Screens, connecting them with navigation in an Action Flow or with a Tab Bar lets you build the same flow as a real app.