The project below shows how position (
y…) and dimensions (
height…) work together.
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
y (a bit like
You can use it to set both
y at the same time.
# A layer placed at 20 points of the top left corner layerA = new Layer point: 20
You can also position layers using their right side, their bottom, or vertical or horizontal middle with these extra properties:
|The left edge of the layer.|
(So actually the same as
|The horizontal center of the layer.|
|The right edge of the layer,|
|The top side of the layer.|
(This is the same as
|The vertical center of the layer.|
|The bottom edge of the layer,|
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 = 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.
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).
- These are functions that are called on the
Alignclass, but you can, in fact, omit the
- You can use them wherever you set an
yproperty, so also in states and animations.
|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.|
|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.|
|Places the layer at the top of its parent layer, or the screen.|
|Places the layer at the bottom of its parent layer, or the screen.|
|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
We also still have the Center functions. You can use these on existing layers (so not inside a
|Centers the layer in its parent layer.|
If there’s no parent it will be centered on the screen.
|Centers the layer horizontally in its parent layer, or the screen.|
|Centers the layer vertically in its parent layer, or the screen.|
You can add an offset to the
# 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.