repository·master·Indexed 25 days ago
https://github.com/layoutbox/pinlayoutA fast, manual layout framework for iOS, tvOS, and macOS that provides a concise, chainable syntax for layouting UIViews, NSViews, and CALayers without Auto Layout constraints. It supports relative positioning, RTL languages, and responsive designs, requiring iOS 9.0+, tvOS 9.0+, or macOS 10.9+.
PinLayout is highly optimized for performance, particularly in complex list scenarios like UICollectionView and UITableView. Benchmarks conducted using the Layout Framework Benchmark show that PinLayout is:
UIView.frame directly).These results hold true for multi-pass layout scenarios where cell counts increase per pass.
PinLayout is a manual layout engine designed for speed and simplicity. Unlike Auto Layout, it does not use constraints or a complex solver. Key characteristics include:
UIView or NSView. It simply computes the view's frame. This allows you to mix PinLayout with other frameworks like Auto Layout or Flexbox without conflicts.view.pin.width(100).height(200)) and subsequently only update its position (e.g., view.pin.top(10).left(20)), which is ideal for smooth animations.UIView.pin, UIView.anchor, and UIView.edge.PinLayout supports NSView on macOS with the following constraints:
isFlipped == true).NSControl. For custom NSView subclasses, conform to the SizeCalculable protocol and implement sizeThatFits(:CGSize).pin.safeArea and pin.readableMargins are not available in AppKit.aspectRatio() with no parameters is not supported.PinLayout is stateless, meaning it always calculates layout starting from the view's current position and size (frame). Because of this, you do not need to reset any properties to animate a view. You can modify only the specific property you wish to animate within a standard UIView.animate block.
UIView.animate(withDuration: 0.3) {
view.pin.width(30)
}When a UIView has a transform applied (scaling, rotation, etc.), you must choose between pin and pinFrame to determine how the layout is applied relative to that transform.
UIView.pin (Pre-transform)below(of:)), PinLayout uses the untransformed size and position of the reference view.UIView.pinFrame (Post-transform)| Scenario | pin behavior | pinFrame behavior |
|---|---|---|
| Rotation | Layouted, then rotated | Rotated, then layouted |
| Relative Layout | Uses untransformed reference size/pos | Uses transformed reference size/pos |
// Using pin (pre-transform)
view.transform = .init(rotationAngle: CGFloat.pi / 2)
view.pin.center().width(100).height(50)
// Using pinFrame (post-transform)
view.transform = .init(rotationAngle: CGFloat.pi / 2)
view.pinFrame.center().width(100).height(50)PinLayout can layout CALayer objects.
Limitations:
sizeToFit(:FitType) is not supported. To enable it, conform your custom CALayer subclass to the SizeCalculable protocol and implement sizeThatFits(:CGSize).pin.safeArea and pin.readableMargins are not available.aspectRatio() with no parameters is not supported.aLayer = CALayer()
bLayer = CALayer()
view.layer.addSublayer(aLayer)
view.layer.addSublayer(bLayer)
aLayer.pin.top(10).left(10).width(20%).height(80%)
bLayer.pin.below(of: aLayer, aligned: .left).size(of: aLayer)PinLayout supports Right-to-Left (RTL) languages by providing semantic alternatives to directional methods. Instead of using methods containing left or right, you should use methods containing start and end.
Using start and end allows you to position views based on their logical position in the layout flow rather than a fixed physical side. This ensures that your layout automatically adapts to the user's language settings (e.g., a view pinned to the start will appear on the left in LTR mode and on the right in RTL mode).
PinLayout applies margins by either moving the view or reducing its size, depending on which attributes are pinned.
| View's pinned attributes | Left Margin | Right Margin |
|---|---|---|
| Left | Move view right | - |
| Left and Width | Move view right | - |
| Right | - | Move view left |
| Right and Width | - | Move view left |
| Left and Right | Reduce width to apply left margin | Reduce width to apply right margin |
| hCenter | Move view right | Move view left |
| View's pinned attributes | Top Margin | Bottom Margin |
|---|---|---|
| Top | Move view down | - |
| Top and Height | Move view down | - |
| Bottom | - | Move view up |
| Bottom and Height | - | Move view up |
| Top and Bottom | Reduce height to apply top margin | Reduce height to apply bottom margin |
| vCenter | Move view down | Move view up |
Note: - indicates the margin is not applied.
UISegmentedControl from a horizontal line to below a label) when the container width falls below a specific threshold (like 500 pixels).PinLayout is a manual layout framework designed for speed and control. Unlike Auto Layout, it does not use constraints. Instead, it performs manual layouting, making it as fast as writing manual frame calculations.
Key Principles:
Important Implementation Note:
Because PinLayout performs manual layout, you must trigger your layout code inside UIView.layoutSubviews() or UIViewController.viewDidLayoutSubviews() to handle changes in container size, such as device rotation or multitasking split-view changes.
To support iOS 11+ features like the iPhone X landscape mode, you should manage UIView.safeAreaInsets.
Recommended Pattern:
contentView that contains all child views.contentView to match the safeAreaInsets using either the standard UIView.safeAreaInsets or PinLayout's UIView.pin.safeArea.Note: Only the UIViewController's main view needs to handle safeAreaInsets; sub-views typically do not need to handle them directly.
intrinsicContentSize property. PinLayout will then be able to interact with them as part of the manual layout process.