VIDEO: The basics of laying out Blocks in a View or Layer with the EachScape Studio. Using Size and Position and also the basics of "Device Available Width" and "Device Available Height"
Position Blocks on a Canvas Layout.
If you don't know how to access the 'Size & Position' on a Canvas review this section.
Size & Position: Adaptive Coordinate
EachScape Size & Position lets you easily switch between different ways to position your Blocks across multiple screens.
In this Tutorial we review of example of Block with a fixed size and Block which size is relative to the edges of the screen or containers.
Click here to install the Tutorial App in your workspace
IMPORTANT: Difference Point and Pixels
Exactly like a developer would, for the Canvas Layout, EachScape studio uses a coordinate system in Points.
To complicate the matter, image size are always expressed in Pixels.
Points are an abstract coordinates used in development to position objects on the screens.
EachScape Studio uses Points to position objects on the screens.
The different screen sizes, and more about the Pixel and Points are available in the Tutorial: Working with Images
Fixed size, fixed coordinates
In this example, on the Canvas, we positioned our image:
- 50 points from the LEFT of the View
- 40 points from the TOP of our View
We then fix our image size to:
- 250 points Width
- 300 points Height.
What that means is that no matter what the View size:
- The image size will not change
- The image position we remain at 50 points from the LEFT and 40 points from TOP of our Canvas.
This is a FIXED position, for a FIXED SIZE block.
Rendering on an iPhone
Rendering on an iPad Mini
Instead of having a fixed size for the Block we let the Block change size by setting the size based on the distance from the side of the layout containing the Block.
We positioned the Block:
- 50 points from the LEFT
- 50 points from the RIGHT
- 40 points from the TOP
- 300 points from the BOTTOM
If the Layout changes, the image size will change.
Here is what it will look like on an iPad Mini
You see that the contraints haven't changed, the image size has changed.
This is great when you need the image to adapt to the size of the screen (or Layout)
Great for: Modular Designs
- If a constraint is not specified, that edge is considered freely adjustable depending on the content.
- If all values are zero, the Component will fill the Canvas (container) completely.
- If only one constraint is filled, then it will constraint only in one direction.
- If you leave both left and right blank - or click 'center horizontally ', the Block will be centered horizontally.
- If you leave both top and bottom blank or click the 'center vertically', the Block will be centered vertically.
Positive or Negative Constraints
- A positive value for a constraint is an "inset" from the container, meaning it indicates an amount of margin between the edge of the child and container respectively.
- If a value is negative, the child edge will be outside the container edge by that amount. (This may be of limited use in some circumstances.
Device Height & Width
You can do use the Device Available Height and Device Available Width to calculate specific position on a Canvas. More on Device Height and Width.
You can add, subtract, multiply or divide.
Device Heigh and Width are directly accessible through these buttons in Size & Position:
You will find the operators (add, divide, ..) and much more in Formatters
The constraint values can be expressions. This means that they can get the placement constraints from a data source, or potentially use different values depending on the orientation.
Example of system values
Thus, they will overlap if their placement dictates. (This is a feature.) The block are laid out in ascending order, back to front.
This means that if the size and placement of Block #2 would overlap with Block #1, Block #2 would be placed on top of Block #1. You can modify Block Order using Block Layout Order.
- Using System like device portrait height for Adaptive UI
- Create Scrolling Patterns
- Using The Canvas Layout