Tutorial EzLang Size Hints

Size hints can be used to size a widget or layout relative to its parent layout. This is the default way widgets are sized across the framework; this is important to keep in mind! Size hints are controlled through the EzLang 'size_hint_x' and 'size_hint_y' properties. These can be set to a value between 0 and 1. A value of 1 means the size of the parent; 0.5 half the size of the parent, etc. By default size hints are set to 1, so widgets are always as large as their parent by default.

As an example of setting size hints, lets say we have two labels; we want one label to be 75% of the layout height and the other one 25%. They can both be 100% width:

- Layout:
    mode: box
    orientation: vertical
    border: true
    - Label:
        text: Big label
        size_hint_y: 0.75
        size_hint_x: 1
        border: true
    - Label:
        text: Small label
        size_hint_y: 0.25
        size_hint_x: 1
        border: true

The widgets will always respect their size hints, even when the window resizes. We can make the above example shorter by removing the 'size_hint_x' properties, because size hints are already set to '1' by default. As a convenience, there is also a 'size_hint' property which allows you to specify both size hints on one line in the format 'size_hint: x, y':

- Layout:
    mode: box
    orientation: vertical
    - Label:
        text: Big label
        size_hint: 1, 0.75
        border: true
    - Label:
        text: Small label
        size_hint: 1, 0.25
        border: true

In box and table mode, if a layout has multiple widgets, and they all have default size hints, their size hints will be set to "1 / number_of_widgets". So four widgets with default size hints will receive 0.25 size hints. This gives all layout children equal size by default. In box mode, default size hints are only divided among children for the direction of the orientation property, meaning that in horizontal box mode, size_hint_x (when default for all children) will be divided and size_hint_y always remains 1.0. In vertical box mode it is the opposite.

Let's take a look at default sizing behavior using a vertical box mode layout and four labels:

- Layout:
    mode: box
    orientation: vertical
    border: true
    - Label:
        text: Label 1
        border: true
    - Label:
        text: Label 2
        border: true
    - Label:
        text: Label 3
        border: true
    - Label:
        text: Label 4
        border: true

As we can see, all labels retain the default 1.0 size hint for their width (size_hint_x), but their size_hint_y property is divided among the four labels, giving them each 0.25 (25%) height of their parent layout.

Finally, as an exercise, let's recreate a Piet Mondriaan painting using size hints on (colored) box mode layouts. This is the painting we want to make:

Here is the .ez file to create the painting. You can casually look it over to see size hints in action:

- <ColoredLayout@Layout>:
    fill: true
    filler_bg_color: white


- Layout:
    mode: box
    orientation: horizontal
    - Layout:
        id: left_half
        mode: box
        orientation: vertical
        size_hint_x: 0.45
        - ColoredLayout:
            size_hint_y: 0.5
            filler_bg_color: red
            padding_bottom: 1
        - ColoredLayout:
            size_hint_y: 0.2
            padding_bottom: 1
        - Layout:
            size_hint_y: 0.3
            - ColoredLayout:
                size_hint_x: 0.2
                filler_bg_color: yellow
                padding_right: 1
            - ColoredLayout:
                size_hint_x: 0.8
    - Layout:
        id: right_half
        mode: box
        orientation: vertical
        size_hint_x: 0.55
        padding_left: 1
        - ColoredLayout:
            size_hint_y: 0.5
            padding_bottom: 1
        - ColoredLayout:
            size_hint_y: 0.2
            padding_bottom: 1
        - Layout:
            size_hint_y: 0.3
            - Layout:
                size_hint_x: 0.6
                orientation: vertical
                - ColoredLayout:
                    size_hint_y: 0.9
                    filler_bg_color: dark_blue
                    padding_bottom: 1
                    padding_right: 1
                - ColoredLayout:
                    size_hint_y: 0.1
                    padding_right: 1
            - ColoredLayout:
                size_hint_x: 0.4

The result:

We'll look at auto scale sizing next.

Continue

The general tutorial continues with: EzLang Auto scaling.