Anchors in View Area

Node arrangement in view area by default will preserve proportions of position and size of nodes when resized. Compare the following two views:

Normal mode.

Fullscreen mode.

Such stretching is not always desirable, and this problem can be solved by using anchors. In the example below we will make all four nodes preserve their size and attach to corresponding corners.

For each node we will adjust anchors in the following way:

  1. A node:
    1. left side remains proportinal - at the left edge
    2. top side remains proportinal - at the top edge
    3. right side preserves distance from the left edge
    4. bottom side preserves distance from the top edge
  2. B node:
    1. left side preserves distance from the right edge
    2. top side remains proportinal - at the top edge
    3. right side remains proportinal - at the right edge
    4. bottom side preserves distance from the top edge
  3. C node:
    1. left side remains proportinal - at the left edge
    2. top side preserves distance from the bottom edge
    3. right side preserves distance from the left edge
    4. bottom side remains proportinal - at the bottom edge
  4. D node:
    1. left side preserves distance from the right edge
    2. top side preserves distance from the bottom edge
    3. right side remains proportinal - at the right edge
    4. bottom side remains proportinal - at the bottom edge

The result is what we were aiming for - all nodes are in their respective corners with the original size.

A more useful example would be to arrange nodes for a chat use case:

If we expand the view to fullscreen, all controls will resize:

But we would rather have Message input to keep its height, and Send button to keep its size. In order to do it, we will change anchors in this way:

And now fullscreen view has proper control sizes:

  • Last updated:
  • Contributors