Tutorial EzLang Position Hints

Position hints can only be used for widgets that are in a layout in float mode. Using position hints you specify the relative position you want the widget to be in, and it will be handled for you. There are horizontal position hints (pos_hint_x) and vertical position hints (pos_hint_y).

The available settings for pos_hint_x are:

• Left
• Center
• Right

The available settings for pos_hint_y are:

• Top
• Middle
• Bottom

If you want a widget to be in the bottom right of the screen, you would give a widget: "pos_hint_x: right" and "pos_hint_y: bottom". For convenience you could use the "pos_hint" property to set both at the same time in the format: "pos_hint: x, y":

- Layout:
    mode: float
    border: true
    - Label:
        text: Hello world
        auto_scale: true, true
        pos_hint: right, bottom
        border: true

Note that in the example we auto_scale the label. If we don't, it would take up the entire screen and positioning would be pointless.

It is possible to be more specific with position hints. Instead of just specifying "bottom" for example, we could use "bottom: 0.9". This would position the widget 90% towards the bottom of the layout. The number goes from 0 to 1. This method can be used for 'center', 'right', 'middle' and 'bottom'. It is not useful with 'left' and 'top', because they represent position (0, 0) and cannot be scaled. Let's say we want a label to be 90% towards the right of the layout and 90% towards the bottom:

- Layout:
    mode: float
    border: true
    - Label:
        text: Hello world
        pos_hint: right: 0.9, bottom: 0.9
        auto_scale: true, true
        border: true

Finally, let's use all position hints in one example. We'll recreate this setup:

1   2 
  3
4   5

- <MyLabelTemplate@Label>:
    text: hello
    border: True
    auto_scale: true, true

- Layout:
    mode: float
    - MyLabelTemplate:
        id: my_upper_left_label
        pos_hint: left, top
    - MyLabelTemplate:
        id: my_middle_label
        pos_hint: center, middle
    - MyLabelTemplate:
        id: my_lower_left_label
        pos_hint: left, bottom
    - MyLabelTemplate:
        id: my_upper_right_label
        pos_hint: right, top
    - MyLabelTemplate:
        id: my_lower_right_label
        pos_hint: right, bottom

Continue

The general tutorial continues with: EzLang Position Maths.