11/02/2017 iOS Auto Layout Debugging Trick @yeradis

iOS Auto Layout Debugging Trick

Posted by on June 17, 2016

Debugging Auto Layout issues in most cases can be easy, but there are some times that this is not the case.

Specially when there is a complicated layout and your friend the unsatis able layout error is making your day
a pleasure xD

Mainly because you (and me) dont understand that log printed in the console.

Because, lets be honest, having a memory address reference plus the Auto Layout Visual Format Language is not
something human readable (Not if you came from another languages, where the developer experience is
better)

So, before you close this page, let me tell you the trick: accesibilityIdentifier and contraint identifier
property.

As simple as that, use those properties and your printed log will turn into something almost friendly xD

Let me show you some examples.

Before using the accesibiltyIdentifier property and without constraint identifier :

1 2016-06-16 10:22:24.414 QNChat[90514:8499728] Unable to simultaneously satisfy constraints.

2 Probably at least one of the constraints in the following list is one you don't want.
3 Try this:

4 (1) look at each constraint and try to figure out which you don't expect;

5 (2) find the code that added the unwanted constraint or constraints and fix it.

6 (
7 "<NSLayoutConstraint:0x7f82038d3ca0 V:|-(33)-[UILabel:0x7f82039ca670'iPhone Simulator-1:\n2 - t...'] (Names: '|':UIView:0x7f8201617b80 )>",

8 "<NSLayoutConstraint:0x7f8201669ee0 V:[UILabel:0x7f82039ca670'iPhone Simulator-1:\n2 - t...']-(29)-| (Names: '|':UIView:0x7f8201617b80 )>",

9 "<NSLayoutConstraint:0x7f8201690990 UITableViewCellContentView:0x7f8201454460.topMargin == UIView:0x7f8201617b80.top>",

10 "<NSLayoutConstraint:0x7f8201694000 UITableViewCellContentView:0x7f8201454460.bottomMargin == UIView:0x7f8201617b80.bottom>",

11 "<NSLayoutConstraint:0x7f8201661a00 V:[UILabel:0x7f82039ca670'iPhone Simulator-1:\n2 - t...'(>=121)]>",

12 "<NSLayoutConstraint:0x7f8203985ab0 'UIView-Encapsulated-Layout-Height' V:[UITableViewCellContentView:0x7f8201454460(199)]>"

13 )
14
15 Will attempt to recover by breaking constraint

