Minimal Auto Layout in Swift

Related tags

Layout Restraint
Overview

Restraint

Restraint is a very very small library to help make your use of NSLayoutConstraint in Swift more legible & declarative.

  • Like programmatic views?
  • Like the benefits of using pure AutoLayout?
  • Like clear and minimal interfaces?
  • Dislike Visual Format Language and "stringly" typing?
  • Dislike the verbosity of NSLayoutConstraint?
  • Dislike heavy dependencies?
  • Practice Restraint!

Carthage

Features

  • As simple as possible
  • Easy to maintain
  • Easy to replace
  • Easy to circumvent
  • Not too clever
  • Sane defaults
  • Automatic handling of setTranslatesAutoresizingMaskIntoConstraints

Basic Example

Let's set the height & width of an imageView to 200 points and center in the current UIView. Here's how we would do that with NSLayoutConstraint:

let imageViewWidthConstraint = NSLayoutConstraint(
  item:       imageView,
  attribute:  .Height,
  relatedBy:  .Equal,
  toItem:     nil,
  attribute:  .NotAnAttribute,
  multiplier: 1.0,
  constant:   200
)

let imageViewHeightConstraint = NSLayoutConstraint(
  item:       imageView,
  attribute:  .Width,
  relatedBy:  .Equal,
  toItem:     nil,
  attribute:  .NotAnAttribute,
  multiplier: 1.0,
  constant:   200
)

imageView.addConstraints([imageViewWidthConstraint, imageViewHeightConstraint])

let imageViewHorizontalConstraint = NSLayoutConstraint(
  item:       imageView,
  attribute:  .CenterX,
  relatedBy:  .Equal,
  toItem:     self,
  attribute:  .CenterX,
  multiplier: 1.0,
  constant:   0
)

let imageViewVerticalConstraint = NSLayoutConstraint(
  item:       imageView,
  attribute:  .CenterY,
  relatedBy:  .Equal,
  toItem:     self,
  attribute:  .CenterY,
  multiplier: 1.0,
  constant:   0
)

addConstraints([imageViewHorizontalConstraint, imageViewVerticalConstraint])

😨

And of course, this depends upon your particular formatting conventions. You know how quickly this gets out of hand.

Here's how to apply these same constraints with Restraint:

Restraint(imageView, .Width,  .Equal, 200).addToView(imageView)
Restraint(imageView, .Height, .Equal, 200).addToView(imageView)

Restraint(imageView, .CenterX, .Equal, self, .CenterX).addToView(self)
Restraint(imageView, .CenterY, .Equal, self, .CenterY).addToView(self)

💆

Detailed Example

Example View

For this view, we'd like to:

  • Center the imageView (which is of a fixed size) vertically and horizontally in the containing view.
  • Center topLabel (which is of a variable size) vertically between the top of imageView and the top of the containing view.
  • Center topLabel horizontally in the containing view.
  • Center bottomLabel (which is of a variable size) vertically between the bottom of imageView and the bottom of the containing view.
  • Set the width of bottomLabel to the width of the containing view less its layout margins.

Here are those rules expressed with Restraint:

// Image View Constraints

Restraint(imageView, .Width,  .Equal, imageViewSize).addToView(self)
Restraint(imageView, .Height, .Equal, imageViewSize).addToView(self)

Restraint(imageView, .CenterX, .Equal, self, .CenterX).addToView(self)
Restraint(imageView, .CenterY, .Equal, self, .CenterY).addToView(self)

// Top Label Constraints

Restraint(topLabel, .CenterX, .Equal, imageView, .CenterX).addToView(self)
Restraint(topLabel, .CenterY, .Equal, imageView, .Top, 0.5, 0).addToView(self)

// Bottom Label Constraints

Restraint(bottomLabel, .Left,  .Equal, self, .LeftMargin).addToView(self)
Restraint(bottomLabel, .Right, .Equal, self, .RightMargin).addToView(self)

Restraint(bottomLabel, .CenterY, .Equal, self, .CenterY, 1.5, (200 / 4)).addToView(self)

You can see this in action in Example/View.swift

How It Works

Each Restraint simply creates the appropriate NSLayoutConstraint, and the call to addToView disables translatesAutoresizingMaskIntoConstraints on the left view in the constraint and adds that constraint to the target view.

Optionally, you can call Restraint().constraint() to get an instance of NSLayoutConstraint and add your constraint with UIView#addConstraint or #addConstraints later. For example:

let heightConstraint = Restraint(imageView, .Height, .Equal, 200).constraint()

imageView.addConstraint(heightConstraint)

In this case you'll need to handle disabling translatesAutoresizingMaskIntoConstraints yourself.

Installation

Carthage

Add the following to your project's Cartfile:

github "puffinsupply/Restraint" >= 1.0

Manual

Simply add Restraint.swift to your project.

Contributors

License

You might also like...
Swift microframework for declaring Auto Layout constraints functionally
Swift microframework for declaring Auto Layout constraints functionally

Relayout Relayout is a Swift microframework to make using Auto Layout easier with static and dynamic layouts. Why? If you want to build a UI using App

SuperLayout is a Swift library that makes using Auto Layout a breeze.
SuperLayout is a Swift library that makes using Auto Layout a breeze.

SuperLayout is a library that adds a few custom operators to Swift that makes using the amazing NSLayoutAnchor API for Auto Layout a breeze. SuperLayo

Written in pure Swift, QuickLayout offers a simple and easy way to manage Auto Layout in code.
Written in pure Swift, QuickLayout offers a simple and easy way to manage Auto Layout in code.

QuickLayout QuickLayout offers an additional way, to easily manage the Auto Layout using only code. You can harness the power of QuickLayout to align

Declarative Auto Layout in Swift, clean and simple

Tails Tails is a take on declarative Auto Layout. If you don't like typing (like me), it might be your kind of thing! Tails is written in Swift and cu

Fast Swift Views layouting without auto layout. No magic, pure code, full control and blazing fast
Fast Swift Views layouting without auto layout. No magic, pure code, full control and blazing fast

Fast Swift Views layouting without auto layout. No magic, pure code, full control and blazing fast. Concise syntax, intuitive, readable & chainable. [iOS/macOS/tvOS/CALayer]

Auto Layout made easy
Auto Layout made easy

EasyPeasy is a Swift framework that lets you create Auto Layout constraints programmatically without headaches and never ending boilerplate code. Besi

TinyConstraints is the syntactic sugar that makes Auto Layout sweeter for human use.
TinyConstraints is the syntactic sugar that makes Auto Layout sweeter for human use.

TinyConstraints is the syntactic sugar that makes Auto Layout sweeter for human use. Features Pure Swift 5 sweetness. Everything you can do with Auto

Intuitive and powerful Auto Layout library
Intuitive and powerful Auto Layout library

Align introduces a better alternative to Auto Layout anchors. Semantic. Align APIs focus on your goals, not the math behind Auto Layout constraints. P

⚓️ Declarative, extensible, powerful Auto Layout
⚓️ Declarative, extensible, powerful Auto Layout

EasyAnchor ❤️ Support my apps ❤️ Push Hero - pure Swift native macOS application to test push notifications PastePal - Pasteboard, note and shortcut m

Comments
  • Make constraint returned from addToView discardable

    Make constraint returned from addToView discardable

    In Swift 2, unused return values were silently ignored. This changed in Swift 3, so now addToView(_) will cause a buildtime warning unless you use the returned constraint. This commit adds @discardableResult to said method.

    opened by cwalo 1
Releases(2.0.0)
Owner
The Puffin Supply Project
Simple software set free at Last.
The Puffin Supply Project
Auto Layout made easy with the Custom Layout.

Auto Layout made easy with the Custom Layout. Getting started CocoaPods CocoaPods is a dependency manager for Cocoa projects. You can install it with

Malith Nadeeshan 1 Jan 16, 2022
Fast Swift Views layouting without auto layout. No magic, pure code, full control and blazing fast. Concise syntax, intuitive, readable & chainable. [iOS/macOS/tvOS/CALayer]

Extremely Fast views layouting without auto layout. No magic, pure code, full control and blazing fast. Concise syntax, intuitive, readable & chainabl

layoutBox 2.1k Dec 22, 2022
A declarative Auto Layout DSL for Swift :iphone::triangular_ruler:

Cartography ?? ?? Using Cartography, you can set up your Auto Layout constraints in declarative code and without any stringly typing! In short, it all

Robb Böhnke 7.3k Jan 4, 2023
Lightweight Swift framework for Apple's Auto-Layout

I am glad to share with you a lightweight Swift framework for Apple's Auto-Layout. It helps you write readable and compact UI code using simple API. A

null 349 Dec 20, 2022
An Impressive Auto Layout DSL for iOS, tvOS & OSX. & It is written in pure swift.

KVConstraintKit KVConstraintKit is a DSL to make easy & impressive Auto Layout constraints on iOS, tvOS & OSX with Swift Installation Using CocoaPods

Keshav Vishwkarma 90 Sep 1, 2022
A compact but full-featured Auto Layout DSL for Swift

Mortar allows you to create Auto Layout constraints using concise, simple code statements. Use this: view1.m_right |=| view2.m_left - 12.0 Instead of:

Jason Fieldman 83 Jan 29, 2022
The ultimate API for iOS & OS X Auto Layout — impressively simple, immensely powerful. Objective-C and Swift compatible.

The ultimate API for iOS & OS X Auto Layout — impressively simple, immensely powerful. PureLayout extends UIView/NSView, NSArray, and NSLayoutConstrai

PureLayout 7.6k Jan 6, 2023
Auto Layout In Swift Made Easy

Swiftstraints Swiftstraints can turn verbose auto-layout code: let constraint = NSLayoutConstraint(item: blueView, attr

null 119 Jan 29, 2022
Yet Another Swift Auto Layout DSL

FormationLayout Documentation FormationLayout is the top level layout class for one root view. FormationLayout takes a UIView as its rootView. transla

Evan Liu 53 Mar 31, 2022
Lightweight declarative auto-layout framework for Swift

SwiftyLayout SwiftyLayout is a framework that allows to describe layout constraints (ie NSLayoutConstraint) as a simple mathematical formula in a Swif

Hisakuni Fujimoto 15 Nov 7, 2017