Layout

UIView instances store position and size in their center and 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.

struct CKLayout {
  CKComponent *component;
  CGSize size;
  std::vector<CKLayoutChild> children;
};
struct CKLayoutChild {
  CGPoint position;
  CKLayout layout;
};

Layout Components

ComponentKit includes a library of components that can be composed to declaratively specify a layout.

• CKFlexboxComponent is 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.
• CKInsetComponent applies an inset margin around a component.
• CKBackgroundLayoutComponent lays out a component, stretching another component behind it as a backdrop.
• CKOverlayLayoutComponent lays out a component, stretching another component on top of it as an overlay.
• CKCenterLayoutComponent centers a component in the available space.
• CKRatioLayoutComponent lays out a component at a fixed aspect ratio.
• CKStaticLayoutComponent allows positioning children at fixed offsets.

Implementing computeLayoutThatFits:

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 CKLayout structure with the layout of child components.

For sample implementations of computeLayoutThatFits:, check out the layout components in ComponentKit itself!