AutoLayoutKit in pure Swift.

Overview

GitHub release CircleCI Carthage compatible CocoaPods Swift GitHub license Gitmoji

Manuscript: Dead-Simple AutoLayout

It's like AutoLayoutKit but written in Swift. For pure Swift projects. And it's super simple.

Features

  • concise, simple and convenient API
  • raw AutoLayout power
  • no black magic involved
  • fully documented
  • completely unit-tested

Have a look at the Changelog for more details.

Requirements

  • iOS 8.0+
  • Xcode 8.x
  • Swift 3.1

Bonus: Support for iOS 7.0+ and/or tvOS

Although the cocoapods isn't able to install Manuscript for your iOS 7.0+ app or for your tvOS app (yet), you can use still Manuscript. Just follow the 'manual' installation or add Manuscript as a framework project to your workspace (that's what I do).

What it looks like

Manuscript.layout(myButton) { c in
  c.set(.Height, to: 60.0)
  c.set(.Width, to: 60.0)
  c.make(.Bottom, equalTo: self.view, s: .Bottom, minus: 10.0)
  c.make(.CenterX, equalTo: self.view, s: .CenterX)
}

Usage

A few examples on how to use Manuscript.

Center and set size

Center a UIView 'childView' in self.view and make it 30 by 30 in size

Manuscript.layout(childView) { c in
  c.make(.CenterX, equalTo: view, s: .CenterX)
  c.make(.CenterY, equalTo: view, s: .CenterY)
  c.set(.Width, to: 30.0)
  c.set(.Height, to: 30.0)
}

The same, but using the convenience methods

Manuscript.layout(childView) { c in
  c.centerIn(view)
  c.setSize(CGSize(width: 30.0, height: 30.0))
}

Align all edges of a view to a superview

Align a UIView 'container' to all edges of self.view

Manuscript.layout(container) { c in
  c.make(.Left, equalTo: view, s: .Left)
  c.make(.Right, equalTo: view, s: .Right)
  c.make(.Top, equalTo: view, s: .Top)
  c.make(.Bottom, equalTo: view, s: .Bottom)
}

The same, but using the convenience methods

Manuscript.layout(container) { c in
  c.alignAllEdges(to: view)
}

Align all sides with insets

Align a UIView 'container' to all edges of self.view and leave a 30 point margin around the container.

Manuscript.layout(container) { c in
  c.make(.Left, equalTo: view, s: .Left, plus: 30.0)
  c.make(.Right, equalTo: view, s: .Right, minus: 30.0)
  c.make(.Top, equalTo: view, s: .Top, plus: 30.0)
  c.make(.Bottom, equalTo: view, s: .Bottom, minus: 30.0)
}

The same, but using convenience methods.

Manuscript.layout(container) { c in
  c.alignAllEdges(to: view, withInsets: UIEdgeInsets(top: 30.0, left: 30.0, bottom: 30.0, right: 30.0))
}

Use LayoutGuides

Make use of the LayoutGuides provided by UIViewController.

Manuscript.layout(container) { c in
  c.make(.Left, equalTo: view, s: .Left)
  c.make(.Right, equalTo: view, s: .Right)
  c.make(.Top, equalTo: topLayoutGuide, s: .Baseline)
  c.make(.Bottom, equalTo: bottomLayoutGuide, s: .Baseline)
}

Hairlines

There is a utility method to create hairlines which takes the screen scale into account.

Manuscript.layout(mySeparatorLine) { c in
  c.make(.Left, equalTo: view, s: .Left)
  c.make(.Right, equalTo: view, s: .Right)
  c.make(.Top, equalTo: topLayoutGuide, s: .Baseline)

  // sets the .Height to 1.0 on non-retina displays and to 0.5 on retina displays
  c.makeHorizontalHairline()
}

Work with the created Layout Constraints

The functions make and set return a tuple of type LayoutItem which translates to (constraint: NSLayoutConstraint?, targetItem: UIView?). The 'constraint' is the created NSLayoutConstraint, the 'targetItem' is the view to which the NSLayoutConstraint was added. It is the nearest common superview of the UIViews involved.

Manuscript.layout(container) { c in
  leftConstaint = c.make(.Left, equalTo: view, s: .Left).constraint
  rightConstaint = c.make(.Right, equalTo: view, s: .Right).constraint
  topConstaint = c.make(.Top, equalTo: topLayoutGuide, s: .Baseline).constraint
  bottomConstaint = c.make(.Bottom, equalTo: bottomLayoutGuide, s: .Baseline).constraint
}

Afterwards, just modify the constraint's constant and apply the changes (this is plain AutoLayout).

UIView.animateWithDuration(0.6) { in
  topConstraint?.constant = 100
  view.layoutIfNeeded()
}

Convenience Methods

The convenience methods return arrays of the mentioned tuples. These will be dictionaries or tuples in the future as well to provide easier access to the created constraints. Until then, check the code for the order of the returned constraints.

Installation

As for now, you can use Carthage or CocoaPods to install Manuscript using a dependency manager or do it manually.

Carthage

To integrate Manuscript into your Xcode project using Carthage, specify it in your Cartfile:

github "floriankrueger/Manuscript"

If you need to support Swift 2.3 then please use the last compatible version 2.1.0

github "floriankrueger/Manuscript" == 2.1.0

If you need to support Swift 3.0 then please use the last compatible version 3.0.1

github "floriankrueger/Manuscript" == 3.0.1

If your Swift 3.1 compiler isn't compatible with the framework binary from the github release then please use the following command to build Manuscript yourself:

carthage bootstrap Manuscript --no-use-binaries