16 <NSLayoutConstraint:0x7f8201661a00 V:[UILabel:0x7f82039ca670'iPhone Simulator-1:

17 2 - t...'(>=121)]>

view raw
(https://gist.github.com/yeradis/b9f3faf340765339af0fb09a0ecd9dfc/raw/7244afc02146242eee0ceb61fb67e18f72926391/autolayout_error_before_accesibilityIdentifier.log)
autolayout_error_before_accesibilityIdentifier.log (https://gist.github.com/yeradis/b9f3faf340765339af0fb09a0ecd9dfc#fileautolayout_error_before_accesibilityidentifier
log) hosted with by GitHub (https://github.com)

After applying some accesibilityIdentifier :

1 2016-06-16 10:17:54.528 QNChat[90242:8483681] Unable to simultaneously satisfy constraints.

2 Probably at least one of the constraints in the following list is one you don't want.

3 Try this:

http://www.yeradis.com/debugging-autolayout-trick 1/5
 11/02/2017 iOS Auto Layout Debugging Trick @yeradis
4 (1) look at each constraint and try to figure out which you don't expect;

5 (2) find the code that added the unwanted constraint or constraints and fix it.
6 (

7 "<NSLayoutConstraint:0x7fb2451f8d70 V:|-(33)-[cell_contentLabel] (Names: cell_contentLabel:0x7fb24530e6b0, cell_box:0x7fb242d0ff10, '|':cell_b

8 "<NSLayoutConstraint:0x7fb2453001a0 V:[cell_contentLabel]-(29)-| (Names: cell_box:0x7fb242d0ff10, cell_contentLabel:0x7fb24530e6b0, '|':cell_b

9 "<NSLayoutConstraint:0x7fb24507d2e0 UITableViewCellContentView:0x7fb242e604d0.topMargin == cell_box.top (Names: cell_box:0x7fb242d0ff10 )>",

10 "<NSLayoutConstraint:0x7fb245089e90 UITableViewCellContentView:0x7fb242e604d0.bottomMargin == cell_box.bottom (Names: cell_box:0x7fb242d0ff10

11 "<NSLayoutConstraint:0x7fb2450251e0 V:[cell_contentLabel(>=86.3333)] (Names: cell_contentLabel:0x7fb24530e6b0 )>",

12 "<NSLayoutConstraint:0x7fb2453537d0 'UIView-Encapsulated-Layout-Height' V:[UITableViewCellContentView:0x7fb242e604d0(164.333)]>"

13 )
14
15 Will attempt to recover by breaking constraint
16 <NSLayoutConstraint:0x7fb2450251e0 V:[cell_contentLabel(>=86.3333)] (Names: cell_contentLabel:0x7fb24530e6b0 )>

view raw
(https://gist.github.com/yeradis/b9f3faf340765339af0fb09a0ecd9dfc/raw/7244afc02146242eee0ceb61fb67e18f72926391/autolayout_error_after_accesibilityIdentifier.log)
autolayout_error_after_accesibilityIdentifier.log (https://gist.github.com/yeradis/b9f3faf340765339af0fb09a0ecd9dfc#fileautolayout_error_after_accesibilityidentifierlog)
hosted with by GitHub (https://github.com)

Now, lets use the constraint identifier property:

1 2016-06-16 10:28:10.826 QNChat[90865:8520702] Unable to simultaneously satisfy constraints.

2 Probably at least one of the constraints in the following list is one you don't want.
3 Try this:
4 (1) look at each constraint and try to figure out which you don't expect;
5 (2) find the code that added the unwanted constraint or constraints and fix it.
6 (

7 "<NSLayoutConstraint:0x7fbe004f5a30 'id10' UITableViewCellContentView:0x7fbe004bc6e0.bottomMargin == cell_box.bottom (Names: cell_box:0x7fbe00

8 "<NSLayoutConstraint:0x7fbe028161e0 'id15' V:[cell_box(>=183)] (Names: cell_box:0x7fbe004c0000 )>",
9 "<NSLayoutConstraint:0x7fbe004ec860 'id6' UITableViewCellContentView:0x7fbe004bc6e0.topMargin == cell_box.top (Names: cell_box:0x7fbe004c0000
10 "<NSLayoutConstraint:0x7fbe028476b0 'UIView-Encapsulated-Layout-Height' V:[UITableViewCellContentView:0x7fbe004bc6e0(199)]>"
11 )

12
13 Will attempt to recover by breaking constraint
14 <NSLayoutConstraint:0x7fbe028161e0 'id15' V:[cell_box(>=183)] (Names: cell_box:0x7fbe004c0000 )>

gist.github.com/yeradis/b9f3faf340765339af0fb09a0ecd9dfc/raw/7244afc02146242eee0ceb61fb67e18f72926391/autolayout_error_after_accesibilityIdentifierAndContraintIdentifier.log)
autolayout_error_after_accesibilityIdentifierAndContraintIdentifier.log (https://gist.github.com/yeradis/b9f3faf340765339af0fb09a0ecd9dfc#file
autolayout_error_after_accesibilityidentifierandcontraintidentifierlog) hosted with by GitHub (https://github.com)

Really nice, right?

Another nice thing we get using these properties, is that we can search in XCode for those identi ers :3

But lets go deeper.

What about the Visual Format Language

(https://developer.apple.com/library/prerelease/content/documentation/UserExperience/Conceptual/AutolayoutPG/
CH27-SW3) ?

1 2016-06-17 23:05:13.817 QNChat[16948:11377878] Unable to simultaneously satisfy constraints.

2 Probably at least one of the constraints in the following list is one you don't want.

3 Try this:
4 (1) look at each constraint and try to figure out which you don't expect;
5 (2) find the code that added the unwanted constraint or constraints and fix it.
6 (

7 "<NSLayoutConstraint:0x7fc045aa5c50 cell_avatar.top == cell_box.top (Names: cell_avatar:0x7fc0436f76e0, cell_box:0x7fc0436676c0 )>",

8 "<NSLayoutConstraint:0x7fc045ab8fb0 'id1' UITableViewCellContentView:0x7fc043693f90.topMargin == cell_avatar.top (Names: cell_avatar:0x7fc0436

9 "<NSLayoutConstraint:0x7fc0436eee00 'id10' UITableViewCellContentView:0x7fc043693f90.bottomMargin == cell_box.bottom (Names: cell_box:0x7fc043
10 "<NSLayoutConstraint:0x7fc0459d9d60 'id15' V:[cell_box(<=83)] (Names: cell_box:0x7fc0436676c0 )>",
11 "<NSLayoutConstraint:0x7fc0436e4300 'UIView-Encapsulated-Layout-Height' V:[UITableViewCellContentView:0x7fc043693f90(285.667)]>"

12 )

13
14 Will attempt to recover by breaking constraint
15 <NSLayoutConstraint:0x7fc0459d9d60 'id15' V:[cell_box(<=83)] (Names: cell_box:0x7fc0436676c0 )>

http://www.yeradis.com/debugging-autolayout-trick 2/5
11/02/2017 iOS Auto Layout Debugging Trick @yeradis

view raw
(https://gist.github.com/yeradis/b9f3faf340765339af0fb09a0ecd9dfc/raw/7244afc02146242eee0ceb61fb67e18f72926391/autolayout_error_before_category.log)
autolayout_error_before_category.log (https://gist.github.com/yeradis/b9f3faf340765339af0fb09a0ecd9dfc#fileautolayout_error_before_categorylog) hosted with by
GitHub (https://github.com)

Having something like :

<NSLayoutConstraint:0x7fc0459d9d60 'id15' V:[cell_box(<=83)] (Names: cell_box:0x7fc0436676c0 )>

Is something i think that can be improved and this is what i see now:

1 2016-06-17 23:10:43.964 QNChat[17383:11384401] Unable to simultaneously satisfy constraints.

2 Probably at least one of the constraints in the following list is one you don't want.

3 Try this:
4 (1) look at each constraint and try to figure out which you don't expect;
5 (2) find the code that added the unwanted constraint or constraints and fix it.
6 (
7 "<NSLayoutConstraint:0x7fdb9da6c5c0 UIImageView:cell_avatar[0x7fdb9dba8700].top == UIView:cell_box[0x7fdb9b543e60].top>",

8 "<NSLayoutConstraint:id1[0x7fdb9b5f5580] UITableViewCellContentView:0x7fdb9b5001c0.topMargin == UIImageView:cell_avatar[0x7fdb9dba8700].top>",

9 "<NSLayoutConstraint:id10[0x7fdb9b5f7b20] UITableViewCellContentView:0x7fdb9b5001c0.bottomMargin == UIView:cell_box[0x7fdb9b543e60].bottom>",
10 "<NSLayoutConstraint:id15[0x7fdb9b5cd8d0] UIView:cell_box[0x7fdb9b543e60].height <= 83>",
11 "<NSLayoutConstraint:UIView-Encapsulated-Layout-Height[0x7fdb9da7da40] UITableViewCellContentView:0x7fdb9b5001c0.height == 285.667>"
12 )

13
14 Will attempt to recover by breaking constraint
15 <NSLayoutConstraint:id15[0x7fdb9b5cd8d0] UIView:cell_box[0x7fdb9b543e60].height <= 83>

view raw (https://gist.github.com/yeradis/b9f3faf340765339af0fb09a0ecd9dfc/raw/7244afc02146242eee0ceb61fb67e18f72926391/autolayout_error_after_category.log)

autolayout_error_after_category.log (https://gist.github.com/yeradis/b9f3faf340765339af0fb09a0ecd9dfc#fileautolayout_error_after_categorylog) hosted with by
GitHub (https://github.com)

Dont know about you, but for me having this:

<NSLayoutConstraint:id15[0x7fdb9b5cd8d0] UIView:cell_box[0x7fdb9b543e60].height <= 83>

Its something better.

Also, just in case, the address reference is there, but is something that can be removed.

I was able to get that format thanks to a category available in Mansonry (https://github.com/SnapKit/Masonry)

Specially the category that allows to override the NSLayoutConstraint description .

Check this: https://github.com/SnapKit/Masonry#when-thehits-the-fan

(https://github.com/SnapKit/Masonry#when-the--hits-the-fan)

But my interest was only related to override that console output to make it friendly.

So, in case you want to use it without depending on Mansonry , you can get a modi ed version available at:
https://github.com/yeradis/objetivec-steroids (https://github.com/yeradis/objetivec-steroids)

And thats all folks.

PREVIOUS POST (/ALTERNATIVE-DELEGATE-TESTING)

http://www.yeradis.com/debugging-autolayout-trick 3/5
11/02/2017 iOS Auto Layout Debugging Trick @yeradis

Related Posts
Speed up iOS tests using an alternative application delegate 10 Jun 2016 (/alternative-delegate-testing)
Adopting Fastlane for automating our daily iOS developements tasks 04 May 2016 (/adopting-fastlane-
automatization)
Authentication Challenge with multiple in-house certi cate authorities in iOS with Swift 28 Mar 2016
(/swift-authentication-challenge)

0 Comments @yeradis yeradis

Sort by Best
Recommend Share

Start the discussion

Be the rst to comment.

ALSO ON @YERADIS

Standalone Flask WSGI running under Tornado , Twisted or Built- PhoneGap framework supporting 7 mobile platforms
in server 1 comment 4 years ago
1 comment 4 years ago hire phonegap developer Phonegap is providing library system. That
Julien Kaumann Thanks a lot for this ! library system can helpful for all mobile devices like android, ios, and
windows and other.

Hello Red Hat OpenShift !!! Bye bye Google App Engine! Importing/Migrating Subversion repository with all its revision
2 comments 4 years ago history to Git - Bitbucket
Kailuo Tao and test result is...? 9 comments 4 years ago
Jessica Kerr Thanks! My blog post is quite new compared to this one.
Perhaps it'll gain ranking over time.I find it useful too, in fact I'm using it
as reference

Subscribe d Add Disqus to your site Add Disqus Add Privacy

(/atom.xml)

(https://twitter.com/yeradis)

(https://www.facebook.com/yeradis)

(https://github.com/yeradis)

(http://www.linkedin.com/in/yeradis)

Copyright @yeradis 2016

http://www.yeradis.com/debugging-autolayout-trick 4/5