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

 

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


 

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