Nux Layouts (part 4)

Posted by on Oct 5, 2011 in Blog, nux | 0 comments

In Part 3, I have shown the options available along the minor axis of an horizontal or vertical layout. In this part, I will go though the layout process along the major axis. I will be using an horizontal layout to demonstrate the process, but the same computations applies along the major axis of a vertical layout. For reference, here are the previous parts in the Nux Layouts series: Part 1, Part 2, Part 3.

Before I proceed, I want to introduce new terms. In previous parts of the Nux Layout series, I have been using the word “widget” to refer to containers (layouts) and physical interface component (such as button). However, I find the term “widget” inappropriate, too generic and not very descriptive. I prefer to substitute “area” to “widget”. An area occupies a physical region of the display. It may be a container (layout) or user interface object (such as a check box). Container type areas are invisible on the display but the placement of their content on the screen gives the hint of the role they play in the organization of the user interface. Some areas are both containers and user interface objects. A scroll view for instance is a visual interface component but it is also a container of a view that you can scroll up or down, left or right. In the Nux Layouts series, layouts as invisible container that inherit from the nux::Layout class.

Layout computation along the major axis of an horizontal layout

When I refer to a size, I am talking about the size along the major axis. For and horizontal layout, this is the width.

All areas added to an horizontal layout are given a scaling factor. That factor is an integer number equal or greater than 0. And every area has a minimum and maximum size that cannot be changed by the layout process.

User Interface Component Size

User Interface Component Size

At the start of the horizontal layout computation process, areas with a scaling factor of 0 are set to their minimum size (only the major axis size is changed). Then, the total size of all areas with a scaling factor of 0 is taken out from the layout size (along the major dimension which is the width for an horizontal layout).

Layout Available Size

Layout Available Size

I didn’t add it in the formula (for simplicity), but the left/right padding of the layout and the space between children should also be taken out from the layout’s total size. This would yield the correct available space to share between children with a non zero scale factor.

The layout’s available size is then shared among all VIC with a non zero scale factor according to this formula:

Size Computation

Size Computation

The formula applies only if the minimum and maximum size of the area are respected. An area size cannot be smaller than its defined minimum or larger than its defined maximum. If the result of the formula would give an area a size that is larger than its maximum size, then the area would adopt its maximum size. If the result would be smaller than its minimum size, then the area adopts its minimum size.

Consider the following picture. It shows a simplified version of the layout process.

Size Computation Process

As a result of the computation, we have the folowwing:

  • area 0 occupies 3/5 of the available size
  • each one of area 2 and 3 are 1/5 each of the available size
  • each one of area 2 and 3 and each 1/3 the size of area 0
  • area 1 is reduced to its minimum size

Recursion

Areas can be containers or user interface components. In Nux, user interface components objects all inherit from the nux::View class. View objects may have a layout and that layout is the same size as the View (it can be a different size but I will leave size for another chapter).
When a layout assigns sizes to its areas, the areas themselves have to go through the same process and assign sizes to their own children. The process goes on and on down the areas tree and when it recurs back, each area informs its parent of it actual size and the parent tries to re-size itself to tightly pack its children. In doing so, the parent must not grow larger or smaller than the user defined minimum and maximum size.  And it can initiate a recursion down the areas tree, if it judges that there is more or less space to share among its children.

Layout Process Recursion

The important point is that, not only does the parent layout affects the size of its children, the children also affects the size of their parent. The parent layout always tries to tightly pack its children along the major axis. In the end, the horizontal layout may look like this:

Final Layout Result

Final Layout Result

The last case reveal a configuration option. If the layout is larger than its content, the children may be distributed in different ways along the major axis:

Final Layout Distribution

Final Layout Distribution

Summary for HLayout and VLayout

All that has been said for the horizontal layout also applies to the vertical layout.

What I have shown here is a simplification of the layout process for nux::HLayout and nux::VLayout. There are more details to the layout process. By design, the process never gets stuck in a the recursion. The computation always reaches a solution even if it means that the children of the layout overflow beyond its borders. With the right of conditions imposed over the layouts and its areas, it is possible to achieve many linear arrangement styles.

In the next part I will go through some of the details of the grid and layered layouts.