Share

engineering

3min read

Improving iOS AutoLayout workflow

Improving iOS AutoLayout workflow

Polidea has just released PLVisualAttributeConstraints - an open-source library that improves developer’s productivity and code legibility when working with the AutoLayout.

Apple introduced the AutoLayout mechanism in iOS6. Many developers neglected to adopt it in their projects. It’s easy to perform manual layouting on iOS, where almost all the devices have the same logical resolution and problems with fragmentation are virtually nonexistent.

Should we continue to take that for granted, though? It might change in the future. Actually, we already have to support two logical resolutions (since iPhone 5’s release). What if there are more to come? The AutoLayout seems like a good tool to handle this task. Besides, is manual frame adjusting the best approach anyway?

Polidea always tries to foresee upcoming technological changes and be up to date with the latest developments. We investigated what kind of advantages the AutoLayout can bring to our everyday work. Along the way, we came up with the idea on how to further improve the AutoLayout workflow, beyond what it offers by default.

When you create Layout Constraints in code, you’ll love VFL (Visual Format Language). Creating constraints using VFL produces code that is easy to read and modify. Unfortunately, as Apple officially states:

The notation prefers good visualization over completeness of expressibility. There are constraints that cannot be expressed in visual format syntax (...) To create such a constraint, you must use

constraintWithItem:attribute:relatedBy:toItem:attribute:multiplier:constant:

This is where PLVisualAttributeConstraints enters the picture. Instead of many lines of unreadable code, you can create any constraint(s) you want using convenient methods from our lib.

In a nutshell, instead of:

 NSLayoutConstraint *constraint1 =
    [NSLayoutConstraint constraintWithItem:secondViewObj
                                 attribute:NSLayoutAttributeLeft
                                 relatedBy:NSLayoutRelationGreaterThanOrEqual
                                    toItem:firstViewObj
                                 attribute:NSLayoutAttributeLeft
                                multiplier:2
                                  constant:10];

you can use:

 NSDictionary *views = @{
          @"firstView" : firstViewObj,
          @"secondView" : secondViewObj
  };

 NSLayoutConstraint *constraint2 =
    [NSLayoutConstraint attributeConstraintWithVisualFormat:
                        @"secondView.left >= firstView.left * 2 + 10"
                                                      views:views];

Note how many lines that first approach would produce, if you were to create more than one or two constraints.

 NSArray *constraints = [NSLayoutConstraint attributeConstraintsWithVisualFormatsArray:@[
        @"secondView.left <= firstView.left - 10",
        @"secondView.right >= firstView.right + 10",
        @"secondView.top == firstView.bottom * 2.5 + 5",
    ] views:views];

If you seek a more detailed description, please refer to the project’s github page.

More features are there to come, but even now you can greatly reduce the amount of layout code by using this lib. What about AutoLayout in general? Should you use it? See it for yourself! We always keep an open mind and try to provide the best solution for a given problem.

Feedback is always welcome!

Share

Kamil

Software Engineer

Did you enjoy the read?

If you have any questions, don’t hesitate to ask!

Did you enjoy the read?

If you have any questions, don’t hesitate to ask!