Git Product home page Git Product logo

anchorage's Introduction

Anchorage

Swift 2.x + 3.0 Version Carthage compatible

A lightweight collection of intuitive operators and utilities that simplify iOS layout code. Anchorage is built directly on top of the NSLayoutAnchor API, so fully supports UILayoutGuide. Each expression acts on one or more NSLayoutAnchors, and returns active NSLayoutConstraints.

Usage

Spacing

// Pin the button to at least 12 pts from the edges of its container view, and center it
button.leftAnchor    >= container.leftAnchor + 12
button.centerXAnchor == container.centerXAnchor
button.centerYAnchor == container.centerYAnchor

Sizing

// Constrain a view's width to be at most 100 pts
view.widthAnchor <= 100

// Constrain two views to be the same size
view1.widthAnchor  == view2.widthAnchor
view1.heightAnchor == view2.heightAnchor

// Constrain view to 4:3 aspect ratio
view.widthAnchor == 4 * view.heightAnchor / 3

Composite Anchors

// Constrain the leading, trailing, top and bottom edges to be equal
imageView.edgeAnchors == container.edgeAnchors

// Inset the leading and trailing anchors by 10
imageView.horizontalAnchors >= container.horizontalAnchors + 10

// Inset the top and bottom anchors by 10
imageView.verticalAnchors >= container.verticalAnchors + 10

The composite anchors create multiple constraints across one or two axis. Anchorage is smart about mapping these expressions to make them easy to work with.

Use leading and trailing

Using leftAnchor and rightAnchor is rarely needed. To encourage this, horizontalAnchors and edgeAnchors use the leadingAnchor and trailingAnchor layout anchors.

Inset instead of Shift

When constraining two sides of an axis, it is far more common to work in terms of an inset from the edges instead of shifting both edges in the same direction. When building the expression, Anchorage will flip the relationship and invert the constant in the constraint on the far side of the axis. This makes the expressions much more natural to work with.

Priority

Priority of NSLayoutConstraints must be set before they are active. The ~ is used to specify priority of the constraint resulting from an equation:

// Align view 20 points from the center of its superview, with low priority
view.centerXAnchor == view.superview.centerXAnchor + 20 ~ .low

The layout priority is an enum with the following values:

  • .required - UILayoutPriorityRequired (default)
  • .high - UILayoutPriorityDefaultHigh
  • .low - UILayoutPriorityDefaultLow
  • .fittingSize - UILayoutPriorityFittingSizeLevel
  • .custom(UILayoutPriority) - you can specify any float

These map to the UILayoutPriorityDefaultLow, UILayoutPriorityDefaultHigh, and UILayoutPriorityRequired constants, but you may specify any Float for a priority value.

Storing Constraints

To store constraints created by Anchorage, simply assign the expression to a variable:

// A single (active) NSLayoutConstraint
let topConstraint = (imageView.topAnchor == container.topAnchor)

// EdgeConstraints represents a collection of constraints
// You can retrieve the NSLayoutConstraints individually,
// or get an [NSLayoutConstraint] via .all, .horizontal, or .vertical
let edgeConstraints = (button.edgeAnchors == container.edgeAnchors).all

Autoresizing Mask

Anchorage sets the translatesAutoresizingMaskIntoConstraints property to false on the left hand side of the expression, so you should never need to set this property manually. This is important to be aware of in case the container view relies on translatesAutoresizingMaskIntoConstraints being set to true. We tend to keep child views on the left hand side of the expression to avoid this problem, especially when constraining to a system supplied view.

Installation

CocoaPods

CocoaPods is a dependency manager for Cocoa projects. You can install it with the following command:

$ gem install cocoapods

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

platform :ios, '9.0'
use_frameworks!

target '<Your Target Name>' do
  pod 'Anchorage', '~> 3.0'
end

Then, run the following command:

$ pod install

Carthage

Carthage is a decentralized dependency manager that builds your dependencies and provides you with binary frameworks.

You can install Carthage with Homebrew using the following commands:

$ brew update
$ brew install carthage

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

github "Raizlabs/Anchorage" ~> 3.0

Run carthage update to build the framework and drag the built Anchorage.framework into your Xcode project.

License

This code and tool is under the MIT License. See LICENSE file in this repository.

Any ideas and contributions welcome!

anchorage's People

Contributors

ahtierney avatar jvisenti avatar jwatson avatar kingofbrian avatar mattprowse avatar robcadwallader avatar yonaskolb avatar

Watchers

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