dogo / sketchkit

A lightweight auto-layout DSL library for iOS, tvOS & macOS.

SketchKit is a lightweight, powerful and pure-Swift auto layout library, you can set up your constraints with a simple and intuitive code without any stringly typing.

In short, it allows you to replace this:

newView.translatesAutoresizingMaskIntoConstraints = false

addConstraint(NSLayoutConstraint(
              item: newView,
              attribute: NSLayoutConstraint.Attribute.centerX,
              relatedBy: NSLayoutConstraint.Relation.equal,
              toItem: view,
              attribute: NSLayoutConstraint.Attribute.centerX,
              multiplier: 1,
              constant: 0))

or

newView.centerXAnchor.constraint(equalTo: view.centerXAnchor).isActive = true

with this

// It's NOT necessary: newView.translatesAutoresizingMaskIntoConstraints = false
newView.layout.applyConstraint { view in
    view.centerXAnchor(equalTo: self.view.centerXAnchor)
    view.centerYAnchor(equalTo: self.view.centerYAnchor)
}

Requirements

• iOS 9.0+ / tvOS 9.0+ / macOS 10.11+
• Swift 3.2+

Installation

CocoaPods

To integrate SketchKit into your Xcode project using CocoaPods, specify it in your Podfile:

target '<Your Target Name>' do
  pod 'SketchKit'
end

Then, run the following command:

$ pod install

Swift Package Manager (SPM)

To add SketchKit as a dependency, you have to add it to the dependencies of your Package.swift file and refer to that dependency in your target.

import PackageDescription
let package = Package(
    name: "<Your Product Name>",
    dependencies: [
       .package(url: "https://github.com/dogo/SketchKit", .upToNextMajor(from: "1.0.0"))
    ],
    targets: [
        .target(
            name: "<Your Target Name>",
            dependencies: ["SketchKit"]),
    ]
)

After adding the dependency, you can fetch the library with:

$ swift package resolve

Carthage

github "dogo/SketchKit"

Usage

Quick Start

import SketchKit

final class MyViewController: UIViewController {

    let myView: UIView = {
        let view = UIView(frame: .zero)
        view.color = .red
        return view
    }()

    override func viewDidLoad() {
        super.viewDidLoad()

        self.view.addSubview(myView)

        myView.layout.applyConstraint { view in
            view.topAnchor(equalTo: self.view.topAnchor)
            view.leadingAnchor(equalTo: self.view.leadingAnchor)
            view.bottomAnchor(equalTo: self.view.bottomAnchor)
            view.trailingAnchor(equalTo: self.view.trailingAnchor)
        }
    }
}

Documentation

The project documentation can be found (here)

Credits

• Nicholas Babo (@NickBabo) thank you for the SketchKit logo,

License

SketchKit is released under the MIT license. See LICENSE for details.

sketchkit's Issues

Add height and width constraints with lessThan/greaterThan relations to another Anchor

Often times I find myself having to constrain views to have a maximum height or width, often related to another view's dimension. I'm currently using this framework on a project and I've felt the need to constrain a view's height to be, at max, half of another view's height.

From my experience, this kind of relations is relatively common in UI building and I believe it would be beneficial to offer this option on SketchKit.

I believe simply adding an interface for building this kind of relation, that's already available in the anchor interface, would be the optimal solution.

myView.layout.applyConstraint { view in
    view.widthAnchor(lessThanOrEqualTo: otherView.widthAnchor)
    view.heightAnchor(lessThanOrEqualTo: otherView.heightAnchor, multiplier: 0.5)
}

Enable SketchKit layout DSL on UILayoutGuides

UILayoutGuides

UILayoutGuides are a great feature that UIKit has that allows developers to move on from using empty dummy UIViews as spacing or container views in order to achieve a specific spacing or alignment.

There are a number of costs associated with adding dummy views to your view hierarchy. First, there is the cost of creating and maintaining the view itself. Second, the dummy view is a full member of the view hierarchy, which means that it adds overhead to every task the hierarchy performs. Worst of all, the invisible dummy view can intercept messages that are intended for other views, causing problems that are very difficult to find.

• Apple Developer Documentation

UILayoutGuide is quite useful and common, I believe it would be of great interest to be able to apply this DSL to these objects as well

layoutGuide.layout.applyConstraint { $0.topAnchor(equalTo: view.topAnchor) }

Centralize anchoring and constraint logic

Perceived problem: Currently we have two identical implementations of the anchors extensions: one for UIView and one for UILayoutGuide. Meaning that whatever change, improvement, addition or fix made to the any part of this logic must be replicated on both extensions. Duplicated code is notoriously bad for a code-base, allowing for unexpected bugs and behaviors to occur.

Proposed Solution: Unifying the anchoring logic into one centralized DSL.
We could try achieving this by using a protocol to represent any object that can be constrained (which both UIView and UILayoutGuide would implement); Or maybe with generics.