Definition: Spatial | ˈspeɪʃ(ə)l | adjective | describes how objects fit together in space
⚠️ Note: Spatial has been renamed to SpatialLib due to a conflict with a recently introduced framework by Apple also named Spatial. SPM url is the same. Just useimport SpatialLibinstead ofimport Spatial
Hassle-free AutoLayout, tailored for interactivity and animation. Created for how our mental model thinks autolayout works. Not optimized for brevity.
- Spatial is just extensions and enums which enable you to write less boilerplate code
- Spatial is interchangeable with Vanilla AutoLayout
- Spatial comes with examples how you can animate with AutoLayout
- Spatial uses plain and simple math under the hood.
- SPM
"https://github.com/eonist/Spatial.git"branch: "master" - Manual Open
Spatial.xcodeproj
- SnapKit and Carthography are too clever and caters to too many facets of autolayout. This library is just a simple extension that does basic autolayout while reducing the setup time in half.
// One-liner, single
btn1.anchorAndSize(to:self, width:96, height:24)
// Info regarding parameters and their meaning and effects
btn1.anchorAndSize(to: button, // to what other AutoLayout element should self anchor and size to
sizeTo:self, // inherit size of another AutoLayout element, overrides to param
width:100, // override sizeTo with constant
height:50, // override sizeTo with constant
align:.topCenter, // decides where the pivot of self should be
alignTo:.bottomCenter, // decides to where self should pivot to
multiplier:.init(width:1, height:1), // multiply sizeTo, or constants
offset:.init(x:0, y:20), // append constant to current position
sizeOffset:.init(width:-20, height:0), // append constant to current size
useMargin:false) // adher to other autolayouts margin
// Long-hand, single
btn1.activateAnchorAndSize{ view inleta=Constraint.anchor(view, to:self)lets=Constraint.size(view, width:96, height:24)return(a, s)}
// or simpler:
btn1.activateAnchorAndSize{Constraint.anchor($0, to:self),Constraint.size($0, width:96, height:24)}// Short-hand, bulk
[btn1, btn2, btn3].distributeAndSize(dir:.vertical, width:96, height:24)
// Long-hand, bulk
[btn1,btn2,btn3].activateAnchorsAndSizes{ views inletanchors=Constraint.distribute(vertically: views, align:.topLeft)letsizes= views.map{Constraint.size($0, size:.init(width:96, height:42))}return(anchors, sizes)}// Pin something between something
$0.activateConstraints{ view inlettl=Constraint.anchor(view, to:self, align:.topLeft, alignTo:.topLeft)letbr=Constraint.anchor(view, to: viewFinderView, align:.bottomRight, alignTo:.topRight)return[tl.x, tl.y, br.x, br.y] // pins a view to the TR of the parent and BL of another sibling-view
}// Animation
btn.animate(to:100,align: left, alignTo:.left)// Distribute
// |[--][--][--][--][--]|
[label1, label2, label3].activateAnchorsAndSizes{ views in // for anim: applyAnchorsAndSizes
letanchors=Constraint.distribute(vertically: views, align:.left) // there is also: horizontally
letsizes= views.map{Constraint.size($0, toView:self.frame.width, height:48))}return(anchors, sizes)}// SpaceAround
// |--[]--[]--[]--[]--[]--|
letviews:[ConstraintView]=[UIColor.purple,.orange,.red].map{letview:ConstraintView=.init(frame:.zero)self.addSubview(view)
view.backgroundColor = $0
return view
}
views.applySizes(width:120, height:48)
views.applyAnchors(to:self, align:.top, alignTo:.top, offset:20)
views.spaceAround(dir:.hor, parent:self)// Space between
// |[]--[]--[]--[]--[]|
views.applySizes(width:120, height:48)
views.applyAnchors(to:self, align:.top, alignTo:.top, offset:20)
views.spaceBetween(dir:.horizontal, parent:self, inset:x)- Complete the spaceAround and spaceBetween methods ✅
- Add macOS support ✅
- Document every param in every declaration (Since the API is more stable now) ✅
- Make examples with AutoLayout margins not
- Add methods for applyAnchor for horizontal and vertical types
- Consider renaming anchor and size to pin and fit
- Write problem / solution statment in readme?