nsomar/oalayoutanchor

Porting NSLayoutAnchor to iOS7 (full port)

OALayoutAnchor

OALayoutAnchor is an effort to port the amazing NSLayoutAnchor introduced in iOS 9 to iOS 7.

OALayoutAnchor is a 100% port of NSLayoutAnchor to iOS 7, it aims to provide the same functionality to iOS 7, and rollback to NSLayoutAnchor on iOS 9 and up.

Usage

To run the example project, clone the repo, and run pod install from the Example directory first.

Usage is 100% compatible with NSLayoutAnchors.:
Example Usage (Taken from apple websites):

// Creating constraints using NSLayoutConstraint
[NSLayoutConstraint
 constraintWithItem:subview
 attribute:NSLayoutAttributeLeading
 relatedBy:NSLayoutRelationEqual
 toItem:self.view
 attribute:NSLayoutAttributeLeadingMargin
 multiplier:1.0
 constant:0.0].active = YES;
 
[NSLayoutConstraint
 constraintWithItem:subview
 attribute:NSLayoutAttributeTrailing
 relatedBy:NSLayoutRelationEqual
 toItem:self.view
 attribute:NSLayoutAttributeTrailingMargin
 multiplier:1.0
 constant:0.0].active = YES;
 

The following constraint setup can be rewritten to the following:

// Creating the same constraints using Layout Anchors
UILayoutGuide *margin = self.view.layoutMarginsGuide;
 
[subview.leadingAnchor constraintEqualToAnchor:margin.leadingAnchor].active = YES;
[subview.trailingAnchor constraintEqualToAnchor:margin.trailingAnchor].active = YES;

For iOS 7, since active property is not available on NSLayoutConstraint the constraint set will be already installed. The bellow code shows the usage on iOS7:

// Creating the same constraints using Layout Anchors
UILayoutGuide *margin = self.view.layoutMarginsGuide;
 
[subview.leadingAnchor constraintEqualToAnchor:margin.leadingAnchor];
[subview.trailingAnchor constraintEqualToAnchor:margin.trailingAnchor];

For a better documentation please refer to apple docs.

Installation

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

pod "OALayoutAnchor"

Tests

There are several unit tests covering most of the Equality constraints. Unit test for covering Greater than or Lesser than are coming next.

Test are currently running for iOS 8 only, test for iOS 7 are coming next.

The following a human readable text subscript (generated with specipy).

Notes on usage in iOS 7

Since iOS7 NSLayoutConstraint does not have an active property, the category NSLayoutConstraint+SuppressActive was introduced to make the usage of the constraints transparent between iOS7 and 8.

When using the bellow line:

[label1.leadingAnchor constraintEqualToAnchor:self.view.leadingAnchor constant:20].active = YES;

On iOS 8, the returned constraint is not active until we call .active = YES on it. However, on iOS 7, since there is no active property on NSLayoutConstraint. a method has been attached to the NSLayoutConstraint to ignore the isActive method calls.

That means that calling isActive or active on iOS 7 will not crash the app, these calls will just be ignored.

Notes on usage in swift

Since anchor UIView's properties are annotated with NS_AVAILABLE_IOS(9_0);, it makes them unusable with swift when the app deployment target is less than iOS9. The compiler will not allow the usage of anchor properties without guarding against the iOS version.

if #available(iOS 9.0, *) {
    view.leftAnchor
} else {
    // Fallback on earlier versions
}

In order to target this problem, OALayoutAnchor contains a mirror of all the anchor properties. these properties are named with a prefix of oa_

var oa_leadingAnchor: NSLayoutXAxisAnchor! { get }
var oa_trailingAnchor: NSLayoutXAxisAnchor! { get }
var oa_leftAnchor: NSLayoutXAxisAnchor! { get }
... etc..

As an example, using oa_leadingAnchor in iOS 9 and up, will forward the invocation to leadingAnchor. On iOS 8 and 7, this call will use the layout anchor from OALayourAnchor.

NSLayoutConstraint active property is also unusable in swift for any iOS less than 8. In order to address this issue please use oa_active. Using oa_active will result in using active on iOS 8,9 and doing nothing on iOS 7.

This is an example in swift:

view1.oa_widthAnchor.constraintEqualToConstant(100).oa_active = true
view1.oa_heightAnchor.constraintEqualToConstant(100).oa_active = true
view1.oa_centerXAnchor.constraintEqualToAnchor(self.view.oa_centerXAnchor).oa_active = true
view1.oa_centerYAnchor.constraintEqualToAnchor(self.view.oa_centerYAnchor).oa_active = true

Future improvements

The following would be nice to have for future versions

• Increase the test coverage for Greater than and Less Than
• Better Documentation
• Add tests for iOS 7

Author

Omar Abdelhafith, [email protected]

License

OALayoutAnchor is available under the MIT license. See the LICENSE file for more info.

oalayoutanchor's Issues

Constraints not matching up on iOS 8 and iOS 9.

The same code is rendering differently on iOS 8 and 9.

It appears when analyzing the constraints, there aren't any generated on the tableView (the class is a UIViewController with a UITableView added on it) in iOS 8.

This is how it looks on iOS 9 (renders correctly).

This is how it looks on iOS 8 (renders incorrectly).

Here's the code that's used for laying out the view controller.

CGFloat const padding = 10.0f;
CGFloat const buttonHeight = 52.0f;

self.tableView.translatesAutoresizingMaskIntoConstraints = NO;
[self.tableView.leadingAnchor constraintEqualToAnchor:self.tableView.superview.leadingAnchor constant:padding].active = YES;
[self.tableView.trailingAnchor constraintEqualToAnchor:self.tableView.superview.trailingAnchor constant:-padding].active = YES;
[self.tableView.topAnchor constraintEqualToAnchor:self.tableView.superview.topAnchor constant:3*padding].active = YES;
[self.tableView.bottomAnchor constraintEqualToAnchor:self.tableView.superview.bottomAnchor constant:-3*padding].active = YES;

_loginButton = [UIButton buttonWithType:UIButtonTypeCustom];
[self.view addSubview:_loginButton];

_loginButton.translatesAutoresizingMaskIntoConstraints = NO;
[_loginButton.leadingAnchor constraintEqualToAnchor:_loginButton.superview.leadingAnchor constant:padding].active = YES;
[_loginButton.trailingAnchor constraintEqualToAnchor:_loginButton.superview.trailingAnchor constant:-padding].active = YES;
[_loginButton.bottomAnchor constraintEqualToAnchor:_loginButton.superview.bottomAnchor constant:-padding].active = YES;
[_loginButton.heightAnchor constraintEqualToConstant:buttonHeight].active = YES;

_signupButton = [UIButton buttonWithType:UIButtonTypeCustom];
[self.view addSubview:_signupButton];
_signupButton.translatesAutoresizingMaskIntoConstraints = NO;
[_signupButton.leadingAnchor constraintEqualToAnchor:_loginButton.leadingAnchor].active = YES;
[_signupButton.trailingAnchor constraintEqualToAnchor:_loginButton.trailingAnchor].active = YES;
[_signupButton.bottomAnchor constraintEqualToAnchor:_loginButton.topAnchor constant:-padding].active = YES;
[_signupButton.heightAnchor constraintEqualToAnchor:_loginButton.heightAnchor].active = YES;

_onboardingButton = [UIButton buttonWithType:UIButtonTypeCustom];
[self.view addSubview:_onboardingButton];
_onboardingButton.translatesAutoresizingMaskIntoConstraints = NO;
[_onboardingButton.leadingAnchor constraintEqualToAnchor:_signupButton.leadingAnchor].active = YES;
[_onboardingButton.trailingAnchor constraintEqualToAnchor:_signupButton.trailingAnchor].active = YES;
[_onboardingButton.bottomAnchor constraintEqualToAnchor:_signupButton.topAnchor constant:-padding].active = YES;
[_onboardingButton.heightAnchor constraintEqualToAnchor:_signupButton.heightAnchor].active = YES;

And below are the constraints generated.

The constraints generated on iOS 9 look like this:

