smileyborg / uiview-autolayout

Deprecated in favor of PureLayout, which includes OS X support:

Introducing PureLayout

UIView+AutoLayout has been deprecated in favor of PureLayout, which includes OS X support!

UIView+AutoLayout

The ultimate API for iOS Auto Layout -- impressively simple, immensely powerful. Comprised of categories on UIView, NSArray, and NSLayoutConstraint.

UIView+AutoLayout provides a developer-friendly interface for the vast majority of Auto Layout use cases. It is designed for clarity and simplicity, taking inspiration from the Auto Layout UI options available in Interface Builder but delivering far more flexibility and capability. The API is also highly efficient, as it adds only a thin layer of third party code and is engineered for maximum performance (for example, by automatically adding constraints to the nearest ancestor view).

API Cheat Sheet

This is just a handy overview of the core API methods. Check out the header file for the full API and documentation. A couple notes:

• All of the API methods begin with auto... for easy autocompletion!
• All methods that generate constraints also automatically add the constraint(s) to the correct view, then return the newly created constraint(s) for you to optionally store for later adjustment or removal.
• Many methods below also have a variant which includes a relation: parameter to make the constraint an inequality.

UIView

+ autoRemoveConstraint(s):
- autoRemoveConstraintsAffectingView(AndSubviews)
+ autoSetPriority:forConstraints:
- autoSetContent(CompressionResistance|Hugging)PriorityForAxis:
- autoCenterInSuperview:
- autoAlignAxisToSuperviewAxis:
- autoPinEdgeToSuperviewEdge:withInset:
- autoPinEdgesToSuperviewEdges:withInsets:(excludingEdge:)
- autoPinEdge:toEdge:ofView:(withOffset:)
- autoAlignAxis:toSameAxisOfView:(withOffset:)
- autoMatchDimension:toDimension:ofView:(withOffset:|withMultiplier:)
- autoSetDimension(s)ToSize:
- autoConstrainAttribute:toAttribute:ofView:(withOffset:|withMultiplier:)
- autoPinTo(Top|Bottom)LayoutGuideOfViewController:withInset:

NSArray

- autoAlignViewsToEdge:
- autoAlignViewsToAxis:
- autoMatchViewsDimension:
- autoSetViewsDimension:toSize:
- autoDistributeViewsAlongAxis:withFixedSpacing:(insetSpacing:)alignment:
- autoDistributeViewsAlongAxis:withFixedSize:(insetSpacing:)alignment:

NSLayoutConstraint

- autoInstall
- autoRemove

Setup

Note: you must be developing for iOS 6.0 or later to use Auto Layout.

Using CocoaPods

1. Add the pod UIView+AutoLayout to your Podfile.

   pod 'UIView+AutoLayout'
   

2. Run pod install from Terminal, then open your app's .xcworkspace file to launch Xcode.

3. #import "UIView+AutoLayout.h" wherever you want to use the API. (Hint: adding the import to your precompiled header (.pch) file once will remove the need to import the .h file everywhere!)

That's it - now go write some beautifully simple Auto Layout code!

Manually from GitHub

1. Download the UIView+AutoLayout.h and UIView+AutoLayout.m files in the Source directory.
2. Add both files to your Xcode project.
3. #import "UIView+AutoLayout.h" wherever you want to use the API. (Hint: adding the import to your precompiled header (.pch) file once will remove the need to import the .h file everywhere!)

That's it - now go write some beautifully simple Auto Layout code!

Releases

Releases are tagged in the git commit history using semantic versioning. Check out the releases and release notes for each version.

Usage

Example Project

Check out the example project included in the repository. It contains a few demos of the API in use for various scenarios. While running the app, tap on the screen to cycle through the demos. You can rotate the device to see the constraints in action (as well as toggle the taller in-call status bar in the iOS Simulator).

Tips and Tricks

Check out some Tips and Tricks to keep in mind when using the API.

Limitations

