Coder Social home page Coder Social logo

tinyconstraints's Introduction

Tiny Constraints

tl;dr Nothing but sugar.

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

Features

  • Shortest possible syntax for creating layout constraints.
  • Constraints are active by default.
  • 100% compatible with Auto Layout.
  • Optionally store your constraints.
  • Set constraint priorities upon creation.
  • Stack views together with one line of code.

Examples

Edges

Attaching a view to its superview with NSLayoutConstraint:

NSLayoutConstraint.activate([
    view.topAnchor.constraint(equalTo: superview.topAnchor, constant: 0),
    view.leadingAnchor.constraint(equalTo: superview.leadingAnchor, constant: 0),
    view.bottomAnchor.constraint(equalTo: superview.bottomAnchor, constant: 0),
    view.trailingAnchor.constraint(equalTo: superview.trailingAnchor, constant: 0)
])

with Tiny Constraints:

view.edges(to: superview)

or:

view.edges(to: superview, insets: UIEdgeInsets(top: 10, left: 10, bottom: 0, right: 0))

Center

Constraining the center of a view to its superview with NSLayoutConstraint:

NSLayoutConstraint.activate([
	view.centerXAnchor.constraint(equalTo: superview.centerXAnchor, constant: 0)
	view.centerYAnchor.constraint(equalTo: superview.centerYAnchor, constant: 0)
])

with Tiny Constraints:

view.center(in: superview)

or:

view.center(in: superview, offset: CGPoint(x: 10, y: 10))

Basic Use

Typealiases

Tiny Constraints gives you convenient and tiny typealiases for handling constraints.

  • Constraint = NSLayoutConstraint
  • Constraints = [NSLayoutConstraint]

Equal and Unequal Anchors

This constraints the top-anchor of the view to the top-anchor of the superview.

view.top(to: superview)

This constraints the top-anchor of the view to the bottom-anchor of the superview.

view.top(to: superview, superview.bottomAnchor)

Storing Constraints

Here we create a set of inactive constraints and store these to our property.

let constraints = view.size(CGSize(width: 100, height: 100), isActive: false)

Activation and Deactivation

Besides the default NSLayoutConstraint activation, Tiny Constraints also provides a way to activate a set of constraints.

constraints.activate()

You can also do this in an animation:

oldConstraints.deActivate()

constraints.activate()
UIViewPropertyAnimator(duration: 1, dampingRatio: 0.4) {
    self.layoutIfNeeded()
}.startAnimation()

Animating Constraint Constants

Here we add a height constraint to a view, store it and animate it later.

let height = view.height(100)

height.constant = 200
UIViewPropertyAnimator(duration: 1, dampingRatio: 0.4) {
    self.layoutIfNeeded()
}.startAnimation()

Stack

Stack provides a way of constraining views together in a superview.

let views = [logo, title, description]
superview.stack(views, axis: .vertical, spacing: 10)

#####Find these examples and more in the Example Project.

Installation

CocoaPods

TinyConstraints is available through CocoaPods. To install it, simply add the following line to your Podfile:

pod "TinyConstraints"

Carthage

TinyConstraints is available through Carthage. To install it, simply add the following line to your Cartfile:

github "roberthein/TinyConstraints"

Suggestions or feedback?

Feel free to create a pull request, open an issue or find me on Twitter.

tinyconstraints's People

Contributors

lutzifer avatar roberthein avatar danielgalasko avatar

Watchers

James Cloos avatar Prigozhenkov Maxim avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.