Layout Edit on GitHub
UIView instances store position and size in their
bounds properties. As constraints change, Core Animation performs a layout pass to call
layoutSubviews, asking views to update these properties on their subviews.
CKComponent instances do not have any size or position information. Instead, ComponentKit calls the
layoutThatFits: method with a given size constraint and the component must return a structure describing both its size, and the position and sizes of its children.
ComponentKit includes a library of components that can be composed to declaratively specify a layout.
CKFlexboxComponentis based on a simplified version of CSS flexbox. It allows you to stack components vertically or horizontally and specify how they should be flexed and aligned to fit in the available space.
CKInsetComponentapplies an inset margin around a component.
CKBackgroundLayoutComponentlays out a component, stretching another component behind it as a backdrop.
CKOverlayLayoutComponentlays out a component, stretching another component on top of it as an overlay.
CKCenterLayoutComponentcenters a component in the available space.
CKRatioLayoutComponentlays out a component at a fixed aspect ratio.
CKStaticLayoutComponentallows positioning children at fixed offsets.
If the components above aren’t powerful enough, you can implement
computeLayoutThatFits: manually. This method passes you a
CKSizeRange that specifies a min size and a max size. Choose any size in the given range, then return a
CKComponentLayout structure with the layout of child components.
For sample implementations of
computeLayoutThatFits:, check out the layout components in ComponentKit itself!