• May need to use the NSLayoutConstraint SDK API directly for some extremely uncommon use cases

UIView+AutoLayout vs. the rest

An overview of the Auto Layout options available, ordered from the lowest- to highest-level of abstraction.

• Apple NSLayoutConstraint SDK API
  • Pros: Raw power
  • Cons: Extremely verbose, tedious to write, difficult to read
• Apple Visual Format Language
  • Pros: Concise, convenient
  • Cons: Doesn't support some use cases, incomplete compile-time checks, must learn syntax, hard to debug
• Apple Interface Builder
  • Pros: Visual, simple
  • Cons: Difficult for complex layouts, cannot dynamically set constraints at runtime, encourages hardcoded magic numbers, not always WYSIWYG
• UIView+AutoLayout
  • Pros: Simple, efficient, built directly on the iOS SDK, minimal third party code
  • Cons: Not the most concise or pure expression of layout code
• High-level layout frameworks (Masonry, KeepLayout)
  • Pros: Very clean, simple, and convenient
  • Cons: Heavy dependency on third party code, cannot mix with SDK APIs, potential compatibility issues with SDK changes, overloaded Objective-C syntax

Problems, Suggestions, Pull Requests?

Bring 'em on! :)

It's always a good idea to reach out before taking on any significant amount of changes or additions to the project. This allows everyone to get onboard with upcoming changes, ensures that changes align with the project's design philosophy, and avoids duplicated work.

I'm especially interested in hearing about any common use cases that this API does not currently address. Feel free to add feature requests (and view current work in progress) on the Feature Requests page of the wiki for this project.

Meta

Designed & maintained by Tyler Fox (@smileyborg). Distributed with the MIT license.

uiview-autolayout's Issues

Difficulty setting dimensions while distributing subviews

I'm trying to predictably set a UIView's width, and then distribute subviews within.

It seems if I try to do both, I get an irreconciliable condition.

Here is an example:

    [thisWeekView autoSetDimension:ALDimensionWidth toSize:someWidthValue];
    [thisWeekView autoDistributeSubviews:[thisWeekView subviews] alongAxis:ALAxisHorizontal withFixedSpacing:1 alignment:NSLayoutFormatAlignAllCenterY];

I then get:

Unable to simultaneously satisfy constraints...

Here is one listing of the constraints it is showing:
"<NSLayoutConstraint:0x102b2190 H:[UILabel:0x102b1f80(19.2)]>",
"<NSLayoutConstraint:0x102b3220 H:[UIView:0x102aa270(175)]>",
"<NSLayoutConstraint:0x102b32e0 H:|-(1)-[UILabel:0x102b1f80] (Names: '|':UIView:0x102aa270 )>",
"<NSLayoutConstraint:0x102b3320 H:[UILabel:0x102b1f80]-(1)-[UILabel:0x102b2200]>",
"<NSLayoutConstraint:0x102b1cb0 H:[UILabel:0x102b2200]-(1)-[UILabel:0x102b24b0]>",
"<NSLayoutConstraint:0x102b33f0 UILabel:0x102b24b0.width == UILabel:0x102b2200.width>",
"<NSLayoutConstraint:0x102b3450 H:[UILabel:0x102b24b0]-(1)-[UILabel:0x102b2760]>",
"<NSLayoutConstraint:0x102b34c0 UILabel:0x102b2760.width == UILabel:0x102b24b0.width>",
"<NSLayoutConstraint:0x102b3560 H:[UILabel:0x102b2760]-(1)-[UILabel:0x102b2a10]>",
"<NSLayoutConstraint:0x102b3590 UILabel:0x102b2a10.width == UILabel:0x102b2760.width>",
"<NSLayoutConstraint:0x102b35f0 H:[UILabel:0x102b2a10]-(1)-[UILabel:0x102b2cc0]>",
"<NSLayoutConstraint:0x102b3620 UILabel:0x102b2cc0.width == UILabel:0x102b2a10.width>",
"<NSLayoutConstraint:0x102b33b0 H:[UILabel:0x102b2cc0]-(1)-[UILabel:0x102b2f70]>",
"<NSLayoutConstraint:0x102b3480 UILabel:0x102b2f70.width == UILabel:0x102b2cc0.width>",
"<NSLayoutConstraint:0x102b3790 UILabel:0x102b2f70.trailing == UIView:0x102aa270.trailing - 1>",
"<NSLayoutConstraint:0x102b3350 UILabel:0x102b2200.width == UILabel:0x102b1f80.width>"

Basically, I have a UIView containing 7 subviews which are UILabels. I need to distribute these across the main UIView and have this main UIView a fixed size.

maybe I'm just doing this wrong...

Read me attribution

I'm not sure who Tyler Fox is, but you originally forked this from my repository (the link is correct!). My name is Rich Turton, could you correct the read me please?

Support for indirectly derived classes of UIView

Perhaps this isn't within the scope of the API, but I was hoping that certain classes such as UITextView would work out of the box. For example, in the TableViewCellWithAutoLayout sample project: when I tried switching the class of bodyLabel to UITextView and commenting out the UILabel-specific properties, the view was missing at runtime.

UITextField works, though - so that's awesome.

About the ALAxis descriptions

I couldn't quite understand why using NSLayoutAttributeCenterX to describe ALAxisVertical, why not use NSLayoutAttributeCenterY instead?

Question: UIScrollView to grow dynamically while adding views at runtime

Hey smileyborg,

First of all, congrats for your efforts developing UIView-AutoLayout. A very sincere THANK YOU!

My question is about a UIScrollView. I'm trying to do something like the Facebook Timeline, but I don't want to use UITableView in order to learn AutoLayout and also to have more freedom to customize.

I want to put an empty UIScrollView in a View Controller and, in runtime, I will add subviews with dynamic heights, but the scroll view never gets the correct contentSize height.

• Which constraints would you suggest me to add?
• Is it necessary to add Vertical Space from every added View's bottom to Scroll View bottom?

After days trying to solve these issue, I'm wondering if AutoLayout is really ready for being used purely without frames.

I appreciate your help. Thanks in advance.

can't use IBOutlet

Hi, why can't use IBOutlet with Xib, if not , How do it ...

Probably wrong axis attribute

typedef NS_ENUM(NSInteger, ALAxis) {
    ALAxisVertical = NSLayoutAttributeCenterX,      // a vertical line through the center of the view
    ALAxisHorizontal = NSLayoutAttributeCenterY,    // a horizontal line through the center of the view
    ALAxisBaseline = NSLayoutAttributeBaseline      // a horizontal line at the text baseline (not applicable to all views)
};

In the header file, ALAxisVertical = NSLayoutAttributeCenterX, is that correct, I think it suppose to be ALAxisVertical = NSLayoutAttributeCenterY,

ALAxisVertical and ALAxisHorizontal

It looks like in your code these should be swapped?

typedef NS_ENUM(NSInteger, ALAxis) {
    ALAxisVertical = NSLayoutAttributeCenterX,      // a vertical line through the center of the view
    ALAxisHorizontal = NSLayoutAttributeCenterY,    // a horizontal line through the center of the view
    ALAxisBaseline = NSLayoutAttributeBaseline      // a horizontal line at the text baseline (not applicable to all views)
};

NSArray of constraints is messy to use

Love your category, I was in the process of building my own when I ran across it. However, there is one thing that's bothering me and that is returning an NSArray of constraints from your multiple setter methods like [autoPinEdgesToSuperviewEdgesWithInsets:]. With the return of an array I need to walk the array and do some mapping to get ahold of the created constraints, like so:

NSArray * iconConstraints = [self.iconLabel autoPinEdgesToSuperviewEdgesWithInsets:UIEdgeInsetsMake(0, self.bounds.size.width - 87, -5, -3) excludingEdge:ALEdgeTop];
for (NSLayoutConstraint * constraint in iconConstraints)
{
    if (constraint.firstAttribute == NSLayoutAttributeLeading)
    {
        self.iconLeft = constraint;
    }

    if (constraint.firstAttribute == NSLayoutAttributeBottom)
    {
        self.iconBottom = constraint;
    }

    if (constraint.firstAttribute == NSLayoutAttributeTrailing)
    {
        self.iconRight = constraint;
    }
}

I've written myself a little helper to do this, but I'd much rather just have the category return the dictionary.

- (NSDictionary *)dictionaryFromConstraintsArray:(NSArray *)array
{
    NSMutableDictionary * dictionary = [NSMutableDictionary new];

    for (NSLayoutConstraint * constraint in array)
    {
        dictionary[@( constraint.firstAttribute )] = constraint;
    }

    return dictionary;
}

So I can call it like so:

NSDictionary * iconConstraints = [self dictionaryFromConstraintsArray:[self.iconLabel autoPinEdgesToSuperviewEdgesWithInsets:UIEdgeInsetsMake(0, self.bounds.size.width - 87, -5, -3) excludingEdge:ALEdgeTop]];
self.iconLeft = iconConstraints[@( ALEdgeLeading )];
self.iconBottom = iconConstraints[@( ALEdgeBottom )];
self.iconRight = iconConstraints[@( ALEdgeTrailing )];

I haven't updated your code, and made a pull request for this since it changes your API significantly and wasn't sure how you'd like to approach this. I'm more than willing to do the work if you can let me know how you think it'd fit best?

Compare with another DSL

Hi. I am contributor to Parus lib, and i want to ask you to review this lib. May be you can find some ideas how to improve your lib. Also, I have thoughts about mixing different Auto-Layout improvement libs under same core with different syntax facades. What do you think on this?

Cell height issue

Hi, I have 2 cells.

First cell - 4 labels
Second cell - 3 Labels (These 3 labels are similar to first 3 labels of first cell )

First cell has 1 more label than second cell. All other 3 labels are same. I want to use the same cell for both. But it is showing the empty space in place of 4th label. I don't want to see the empty space, what i want is that my cell should shrink if that text is empty.
Is it possible?

initForAutoLayout

...should use initWithFrame:CGRectZero over a plain init. It's not exactly the standard way of creating views like that and many views don't deal with it very well.

Cell height issue

Hi, I have 2 cells.

First cell - 4 labels
Second cell - 3 Labels (These 3 labels are similar to first 3 labels of first cell )

First cell has 1 more label than second cell. All other 3 labels are same. I want to use the same cell for both. But it is showing the empty space in place of 4th label. I don't want to see the empty space, what i want is that my cell should shrink if that text is empty.
Is it possible?

I found a bug

• (NSArray *)autoDistributeViewsAlongAxis:(ALAxis)axis withFixedSize:(CGFloat)size insetSpacing:(BOOL)shouldSpaceInsets alignment:(NSLayoutFormatOptions)alignment

then

if (shouldSpaceInsets) {
multiplier = (i * 2.0f + 2.0f) / (numberOfViews + 1.0f);
constant = (multiplier - 1.0f) * size / 2.0f;
} else {
multiplier = (i * 2.0f) / (numberOfViews - 1.0f);
constant = (-multiplier + 1.0f) * size / 2.0f;
}

when shouldSpaceInsets=NO
if i==0,then multiplier=0

Animating constraints

Once I set up constraints using UIView+Autolayout, what's the preferred method of animating a specific constraint?

memory leaks

viewcontroller use UIView-AutoLayout,when pop from Navigationcontroller,viewcontroller never call dealloc. is UIView-AutoLayout's bug?

CocoaPods Conflict. Installs different AutoLayout

There is another UIView+AutoLayout category in CocoaPods that gets installed instead of yours :)