Monday 30 March 2015

Tricks to debugging autolayout issues

Sometime back i started working on the autolayout overhaul for the app i am working for. The most important thing about autolayout is to be able to debug autolayout issues. Here i would like to share some tips to make debugging in autolayout easier also i will share some issues that i ran into and their possible solutions. This is the stuff that i do when i see an autolayout issue -

1. The first and the foremost thing i do is print the autolayout trace using :

 po [[UIWindow keyWindow] _autolayoutTrace]
 which in turn prints something like this :
*<UITableViewCellScrollView:0x147dcdd0>|   |   |   |   |   |   |   |   |   *<UITableViewCellContentView:0x147dd4c0>|   |   |   |   |   |   |   |   |   |   *<UIImageView:0x147dd6e0>|   |   |   |   |   |   |   |   |   |   *<UIView:0x147dead0>|   |   |   |   |   |   |   |   |   |   |   *<UILabel:0x147de590> - AMBIGUOUS LAYOUT|   |   |   |   |   |   |   |   |   |   |   *<UILabel:0x147deb60>|   |   |   |   |   |   |   |   |   |   |   *<UIButton:0x147df010>|   |   |   |   |   |   |   |   |   |   |   |   <UIImageView:0x147df150>|   |   |   |   |   |   |   |   |   |   |   <UIImageView:0x147df930>|   |   |   |   |   |   |   |   |   |   |   <UIImageView:0x147df9e0>|   |   |   |   |   |   |   |   |   |   |   *<UILabel:0x147ef780>|   |   |   |   |   |   |   |   |   |   *<UIView:0x147dd790>|   |   |   |   |   |   |   |   |   |   *<UIView:0x147ddb20>|   |   |   |   |   |   |   |   |   |   *<UIImageView:0x147dde80>

The memory addresses do not tell a whole lot about which view is ambiguous.

2. Now to reflect in the UI which view is ambiguous i use the exceptional xcode debugger. I get to know about the view by changing its background color.
For eg.
(lldb) e (void)[0x147de590 setBackgroundColor:(UIColor*)[UIColor greenColor]]
Then i have a brilliant library integrated in the debugger namely chisel (Chisel Github) which provides with command namely caflush and many other useful commands, caflush basically repaints your UI and hence you immediately see the green color reflected on your screen.
For eg.
(lldb) caflush
OR 

3. I try to print the superView's recursive description which gives me a fair idea which view is ambiguous by matching the address with the autolayoutTrace
For eg.
(lldb) [0x147dcdd0 recursiveDescription]

4.  I have run into multiple issues time and again when animating views using autolayout, one of the issues i ran into was when table view cells were animating unnecessarily when some other view was animating in the view controller's view. The problem was that i did not follow apple guidelines and tried to be extra smart, i.e.,
             [self.view layoutIfNeeded];     //I missed this line                     self.postStatusViewTopConstraint.constant = [self.topLayoutGuide length];            [UIView animateWithDuration:ANIMATION_HIDE_BUTTONS_TIME                             animations:^{
                                 [self.view layoutIfNeeded];  
                          } completion: NULL];

Basically what was happening  was that the table view cells were about to appear and their layout was pending and at the same time i used to animate postStatusViewTopConstraint which lead to tableView cells getting animated. Apple suggests using layoutIfNeeded before animating to wrap up any pending layout changes.

5. I run into unsatisfiable constraints repeatedly when working with various views. More often then not i can get away with reducing the priority of one of the constraints to solve the issue.

6. When using multiple table view cells having different layouts i prefer having different reuse identifiers. This helps me in adding sub-views selectively to the table view cell. (Adding sub-views and not adding their constraints usually leads to a lot of ambiguity)

7. One hard learnt lesson is that calculation table view cell's height using autolayout by calculating its content view size (using systemLayoutSizeFittingSize)  slows down the performance on lower end devices. Hence for the time begin i prefer pre-calculating the heights for different types of table view cells.

Further Readings:
a. How Autolayout Works?
b. Using debugger
c. Apple Autolayout
d. Download Chisel

Hope this article helps someone :)

4 comments: