Layers » Position

Position

The project below shows how position (x, y…) and dimensions (width, height…) work together.

Width, Height, X, Y, and Scale visualized

A layer’s position is always defined from the top left corner of the device screen. A higher x value will move it to the right, and a lower value will move it to the left. Higher values on the y axis will move the layer down.

Negative values are possible and will place the layer to the left (negative x) or above (negative y) the visible screen.

Pro tip: There’s also point. It’s an object that contains both x and y (a bit like size).

You can use it to set both x and y at the same time.

# A layer placed at 20 points of the top left corner
layerA = new Layer
    point: 20

Relative positioning

You can also position layers using their right side, their bottom, or vertical or horizontal middle with these extra properties:

`layer.minX`	The left edge of the layer. (So actually the same as `x`.)
`layer.midX`	The horizontal center of the layer.
`layer.maxX`	The right edge of the layer, equal to `x` + `width`.
`layer.minY`	The top side of the layer. (This is the same as `y`.)
`layer.midY`	The vertical center of the layer.
`layer.maxY`	The bottom edge of the layer, equal to `y` + `height`.

These properties can be used to position layers in relation to one another. They’ll come in handy when creating prototypes that should respond to device or orientation changes.

You could, for instance, have layerB always be 20 points to the right of layerA:

layerA = new Layer
layerB = new Layer
    x: layerA.maxX + 20

Design has powerful layout constraints, but they only apply to child layers in relation to their parent. The above properties can be used to position sibling layers in relation to each other.

Align functions

These functions let you position layers on the screen.

I often use point: Align.center to place a layer smack in the middle, but you can also place them top, bottom, left, or right.

These functions take an optional ‘offset’ value (in points) to place the layer more to the right or down (or left or up when you use a negative number).

Note that using Align on a child layer will position it inside its parent layer (see Layer hierarchy).

Notes:

These are functions that are called on the Align class, but you can, in fact, omit the ().
You can use them wherever you set an x or y property, so also in states and animations.

Use	on	to
`Align.left`	`x`	Places the layer at the left edge of its parent layer. If there’s no parent, it will stick to the left of the screen.
`Align.right`	`x`	Places the layer at the right edge of its parent layer. If there’s no parent, it will stick to the right side of the screen.
`Align.top`	`y`	Places the layer at the top of its parent layer, or the screen.
`Align.bottom`	`y`	Places the layer at the bottom of its parent layer, or the screen.
`Align.center`	`x`, `y` or `point`	Centers the layer vertically or/and horizontally in its parent layer, or the screen.

Example use of the Align functions

layerA = new Layer
    size: 100
    x: Align.left 50
    y: Align.top 50
layerB = new Layer
    size: 100
    x: Align.right -50
    y: Align.bottom -50
layerC = new Layer
    height: 100
    width: layerB.maxX - layerA.x
    point: Align.center

Center functions

We also still have the Center functions. You can use these on existing layers (so not inside a new Layer).

`layer.center()`	Centers the layer in its parent layer. If there’s no parent it will be centered on the screen.
`layer.centerX()`	Centers the layer horizontally in its parent layer, or the screen.
`layer.centerY()`	Centers the layer vertically in its parent layer, or the screen.

You can add an offset to the centerX() and centerY() functions.

# centering ‘layer A’ horizontally
layerA.centerX()

# placing ‘layer B’ 100 points more to the right
layerB.centerX 100

However, know that it’s better to use the Align functions for centering layers because they work well with Auto-Code. The Center functions are called on a layer after creation, so Auto-Code doesn’t tend to notice them.

Layout constraints in Design

When you lay out an interface in Design, it will automatically get layout constraints. E.g., a header will be anchored automatically to the top of the screen, or child layers will automatically resize with their parent. You can also change these constraints in the inspector.

These layout constraints are not accessible in Code.

But what happens when you make changes in Code is very predictable: when you change a layer’s x, y, width, height, or change its parent, the layout constraints that it might have will be removed. The constraints are also removed when you animate a layer.

Layout constraints work on child layers in relation to their parent (or the device screen when there’s no parent). Take a look at Relative positioning for positioning (sibling) layers in relation to each other.