Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/eonist/spatial
Hasle-free AutoLayout (MacOS / iOS)
https://github.com/eonist/spatial
autolayout ios layout macos nslayoutanchor nslayoutconstraint nslayoutguide programmatic swift ui uikit uilayoutguide
Last synced: about 2 months ago
JSON representation
Hasle-free AutoLayout (MacOS / iOS)
- Host: GitHub
- URL: https://github.com/eonist/spatial
- Owner: eonist
- License: mit
- Created: 2018-09-20T08:00:13.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2023-10-22T13:07:27.000Z (about 1 year ago)
- Last Synced: 2024-04-29T15:20:56.469Z (9 months ago)
- Topics: autolayout, ios, layout, macos, nslayoutanchor, nslayoutconstraint, nslayoutguide, programmatic, swift, ui, uikit, uilayoutguide
- Language: Swift
- Homepage:
- Size: 366 KB
- Stars: 16
- Watchers: 2
- Forks: 2
- Open Issues: 20
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Spatial
[](https://github.com/apple/swift)
[](https://codebeat.co/projects/github-com-eonist-spatial-master)
Definition: **Spatial** | ˈspeɪʃ(ə)l | adjective | **describes how objects fit together in space**
> :warning: **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 use `import SpatialLib` instead of `import Spatial`
## Table of Contents
- [What is it](#what-is-it)
- [How does it work](#how-does-it-work)
- [How do I get it](#how-do-i-get-it)
- [Gotchas](#gotchas)
- [Example](#example)
- [Todo](#todo)
### What is it
Hassle-free AutoLayout, tailored for interactivity and animation. Created for how our mental model thinks autolayout works. Not optimized for brevity.
### How does it work
- 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.
### How do I get it
- SPM `"https://github.com/eonist/Spatial.git"` `branch: "master"`
- Manual Open `Spatial.xcodeproj`
### Gotchas:
- 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.
### Example:
```swift
// 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 in
let a = Constraint.anchor(view, to: self)
let s = 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)
}
```
```swift
// Short-hand, bulk
[btn1, btn2, btn3].distributeAndSize(dir: .vertical, width: 96, height: 24)
// Long-hand, bulk
[btn1,btn2,btn3].activateAnchorsAndSizes { views in
let anchors = Constraint.distribute(vertically: views, align: .topLeft)
let sizes = views.map { Constraint.size($0, size: .init(width: 96, height: 42)) }
return (anchors, sizes)
}
```
```swift
// Pin something between something
$0.activateConstraints { view in
let tl = Constraint.anchor(view, to: self, align: .topLeft, alignTo: .topLeft)
let br = 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
}
```
```swift
// Animation
btn.animate(to: 100,align: left, alignTo: .left)
```
```swift
// Distribute
// |[--][--][--][--][--]|
[label1, label2, label3].activateAnchorsAndSizes { views in // for anim: applyAnchorsAndSizes
let anchors = Constraint.distribute(vertically: views, align: .left) // there is also: horizontally
let sizes = views.map{ Constraint.size($0, toView: self.frame.width, height: 48)) }
return (anchors, sizes)
}
```
```swift
// SpaceAround
// |--[]--[]--[]--[]--[]--|
let views: [ConstraintView] = [UIColor.purple, .orange, .red].map {
let view: 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)
```
```swift
// 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)
```
### Todo:
- 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?