Welcome, Guest Login

Support Center

Size and Position

Last Updated: Aug 08, 2017 02:14PM EDT

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
As you can see the image always keeps the same size size.
It's always positioned 50 points from the LEFT, 40 points from the Top.

Adaptive Size:

In this example, we use Edge Constraint to enable Adaptive Positioning

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
Component will be extended or compressed based on the distance from the side of the Canvas Layout

Edge Contraint

A constraint on a given edge, if specified, anchors the edge of the child to the corresponding edge of the container. 
  • 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.
Center Blocks
  • 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 more system variable in System Value 
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



While the block implements constraints between the container and the children, the are no constraints BETWEEN the children.  

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.


Learn More

- Using System like device portrait height for Adaptive UI
- Create Scrolling Patterns
- Formatters
Using The Canvas Layout

Help us improve! Rate this article:

Yes I found this article helpful

Ask a Question   

seconds ago
a minute ago
minutes ago
an hour ago
hours ago
a day ago
days ago
Invalid characters found