Michael Kotten thematisiert die Herausforderungen und Lösungen im Zusammenhang mit Auto Layout für iOS, einschließlich der Handhabung verschiedener Displaygrößen, Auflösungen und Gerätekategorien. Er beschreibt die Vorteile von Auto Layout im Vergleich zu autoresizing masks sowie die Bedeutung von Constraints, um relative Größen und Positionen von Views zu definieren. Zudem werden Fehlerquellen im Auto Layout und Tipps zum Umgang mit ihnen diskutiert.

1. Einheitliche Oberflächen für iOS
Auto Layout
@michaelkotten @_openknowledge #WISSENTEILEN

2. Michael Kotten (a.k.a. @michaelkotten)
ÜBER MICH
MK
#WISSENTEILEN
• Head of mobile development
• Enterprise & Mobile
• Developer & Speaker
• IOT Fan
• zweifacher Vater, einfacher Ehemann

3. Branchenneutrale Softwareentwicklung und IT-Beratung
ÜBER OPEN KNOWLEDGE
#WISSENTEILEN

4. Wo ist das Problem?
#WISSENTEILEN
• User dreht das Device
• Verschiedene Displaygrößen und
Auflösungen
• Unterschiedliche Geräteklassen (iPhone,
iPad)
• Split View (iPad)
• Statusbar bei aktivem Anruf oder GPS
? Äußere Faktoren

5. Wo ist das Problem?
#WISSENTEILEN
• Angezeigter Content ändert die Größe
• Internationalisierung
• Dynamic Type
? Interne Faktoren

6. Lösung ?
#WISSENTEILEN
- (BOOL)shouldAutorotateToInterfaceOrientation:
(UIInterfaceOrientation)interfaceOrientation {
return (interfaceOrientation == UIInterfaceOrientationPortrait);
}

7. Lösung ?
#WISSENTEILEN
BOOL isIPhone = [[UIDevice currentDevice] userInterfaceIdiom] ==
UIUserInterfaceIdiomPhone;
BOOL isIPhone4 = isIPhone && ([[UIScreen mainScreen] bounds].size.height > 480.0);
BOOL isIPhone5 = isIPhone4 && ([[UIScreen mainScreen] bounds].size.height > 960.0);
BOOL isIPhone6 = isIPhone5 && ([[UIScreen mainScreen] bounds].size.height > 1136.0);
BOOL isIPhone6plus = isIPhone6 && ([[UIScreen mainScreen] bounds].size.height > 1334.0);

8. Autoresizing Masks
#WISSENTEILEN

9. Autoresizing Masks
#WISSENTEILEN
• Definiert das Resizing Verhalten einer View
• Relativ zur Superview
• Einstellung für
• Höhe und Breite
• Abstand zum Rand
• Mögliche Werte sind
• fixed
• flexible

10. Springs & Struts
#WISSENTEILEN

11. Springs & Struts
#WISSENTEILEN

12. Autoresizing Masks
#WISSENTEILEN

13. Autoresizing Masks
#WISSENTEILEN

14. Autoresizing Masks
#WISSENTEILEN

15. Autoresizing Masks
#WISSENTEILEN

16. Autoresizing Masks
#WISSENTEILEN

17. Autoresizing Masks
#WISSENTEILEN

18. Autoresizing Masks
#WISSENTEILEN

19. #WISSENTEILEN
WTF?!?!

20. Autoresizing Masks
Probleme mit Autoresizing Masks
#WISSENTEILEN
• Autoresize wird automatisch berechnet,
kann nicht beinflusst werden
• Keine Beziehung zu Nachbar-Views
• Kann programmatisch korrigiert werden
• Großer Aufwand bei versch. Auflösungen

21. Auto Layout
Auto Layout to the rescue
#WISSENTEILEN
• Beziehung zwischen einzelnen Views
• Relative Größen und Positionen
• Design by intent
• „Mathematische“ Beschreibung
• Wird definiert durch Constraints
• Benötigt Constraints für Größe und Position

22. Auto Layout
#WISSENTEILEN

23. Auto Layout
#WISSENTEILEN

24. Auto Layout
#WISSENTEILEN

25. Auto Layout
#WISSENTEILEN

26. Auto Layout
#WISSENTEILEN

27. Auto Layout
#WISSENTEILEN

28. Trait variation aka Size Classes
#WISSENTEILEN

29. Auto Layout
#WISSENTEILEN

30. Auto Korrektur
#WISSENTEILEN

31. Auto Korrektur
#WISSENTEILEN

32. Auto Layout
#WISSENTEILEN
+

33. Auto Layout
#WISSENTEILEN

34. Ausrichtung
#WISSENTEILEN

35. Fehlerquellen
#WISSENTEILEN

36. Fehlerquellen
#WISSENTEILEN

37. Fehlerquellen
#WISSENTEILEN
2016-08-19 13:38:21.101780 AutoLayout[94041:23616079] [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:0x60000008b220 UIView:0x7f8ea0709c90.width == 288 (active)>"
)
Will attempt to recover by breaking constraint

38. Auto Layout
Fehlerquellen
#WISSENTEILEN
• So wenig Constraints wie möglich, so viele
Constraints wie nötig
• Fehler werden von Interface Builder nicht
immer erkannt

39. Auto Layout
Intrinsic Content Size
#WISSENTEILEN
• „Innere“ Größe
• Für bestimmte Controls wie z.B. Button oder
Label
• Control bestimmt seine Größe selbst
• Kann überschrieben werden
• Betrifft nur das Control selbst

40. Intrinsic Content Size
#WISSENTEILEN

41. Auto Layout
Compression Resistance
#WISSENTEILEN
• verhindert das View kleiner als Intrinsic
Content Size wird
• höhere Priorität verhindert, dass View sich
verkleinert

42. Auto Layout
Content Hugging
#WISSENTEILEN
• verhindert das View größer als Intrinsic
Content Size wird
• höhere Priorität verhindert, dass View wächst

43. Content Hugging und Compression Resistance
#WISSENTEILEN

44. Content Hugging und Compression Resistance
#WISSENTEILEN

45. Content Hugging und Compression Resistance
#WISSENTEILEN

46. Programmically Auto Layout
#WISSENTEILEN
NSLayoutConstraint(item: redView, attribute: .leading, relatedBy: .equal, toItem: blueView,
attribute: .trailing, multiplier: 1.0, constant: 8.0)

47. Programmically Auto Layout
#WISSENTEILEN
redView.leadingAnchor.constraint(equalTo: blueView.trailingAnchor, constant: 8.0)

48. Programmically Auto Layout
#WISSENTEILEN
let views = ["blueView" : blueView, "redView" : redView]
NSLayoutConstraint.constraints(withVisualFormat: "H:[blueView]-20-[redView]", options: [], metrics: nil, views: views)

49. #WISSENTEILEN
What‘s next?

50. Autoresizing Masks
#WISSENTEILEN

51. Auto Layout
Zusammenfassung
#WISSENTEILEN
• Beziehung zwischen einzelnen Views
• Relative Größen und Positionen
• Design by intent
• „Mathematische“ Beschreibung
• Wird definiert durch Constraints
• Benötigt Constraints für Größe und Position

52. FRAGEN
? ? ?
#WISSENTEILEN

53. Michael Kotten
Head of mobile development
michael.kotten@openknowledge.de
+49 (0)441 4082 – 0
OFFENKUNDIGGUT
KONTAKT
#WISSENTEILEN

54. Icons in this presentation designed by “Freepik”, “Nice and
Serious” and “Elegant Themes” from www.flaticon.com
BILDNACHWEISE
#WISSENTEILEN