Layout Constraints

appdoo - Element Geometry

In most cases, you certainly don’t have just one element on your work space. And often one element should be positioned depending on another. You can easily do this with the Layout Constraints provided by appdoo. The best way is to explain it again using an example.

Let’s assume that a multiline label is displayed at the top of your work space. However, you don’t yet know exactly how high this label will be, since the text is set dynamically (see chapter “Data Links” for more information on how to do this). A second label with only one line should be displayed directly below this label. Let’s go through the necessary steps together.

  1. Drag a label from the list of elements onto your work space.
  2. Make sure the “Text Height” value in the Properties is set to “auto”. This ensures that the height of your label is always automatically adjusted to the text it contains.
  3. Move the label up to the left until the upper horizontal line and the left vertical blue dotted line appear.
  4. In the selected state, there is a blue dot on the right side of the label. Use the mouse pointer to drag it to the right until the right vertical blue dotted line appears.
  5. The label now extends on the work space from the left to the right edge. So that this is also the case for all screen widths, we will make some settings in the “Auto Resizing” area.
  6. Click on the tab “Geometry” in the right sidebar.
  7. Modify the settings in the “Auto Resizing” area so that the following elements are active (red): Magnet top, magnet left, magnet right, horizontal line.
  8. Replace the default text of your label with this text: “The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.”
  9. Select the label and change the name in the right sidebar to “Label Top”. Element Geometry - Layout Constraints
  10. We have prepared the first label. Now let’s move on to the second label. Drag another label onto your work space and position it slightly below the existing label.
  11. Again drag the left and right edges of the label to the dotted vertical guides and activate the left and right magnets and the horizontal line in the “Geometry” area under “Auto Resizing”. Oh yes, you might have wondered why the vertical auxiliary lines were red instead of blue? The reason for this is that these auxiliary lines have now indicated that you are aligning your second label left and right on the same vertical line as your first label.
  12. Now click on the “New constraint” button in the “Layout Constraints” area.
  13. Since your second label is to be displayed below the first label (“Label Tap”), select “Below” from the first select box and “Label Top” from the second select box.
  14. Enter the value 20 in the “Margin” field. This defines the distance between the two labels. Element Geometry - Layout Constraints

Okay. These were many steps. But let me assure you that this looks so extensive only written down. If you then do this yourself in other projects, then it will go much faster.

If you now switch between the sizes of different devices (select box at the bottom right of the app) then you will see that the width of the first label changes automatically and therefore the height is always different. But whatever happens, the second label will always be positioned at the same distance below it. Mission accomplished!

Element Geometry - Layout Constraints