Skip to content

Positioning and Layout Guide

Matt Greenfield edited this page Aug 15, 2014 · 4 revisions

MGBoxKit provides CSS influenced extensions to the standard UIKit layout engine, such as [margins]([MGLayoutBox margin]), [padding]([MGLayoutBox padding]), [zIndex]([MGLayoutBox zIndex]), and [fixed positioning]([MGLayoutBox fixedPosition]), as well as some other unique extensions.

For child view layout, MGBoxKit defaults to a layout algorithm similar to CSS's display:block, with each child box positioned below its previous sibling. There is also a grid style layout algorithm, similar to CSS's float:left. And individual child boxes can also optionally exempt themselves from automatic layout, having their position instead defined by their frame origin (thus the same as standard UIView positioning). The child box layout strategy is set by the [contentLayoutMode]([MGLayoutBox contentLayoutMode]) property.

The MGLayoutBox Box Model

If you are familiar with CSS you will find the MGBoxKit box model mostly familiar, with some minor differences.

In CSS, the box's width and height specify the dimensions of the inner content area, inside the padding. However in MGBoxKit's box model, the box's size (thus width and height) is between the box's padding and margins. Thus padding acts as an inset from the size, reducing the available content area, and margin acts as an external buffer, extending the box's footprint behind its given size.

The convenience getters, innerWidth and innerHeight return the available content area, ie size minus the padding.