Nux Layouts (part 5)
I will conclude the Nux Layouts series with a look at the Grid and Layered Layout.
Grid Layout
The grid layout places views in a typical matrix style. All views in a grid are presented with a size that they may or may not use entirely. And views cannot be rendered outside of their allocated space.
Horizontal and vertical space between views can be controlled by the developer, as is the padding of the grid content.
Grid Layout Design
In addition, a grid layout can be filled in two ways:
- Horizontally, with areas added in rows from left to right
- Vertically, with areas added to columns from top to bottom
Grid Layout Horizontal Flow
Grid Layout Vertical Flow
Layered Layout
Layered Layout is the latest addition to the Layout family. Basically, it stacks areas one onto the other. And the top level area is the one that receives inputs events. The stacked areas are rendered from back to front; and with blending enabled areas can be seen through the stack.
Layered Layout Design
Conclusion
The layouts that have been described through out the series are essential to give structure to Nux user interfaces. The Horizontal and Vertical layouts are the most complex of these layouts. This is due to traditional user interface design that tends to favor rows and columns of user interface components. However, user interface design is changing and things don’t have to be so linear anymore. Areas can be rendered in the 3D space and this offers new possibilities for user interaction.