How I Learned To Stop Worrying And Love Auto Layout

Light on slides and heavy on Xcode! We will dive into Interface Builder to explore areas of Auto Layout causing you to lose sleep at night.

Demo App Available at:
https://github.com/jonnyklemmer/360iDev2017

Transcript

1. How I Learned To Stop Worrying And Love Auto Layout @jonnyklemmer
3. who am i?
4. Client Resources Inc www.getitgreat.com
5. what are we talking about here?
6. What NOT to do …and how to fix it!
7. Avoid it.
11. Avoiding it somewhat.
13. Going overboard.
15. Don’t let yourself get MASSIVE STORYBOARD SYNDROME
17. Debugging
18. AutolayoutSampleApp[67010:16855867] [LayoutConstraints] Unable to simultaneously satisfy constraints. Probably at least one of the constraints in the following list is one you don't want. Try this: (1) look at each constraint and try to figure out which you don't expect; (2) find the code that added the unwanted constraint or constraints and fix it. ( "<NSLayoutConstraint:0x60c00009c070 UIView:0x7ff22d1009c0.width == 300 (active)>", "<NSLayoutConstraint:0x60c00009b350 UIView:0x7ff22d102390.trailingMargin == UIView: 0x7ff22d1009c0.trailing + 44 (active)>", "<NSLayoutConstraint:0x60c00009c160 UIView:0x7ff22d1009c0.leading == UIView:0x7ff22d102390.leadingMargin + 43 (active)>", "<NSLayoutConstraint:0x60c00009c930 UILayoutGuide:0x60c0001baa20'UIViewSafeAreaLayoutGuide'.trailing == UIView:0x7ff22d102390.trailing + 16 (active)>", "<NSLayoutConstraint:0x60c00009c980 UIView:0x7ff22d102390.leading == UILayoutGuide: 0x60c0001baa20'UIViewSafeAreaLayoutGuide'.leading + 16 (active)>", "<NSLayoutConstraint:0x6040000911c0 'UIView-Encapsulated-Layout-Width' UIView:0x7ff22d1001c0.width == 375 (active)>", "<NSLayoutConstraint:0x60c00009c840 'UIViewSafeAreaLayoutGuide-left' H:|-(0)-[UILayoutGuide: 0x60c0001baa20'UIViewSafeAreaLayoutGuide'](LTR) (active, names: '|':UIView:0x7ff22d1001c0 )>", "<NSLayoutConstraint:0x60c00009c8e0 'UIViewSafeAreaLayoutGuide-right' H:[UILayoutGuide: 0x60c0001baa20'UIViewSafeAreaLayoutGuide']-(0)-|(LTR) (active, names: '|':UIView:0x7ff22d1001c0 )>" ) Will attempt to recover by breaking constraint <NSLayoutConstraint:0x60c00009c070 UIView:0x7ff22d1009c0.width == 300 (active)> Make a symbolic breakpoint at UIViewAlertForUnsatisfiableConstraints to catch this in the debugger. The methods in the UIConstraintBasedLayoutDebugging category on UIView listed in <UIKit/UIView.h> may also be helpful.
19. AutolayoutSampleApp[67010:16855867] [LayoutConstraints] Unable to simultaneously satisfy constraints. Probably at least one of the constraints in the following list is one you don't want. Try this: (1) look at each constraint and try to figure out which you don't expect; (2) find the code that added the unwanted constraint or constraints and fix it. ( "<NSLayoutConstraint:0x60c00009c070 UIView:0x7ff22d1009c0.width == 300 (active)>", "<NSLayoutConstraint:0x60c00009b350 UIView:0x7ff22d102390.trailingMargin == UIView: 0x7ff22d1009c0.trailing + 44 (active)>", "<NSLayoutConstraint:0x60c00009c160 UIView:0x7ff22d1009c0.leading == UIView:0x7ff22d102390.leadingMargin + 43 (active)>", "<NSLayoutConstraint:0x60c00009c930 UILayoutGuide:0x60c0001baa20'UIViewSafeAreaLayoutGuide'.trailing == UIView:0x7ff22d102390.trailing + 16 (active)>", "<NSLayoutConstraint:0x60c00009c980 UIView:0x7ff22d102390.leading == UILayoutGuide: 0x60c0001baa20'UIViewSafeAreaLayoutGuide'.leading + 16 (active)>", "<NSLayoutConstraint:0x6040000911c0 'UIView-Encapsulated-Layout-Width' UIView:0x7ff22d1001c0.width == 375 (active)>", "<NSLayoutConstraint:0x60c00009c840 'UIViewSafeAreaLayoutGuide-left' H:|-(0)-[UILayoutGuide: 0x60c0001baa20'UIViewSafeAreaLayoutGuide'](LTR) (active, names: '|':UIView:0x7ff22d1001c0 )>", "<NSLayoutConstraint:0x60c00009c8e0 'UIViewSafeAreaLayoutGuide-right' H:[UILayoutGuide: 0x60c0001baa20'UIViewSafeAreaLayoutGuide']-(0)-|(LTR) (active, names: '|':UIView:0x7ff22d1001c0 )>" ) Will attempt to recover by breaking constraint <NSLayoutConstraint:0x60c00009c070 UIView:0x7ff22d1009c0.width == 300 (active)> Make a symbolic breakpoint at UIViewAlertForUnsatisfiableConstraints to catch this in the debugger. The methods in the UIConstraintBasedLayoutDebugging category on UIView listed in <UIKit/UIView.h> may also be helpful.
20. AutolayoutSampleApp[67010:16855867] [LayoutConstraints] Unable to simultaneously satisfy constraints. Probably at least one of the constraints in the following list is one you don't want. Try this: (1) look at each constraint and try to figure out which you don't expect; (2) find the code that added the unwanted constraint or constraints and fix it. ( "<NSLayoutConstraint:0x60c00009c070 UIView:0x7ff22d1009c0.width == 300 (active)>", "<NSLayoutConstraint:0x60c00009b350 UIView:0x7ff22d102390.trailingMargin == UIView: 0x7ff22d1009c0.trailing + 44 (active)>", "<NSLayoutConstraint:0x60c00009c160 UIView:0x7ff22d1009c0.leading == UIView:0x7ff22d102390.leadingMargin + 43 (active)>", "<NSLayoutConstraint:0x60c00009c930 UILayoutGuide:0x60c0001baa20'UIViewSafeAreaLayoutGuide'.trailing == UIView:0x7ff22d102390.trailing + 16 (active)>", "<NSLayoutConstraint:0x60c00009c980 UIView:0x7ff22d102390.leading == UILayoutGuide: 0x60c0001baa20'UIViewSafeAreaLayoutGuide'.leading + 16 (active)>", "<NSLayoutConstraint:0x6040000911c0 'UIView-Encapsulated-Layout-Width' UIView:0x7ff22d1001c0.width == 375 (active)>", "<NSLayoutConstraint:0x60c00009c840 'UIViewSafeAreaLayoutGuide-left' H:|-(0)-[UILayoutGuide: 0x60c0001baa20'UIViewSafeAreaLayoutGuide'](LTR) (active, names: '|':UIView:0x7ff22d1001c0 )>", "<NSLayoutConstraint:0x60c00009c8e0 'UIViewSafeAreaLayoutGuide-right' H:[UILayoutGuide: 0x60c0001baa20'UIViewSafeAreaLayoutGuide']-(0)-|(LTR) (active, names: '|':UIView:0x7ff22d1001c0 )>" ) Will attempt to recover by breaking constraint <NSLayoutConstraint:0x60c00009c070 UIView:0x7ff22d1009c0.width == 300 (active)> Make a symbolic breakpoint at UIViewAlertForUnsatisfiableConstraints to catch this in the debugger. The methods in the UIConstraintBasedLayoutDebugging category on UIView listed in <UIKit/UIView.h> may also be helpful.
21. AutolayoutSampleApp[67010:16855867] [LayoutConstraints] Unable to simultaneously satisfy constraints. Probably at least one of the constraints in the following list is one you don't want. Try this: (1) look at each constraint and try to figure out which you don't expect; (2) find the code that added the unwanted constraint or constraints and fix it. ( "<NSLayoutConstraint:0x60c00009c070 UIView:0x7ff22d1009c0.width == 300 (active)>", "<NSLayoutConstraint:0x60c00009b350 UIView:0x7ff22d102390.trailingMargin == UIView: 0x7ff22d1009c0.trailing + 44 (active)>", "<NSLayoutConstraint:0x60c00009c160 UIView:0x7ff22d1009c0.leading == UIView:0x7ff22d102390.leadingMargin + 43 (active)>", "<NSLayoutConstraint:0x60c00009c930 UILayoutGuide:0x60c0001baa20'UIViewSafeAreaLayoutGuide'.trailing == UIView:0x7ff22d102390.trailing + 16 (active)>", "<NSLayoutConstraint:0x60c00009c980 UIView:0x7ff22d102390.leading == UILayoutGuide: 0x60c0001baa20'UIViewSafeAreaLayoutGuide'.leading + 16 (active)>", "<NSLayoutConstraint:0x6040000911c0 'UIView-Encapsulated-Layout-Width' UIView:0x7ff22d1001c0.width == 375 (active)>", "<NSLayoutConstraint:0x60c00009c840 'UIViewSafeAreaLayoutGuide-left' H:|-(0)-[UILayoutGuide: 0x60c0001baa20'UIViewSafeAreaLayoutGuide'](LTR) (active, names: '|':UIView:0x7ff22d1001c0 )>", "<NSLayoutConstraint:0x60c00009c8e0 'UIViewSafeAreaLayoutGuide-right' H:[UILayoutGuide: 0x60c0001baa20'UIViewSafeAreaLayoutGuide']-(0)-|(LTR) (active, names: '|':UIView:0x7ff22d1001c0 )>" ) Will attempt to recover by breaking constraint <NSLayoutConstraint:0x60c00009c070 UIView:0x7ff22d1009c0.width == 300 (active)> Make a symbolic breakpoint at UIViewAlertForUnsatisfiableConstraints to catch this in the debugger. The methods in the UIConstraintBasedLayoutDebugging category on UIView listed in <UIKit/UIView.h> may also be helpful.
22. Probably at least one of the constraints in the following list is one you don't want. Try this: (1) look at each constraint and try to figure out which you don't expect; (2) find the code that added the unwanted constraint or constraints and fix it.
23. Probably at least one of the constraints in the following list is one you don't want. Try this: (1) look at each constraint and try to figure out which you don't expect; (2) find the code that added the unwanted constraint or constraints and fix it.
24. Do this instead: 2) Reason about the layout 3) Find the constraint(s) 4) Final resort: dig around in that messy stack trace 5) FINAL final resort: Reset & Redo 1) Track down the offenders &
25. <NSLayoutConstraint:0x60c000288840 'RedViewWidth' RedView.width == 300 (active, names: RedView:0x7f89d0307440 )>
26. Set the Constraint ID <NSLayoutConstraint:0x60c000288840 'RedViewWidth' RedView.width == 300 (active, names: RedView:0x7f89d0307440 )>
27. <NSLayoutConstraint:0x60c000288840 'RedViewWidth' RedView.width == 300 (active, names: RedView:0x7f89d0307440 )> Set the Accessibility ID
28. Content Hugging Compression Resistance PRIORITY (DEMO)
29. Stack Views & Size Classes (DEMO)
30. You deal with your layout once users deal with it forever.
31. Thank You!