-
Notifications
You must be signed in to change notification settings - Fork 282
Positioning and Layout Guide
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.
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
.