CocoaPods

Make sure your Podfile contains all of the following lines.

use_frameworks!
platform :ios, '8.0'

pod 'Manuscript'

Then run pod install.

Manually

To do it 'by hand' take the following files and add them to your project:

  • Source/Manuscript.swift
  • Source/LayoutProxy.swift

License

Manuscript is released under the MIT License.

You might also like...
A powerful Swift programmatic UI layout framework.
A powerful Swift programmatic UI layout framework.

Build dynamic and beautiful user interfaces like a boss, with Swift. Neon is built around how user interfaces are naturally and intuitively designed.

Simple static table views for iOS in Swift.
Simple static table views for iOS in Swift.

Simple static table views for iOS in Swift. Static's goal is to separate model data from presentation. Rows and Sections are your “view models” for yo

A declarative Auto Layout DSL for Swift :iphone::triangular_ruler:
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

A Swift port of the Cassowary linear constraint solver

Cassowary Swift A Swift port of the Cassowary linear constraints solver. Tested on OS X, iOS and Linux. Example usage let solver = Solver() let left

An easy way to create and layout UI components for iOS (Swift version).
An easy way to create and layout UI components for iOS (Swift version).

Introduction Cupcake is a framework that allow you to easily create and layout UI components for iOS 8.0+. It use chaining syntax and provides some fr

Lightweight Swift framework for Apple's Auto-Layout
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

A compact but full-featured Auto Layout DSL for Swift
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:

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. 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

A Swift Autolayout DSL for iOS & OS X
A Swift Autolayout DSL for iOS & OS X

SnapKit is a DSL to make Auto Layout easy on both iOS and OS X. ⚠️ To use with Swift 4.x please ensure you are using = 4.0.0 ⚠️ ⚠️ To use with Swift

Comments
  • Floats instead of CGFloat

    Floats instead of CGFloat

    Regular constraints use CGFloats, whereas yours use Floats, and the two are not interchangeable because of type safety. Is there any way, other than redefining my variables, that I can use this class? Our designer uses an 8-point grid, and I have a constant called 'margin' defined at the top level as CGFloat

    otherwise love the library

    opened by alexpopov 5
  • Correct the spelling of CocoaPods in README

    Correct the spelling of CocoaPods in README

    This pull requests corrects the spelling of CocoaPods 🤓 https://github.com/CocoaPods/shared_resources/tree/master/media

    Created with cocoapods-readme.

    opened by ReadmeCritic 0
  • Strong reference to `targetItem` in `LayoutItem` can cause memory leak

    Strong reference to `targetItem` in `LayoutItem` can cause memory leak

    The LayoutItem tuple contains a strong reference to the targetItem view. This can cause a memory retain cycle if the view itself maintains a strong reference to the layout item tuple.

    https://github.com/floriankrueger/Manuscript/blob/bb21c1c164bff9cc0fcd5b362752e125e013b324/Sources/LayoutItem.swift#L34

    Maybe a possible fix would be to make LayoutItem a final class with a weak reference to targetItem.

    Of course the necessity of LayoutItem is questionable in the first place, because the layout constraint already has a unowned (!) reference to the two parties participating in the constraint (firstItem, secondItem).

    opened by t089 0
Releases(3.0.3)
Owner
Florian Krüger
Software Developer & Enthusiast; Caffeine-Based Lifeform
Florian Krüger
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
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

Daniel Huri 243 Oct 28, 2022
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]

layoutBox 2.1k Jan 2, 2023
MisterFusion is Swift DSL for AutoLayout. It is the extremely clear, but concise syntax, in addition, can be used in both Swift and Objective-C. Support Safe Area and Size Class.

MisterFusion MisterFusion makes more easier to use AutoLayout in Swift & Objective-C code. Features Simple And Concise Syntax Use in Swift and Objecti

Taiki Suzuki 316 Nov 17, 2022
VidyoPlatform Basic CustomLayouts Reference App for iOS (Swift)VidyoPlatform Basic CustomLayouts Reference App for iOS (Swift)

VidyoPlatform Basic CustomLayouts Reference App for iOS (Swift) VidyoPlatform reference application highlighting how to integrate video chat into a na

Taras Melko 0 Nov 19, 2021
100-days-swift-project-8 - The eighth project from 100 days of Swift course

7 Swifty Words This is the eighth project from Hacking With Swift 100 days of Sw

Bruno Guirra 0 Jan 24, 2022
SwiftLanguageWeather-master - Swift Language Weather is an iOS weather app developed in Swift 4

Swift Language Weather SwiftWeather has renamed to Swift Language Weather. Becau

Kushal Shingote 1 Feb 5, 2022
Fancy Swift implementation of the Visual Format Language (experimental and doesn't work with the recent version of Swift)

VFLToolbox Autolayout is awesome! VFL a.k.a Visual Format Language is even more awesome because it allows you to shorten constraints setting code. The

0xc010d 144 Jun 29, 2022
BrickKit is a delightful layout library for iOS and tvOS. It is written entirely in Swift!

BrickKit is a delightful layout library for iOS and tvOS. It is written entirely in Swift! Deprecated BrickKit is being phased out at Wayfair, and the

Wayfair Tech – Archive 608 Sep 15, 2022
FlexLayout adds a nice Swift interface to the highly optimized facebook/yoga flexbox implementation. Concise, intuitive & chainable syntax.

FlexLayout adds a nice Swift interface to the highly optimized Yoga flexbox implementation. Concise, intuitive & chainable syntax. Flexbox is an incre

layoutBox 1.7k Dec 30, 2022