TableView: (
    "<NSAutoresizingMaskLayoutConstraint:0x7fd71b9b9620 h=--& v=--& UIView:0x7fd71b82a3e0.midX == + 177.5>",
    "<NSAutoresizingMaskLayoutConstraint:0x7fd71b9b7ad0 h=--& v=--& H:[UIView:0x7fd71b82a3e0(355)]>",
    "<NSAutoresizingMaskLayoutConstraint:0x7fd71b9b9a10 h=--& v=--& UIView:0x7fd71b82a3e0.midY == + 32>",
    "<NSAutoresizingMaskLayoutConstraint:0x7fd71b9b84b0 h=--& v=--& V:[UIView:0x7fd71b82a3e0(64)]>"
)
Login: (
    "<NSContentSizeLayoutConstraint:0x7fd71b9bd210 H:[UIButton:0x7fd7196a1d10'Login'(55)] Hug:250 CompressionResistance:750>",
    "<NSContentSizeLayoutConstraint:0x7fd71b9bd9b0 V:[UIButton:0x7fd7196a1d10'Login'(31)] Hug:250 CompressionResistance:750>",
    "<NSLayoutConstraint:0x7fd7196a2aa0 V:[UIButton:0x7fd7196a1d10'Login'(52)]>"
)
Sign up: (
    "<NSContentSizeLayoutConstraint:0x7fd71b9be300 H:[UIButton:0x7fd7196a3410'Register'(81)] Hug:250 CompressionResistance:750>",
    "<NSContentSizeLayoutConstraint:0x7fd71b9be3a0 V:[UIButton:0x7fd7196a3410'Register'(31)] Hug:250 CompressionResistance:750>"
)
Onboarding: (
    "<NSContentSizeLayoutConstraint:0x7fd71b9be000 H:[UIButton:0x7fd7196a4da0'Picks? What's that...'(222)] Hug:250 CompressionResistance:750>",
    "<NSContentSizeLayoutConstraint:0x7fd71b9bea40 V:[UIButton:0x7fd7196a4da0'Picks? What's that...'(46)] Hug:250 CompressionResistance:750>"
)

The constraints generated on iOS 8 look like this:

TableView: (
)
Login: (
    "<NSContentSizeLayoutConstraint:0x7fd5836e1900 H:[UIButton:0x7fd585921fe0'Login'(55)] Hug:250 CompressionResistance:750>",
    "<NSContentSizeLayoutConstraint:0x7fd5836e1960 V:[UIButton:0x7fd585921fe0'Login'(31)] Hug:250 CompressionResistance:750>"
)
Sign up: (
    "<NSContentSizeLayoutConstraint:0x7fd5836a8900 H:[UIButton:0x7fd583794e90'Register'(81)] Hug:250 CompressionResistance:750>",
    "<NSContentSizeLayoutConstraint:0x7fd5836a8960 V:[UIButton:0x7fd583794e90'Register'(31)] Hug:250 CompressionResistance:750>"
)
Onboarding: (
    "<NSContentSizeLayoutConstraint:0x7fd5858109f0 H:[UIButton:0x7fd5837967c0'Picks? What's that...'(222)] Hug:250 CompressionResistance:750>",
    "<NSContentSizeLayoutConstraint:0x7fd585810a50 V:[UIButton:0x7fd5837967c0'Picks? What's that...'(46)] Hug:250 CompressionResistance:750>"
)

`layoutMarginsGuide` Support

First of all, thanks for this library! It's worked out great so far.

Now, on to the issue: To gain 100% NSLayoutAnchor support, we need access to the new layoutMarginsGuide property on UIView, which allows using NSLayoutAnchor with relative margins. This would also require adding all of the UIView guides to UILayoutAnchor for full support.

For now our workaround has been getting the layoutMargins property and calling the constraintEqualToAnchor(constant:) method with he appropriate constant for the constraint. It would be great if the library handled this to be fully compatible with NSLayoutAnchor.

Thanks!

Nil layoutAnchor

_myLabel = [[UILabel alloc] init];
_myLabel.translatesAutoresizingMaskIntoConstraints = NO;
[self.contentView addSubview:_titleLabel];

// This ends up being nil because _myLabel is an object, but it's leadingAnchor property is nil.
[_myLabel.leadingAnchor constraintEqualToAnchor:self.contentView.leadingAnchor constant:xPadding],

Both _myLabel and self.contentView are not nil.

My code keeps crashing (being put into an array) because the NSLayoutConstraint that is generated from the constraintEqualToAnchor method is nil.

Any ideas?

Can't compile on Xcode 7 beta

A new feature in Xcode 7 / Swift 2 / iOS 9 is that it compile-time checks whether you can call certain API's, including the UILayoutAnchor stuff.

So when I try to use OALayoutAnchor, which conforms to exactly the same API as the UILayoutAnchor, it (incorrectly) complains about topAnchor only being available from iOS 9...