Code Monkey home page Code Monkey logo

cartography's Introduction

Cartography 📱📐

Set up your Auto Layout constraints declaratively and without any stringly typing!

If you end up using Cartography in production, I'd love to hear from you. You can reach me through Twitter or email.

Usage

Call the layout function with your UIView or NSView instances as well as a closure in which you declare the constraints between the different attributes of your views:

layout(view1, view2) { view1, view2 in
    view1.width   == (view1.superview!.width - 50) * 0.5
    view2.width   == view1.width - 50
    view1.height  == 40
    view2.height  == view1.height
    view1.centerX == view1.superview!.centerX
    view2.centerX == view1.centerX

    view1.top >= view1.superview!.top + 20
    view2.top == view1.bottom + 20
}

For every view on the left hand side of an equality or inequality operator, Cartography will automatically set its translatesAutoresizingMaskIntoConstraints property to false. If the view is not controlled by you–for example if it belongs to a Apple-provided UIViewController class–you should take appropriate care when declaring its constraints.

Note that layout will automatically relayout the views as necessary. If you instead want to trigger the layouting step yourself, you can instead use the constrain function:

constrain(view1) { view1 in
    view1.width  == 100
    view1.height == 100
    view1.center == view.superview!.center
}

UIView.animateWithDuration(0.5, animations: view1.layoutIfNeeded)

Replacing constraints

You can capture multiple constraints in a group to then replace them with new constraints at a later point.

constrain(view) { view in
    view.width  == 100
    view.height == 100
}

let group = ConstraintGroup()

// Attach `view` to the top left corner of its superview
constrain(view, replace: group) { view in
    view.top  == view.superview!.top
    view.left == view.superview!.left
}

/* Later */

// Move the view to the bottom right corner of its superview
constrain(view, replace: group) { view in
    view.bottom == view.superview!.bottom
    view.right  == view.superview!.right
}

UIView.animateWithDuration(0.5, animations: view.layoutIfNeeded)

For convenience, the layout and constrain functions also return ConstraintGroup instances:

let group = layout(button) { button in
    button.width  == 100
    button.height == 400
}

Supported attributes

Cartography supports all built-in attributes as of iOS 8 and OS X 10.9, those are:

  • width
  • height
  • top
  • right
  • bottom
  • left
  • leading
  • trailing
  • centerX
  • centerY
  • baseline

as well as the iOS specific

  • firstBaseline
  • leftMargin
  • rightMargin
  • topMargin
  • bottomMargin
  • leadingMargin
  • trailingMargin
  • centerXWithinMargins
  • centerYWithinMargins

These can be further refined using the following operators: *, /, + and -.

Additionally, it supports convenient compound attributes that allow you to assign multiple attributes at once:

layout(view) { view in
    view.size   == view.superview!.size / 2
    view.center == view.superview!.center
}
layout(view) { view in
    view.edges == inset(view.superview!.edges, 20, 20, 40, 20)
}

Aligning multiple view

If you need to align multiple views by a common edge, you can use the align functions:

layout(view1, view2, view3) { view1, view2, view3 in
    align(top: view1, view2, view3)
}

Which is equivalent to view1.top == view2.top; view2.top == view3.top. Similar variants exist for top, right bottom, left, leading, trailing, centerX, centerY and baseline.

Distributing views evenly

For distributing multiple views, either horizontally or vertically, you can use the distribute functions:

layout(view1, view2, view3) { view1, view2, view3 in
    distribute(by: 10, horizontally: view1, view2, view3)
}

Which is equivalent to view1.trailing == view2.leading - 10; view2.trailing == view3.leading - 10.

Setting priorities

You can set the priorities of your constraints using the ~ operator:

layout(view) { view in
    view.width  >= 200 ~ 100
    view.height >= 200 ~ 100
}

Capturing constraints

Since the ==, >=, <= and ~ emit NSLayoutConstraint instances, you can capture their results if you need to refer to the layout constraints at a later time:

var width: NSLayoutConstraint?

layout(view) { view in
    width = (view.width == 200 ~ 100)
}

Note that declaring compound attributes returns multiple constraints at once:

var constraints: [NSLayoutConstraint]?

layout(view) { view in
    constraints = (view.size == view.superview!.size ~ 100)
}

Documentation

Read the documentation here. For more information, see the gh-pages branch.

Support

Please, don't hesitate to file an issue if you have questions.

About Cartography

Cartography was built by Robb Böhnke and was inspired by the excellent FLKAutoLayout by Florian Kugler.

cartography's People

Contributors

akolov avatar aral avatar devxoul avatar djben avatar garthsnyder avatar jamescmartinez avatar jessesquires avatar ken0nek avatar mono0926 avatar nschum avatar robb avatar solomon23 avatar truppelito avatar

Watchers

 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.