Welcome, Guest Login

Support Center

Size and Position

Last Updated: Apr 06, 2017 10:08AM 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


Fixed size, fixed coordinates
 


In this example, on the Canvas, we positioned our image:
  • 50 pixels from the LEFT of the View
  • 40 pixels from the TOP of our View

We then fix our image size to:
  • 250 pixels Width
  • 300 pixels 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 from the LEFT and 40 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 from the LEFT, 40 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 pixels from the LEFT 
  • 50 pixels from the RIGHT
  • 40 pixels from the TOP
  • 300 pixels 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


 

Note

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   

support@eachscape.com
http://assets0.desk.com/
false
eachscape
Loading
seconds ago
a minute ago
minutes ago
an hour ago
hours ago
a day ago
days ago
about
false
Invalid characters found
/customer/en/portal/articles/autocomplete