ios: einheitliche oberflächen mit auto layout
TRANSCRIPT
![Page 1: iOS: einheitliche Oberflächen mit Auto Layout](https://reader034.vdocuments.site/reader034/viewer/2022042604/58a34b831a28ab62248b6761/html5/thumbnails/1.jpg)
Einheitliche Oberflächen für iOS
Auto Layout
@michaelkotten @_openknowledge #WISSENTEILEN
![Page 2: iOS: einheitliche Oberflächen mit Auto Layout](https://reader034.vdocuments.site/reader034/viewer/2022042604/58a34b831a28ab62248b6761/html5/thumbnails/2.jpg)
Michael Kotten (a.k.a. @michaelkotten)
ÜBER MICH
MK
#WISSENTEILEN
• Head of mobile development• Enterprise & Mobile • Developer & Speaker
• IOT Fan• zweifacher Vater, einfacher Ehemann
![Page 3: iOS: einheitliche Oberflächen mit Auto Layout](https://reader034.vdocuments.site/reader034/viewer/2022042604/58a34b831a28ab62248b6761/html5/thumbnails/3.jpg)
Branchenneutrale Softwareentwicklung und IT-Beratung
ÜBER OPEN KNOWLEDGE
#WISSENTEILEN
![Page 4: iOS: einheitliche Oberflächen mit Auto Layout](https://reader034.vdocuments.site/reader034/viewer/2022042604/58a34b831a28ab62248b6761/html5/thumbnails/4.jpg)
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
![Page 5: iOS: einheitliche Oberflächen mit Auto Layout](https://reader034.vdocuments.site/reader034/viewer/2022042604/58a34b831a28ab62248b6761/html5/thumbnails/5.jpg)
Wo ist das Problem?
#WISSENTEILEN
• Angezeigter Content ändert die Größe• Internationalisierung• Dynamic Type
? Interne Faktoren
![Page 6: iOS: einheitliche Oberflächen mit Auto Layout](https://reader034.vdocuments.site/reader034/viewer/2022042604/58a34b831a28ab62248b6761/html5/thumbnails/6.jpg)
Lösung ?
#WISSENTEILEN
- (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation { return (interfaceOrientation == UIInterfaceOrientationPortrait);}
![Page 7: iOS: einheitliche Oberflächen mit Auto Layout](https://reader034.vdocuments.site/reader034/viewer/2022042604/58a34b831a28ab62248b6761/html5/thumbnails/7.jpg)
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);
![Page 8: iOS: einheitliche Oberflächen mit Auto Layout](https://reader034.vdocuments.site/reader034/viewer/2022042604/58a34b831a28ab62248b6761/html5/thumbnails/8.jpg)
Autoresizing Masks
#WISSENTEILEN
![Page 9: iOS: einheitliche Oberflächen mit Auto Layout](https://reader034.vdocuments.site/reader034/viewer/2022042604/58a34b831a28ab62248b6761/html5/thumbnails/9.jpg)
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
![Page 10: iOS: einheitliche Oberflächen mit Auto Layout](https://reader034.vdocuments.site/reader034/viewer/2022042604/58a34b831a28ab62248b6761/html5/thumbnails/10.jpg)
Springs & Struts
#WISSENTEILEN
![Page 11: iOS: einheitliche Oberflächen mit Auto Layout](https://reader034.vdocuments.site/reader034/viewer/2022042604/58a34b831a28ab62248b6761/html5/thumbnails/11.jpg)
Springs & Struts
#WISSENTEILEN
![Page 12: iOS: einheitliche Oberflächen mit Auto Layout](https://reader034.vdocuments.site/reader034/viewer/2022042604/58a34b831a28ab62248b6761/html5/thumbnails/12.jpg)
Autoresizing Masks
#WISSENTEILEN
![Page 13: iOS: einheitliche Oberflächen mit Auto Layout](https://reader034.vdocuments.site/reader034/viewer/2022042604/58a34b831a28ab62248b6761/html5/thumbnails/13.jpg)
Autoresizing Masks
#WISSENTEILEN
![Page 14: iOS: einheitliche Oberflächen mit Auto Layout](https://reader034.vdocuments.site/reader034/viewer/2022042604/58a34b831a28ab62248b6761/html5/thumbnails/14.jpg)
Autoresizing Masks
#WISSENTEILEN
![Page 15: iOS: einheitliche Oberflächen mit Auto Layout](https://reader034.vdocuments.site/reader034/viewer/2022042604/58a34b831a28ab62248b6761/html5/thumbnails/15.jpg)
Autoresizing Masks
#WISSENTEILEN
![Page 16: iOS: einheitliche Oberflächen mit Auto Layout](https://reader034.vdocuments.site/reader034/viewer/2022042604/58a34b831a28ab62248b6761/html5/thumbnails/16.jpg)
Autoresizing Masks
#WISSENTEILEN
![Page 17: iOS: einheitliche Oberflächen mit Auto Layout](https://reader034.vdocuments.site/reader034/viewer/2022042604/58a34b831a28ab62248b6761/html5/thumbnails/17.jpg)
Autoresizing Masks
#WISSENTEILEN
![Page 18: iOS: einheitliche Oberflächen mit Auto Layout](https://reader034.vdocuments.site/reader034/viewer/2022042604/58a34b831a28ab62248b6761/html5/thumbnails/18.jpg)
Autoresizing Masks
#WISSENTEILEN
![Page 19: iOS: einheitliche Oberflächen mit Auto Layout](https://reader034.vdocuments.site/reader034/viewer/2022042604/58a34b831a28ab62248b6761/html5/thumbnails/19.jpg)
#WISSENTEILEN
WTF?!?!
![Page 20: iOS: einheitliche Oberflächen mit Auto Layout](https://reader034.vdocuments.site/reader034/viewer/2022042604/58a34b831a28ab62248b6761/html5/thumbnails/20.jpg)
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
![Page 21: iOS: einheitliche Oberflächen mit Auto Layout](https://reader034.vdocuments.site/reader034/viewer/2022042604/58a34b831a28ab62248b6761/html5/thumbnails/21.jpg)
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
![Page 22: iOS: einheitliche Oberflächen mit Auto Layout](https://reader034.vdocuments.site/reader034/viewer/2022042604/58a34b831a28ab62248b6761/html5/thumbnails/22.jpg)
Auto Layout
#WISSENTEILEN
![Page 23: iOS: einheitliche Oberflächen mit Auto Layout](https://reader034.vdocuments.site/reader034/viewer/2022042604/58a34b831a28ab62248b6761/html5/thumbnails/23.jpg)
Auto Layout
#WISSENTEILEN
![Page 24: iOS: einheitliche Oberflächen mit Auto Layout](https://reader034.vdocuments.site/reader034/viewer/2022042604/58a34b831a28ab62248b6761/html5/thumbnails/24.jpg)
Auto Layout
#WISSENTEILEN
![Page 25: iOS: einheitliche Oberflächen mit Auto Layout](https://reader034.vdocuments.site/reader034/viewer/2022042604/58a34b831a28ab62248b6761/html5/thumbnails/25.jpg)
Auto Layout
#WISSENTEILEN
![Page 26: iOS: einheitliche Oberflächen mit Auto Layout](https://reader034.vdocuments.site/reader034/viewer/2022042604/58a34b831a28ab62248b6761/html5/thumbnails/26.jpg)
Auto Layout
#WISSENTEILEN
![Page 27: iOS: einheitliche Oberflächen mit Auto Layout](https://reader034.vdocuments.site/reader034/viewer/2022042604/58a34b831a28ab62248b6761/html5/thumbnails/27.jpg)
Auto Layout
#WISSENTEILEN
![Page 28: iOS: einheitliche Oberflächen mit Auto Layout](https://reader034.vdocuments.site/reader034/viewer/2022042604/58a34b831a28ab62248b6761/html5/thumbnails/28.jpg)
Trait variation aka Size Classes
#WISSENTEILEN
![Page 29: iOS: einheitliche Oberflächen mit Auto Layout](https://reader034.vdocuments.site/reader034/viewer/2022042604/58a34b831a28ab62248b6761/html5/thumbnails/29.jpg)
Auto Layout
#WISSENTEILEN
![Page 30: iOS: einheitliche Oberflächen mit Auto Layout](https://reader034.vdocuments.site/reader034/viewer/2022042604/58a34b831a28ab62248b6761/html5/thumbnails/30.jpg)
Auto Korrektur
#WISSENTEILEN
![Page 31: iOS: einheitliche Oberflächen mit Auto Layout](https://reader034.vdocuments.site/reader034/viewer/2022042604/58a34b831a28ab62248b6761/html5/thumbnails/31.jpg)
Auto Korrektur
#WISSENTEILEN
![Page 32: iOS: einheitliche Oberflächen mit Auto Layout](https://reader034.vdocuments.site/reader034/viewer/2022042604/58a34b831a28ab62248b6761/html5/thumbnails/32.jpg)
Auto Layout
#WISSENTEILEN
+
![Page 33: iOS: einheitliche Oberflächen mit Auto Layout](https://reader034.vdocuments.site/reader034/viewer/2022042604/58a34b831a28ab62248b6761/html5/thumbnails/33.jpg)
Auto Layout
#WISSENTEILEN
![Page 34: iOS: einheitliche Oberflächen mit Auto Layout](https://reader034.vdocuments.site/reader034/viewer/2022042604/58a34b831a28ab62248b6761/html5/thumbnails/34.jpg)
Ausrichtung
#WISSENTEILEN
![Page 35: iOS: einheitliche Oberflächen mit Auto Layout](https://reader034.vdocuments.site/reader034/viewer/2022042604/58a34b831a28ab62248b6761/html5/thumbnails/35.jpg)
Fehlerquellen
#WISSENTEILEN
![Page 36: iOS: einheitliche Oberflächen mit Auto Layout](https://reader034.vdocuments.site/reader034/viewer/2022042604/58a34b831a28ab62248b6761/html5/thumbnails/36.jpg)
Fehlerquellen
#WISSENTEILEN
![Page 37: iOS: einheitliche Oberflächen mit Auto Layout](https://reader034.vdocuments.site/reader034/viewer/2022042604/58a34b831a28ab62248b6761/html5/thumbnails/37.jpg)
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
![Page 38: iOS: einheitliche Oberflächen mit Auto Layout](https://reader034.vdocuments.site/reader034/viewer/2022042604/58a34b831a28ab62248b6761/html5/thumbnails/38.jpg)
Auto Layout
Fehlerquellen
#WISSENTEILEN
• So wenig Constraints wie möglich, so viele Constraints wie nötig
• Fehler werden von Interface Builder nicht immer erkannt
![Page 39: iOS: einheitliche Oberflächen mit Auto Layout](https://reader034.vdocuments.site/reader034/viewer/2022042604/58a34b831a28ab62248b6761/html5/thumbnails/39.jpg)
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
![Page 40: iOS: einheitliche Oberflächen mit Auto Layout](https://reader034.vdocuments.site/reader034/viewer/2022042604/58a34b831a28ab62248b6761/html5/thumbnails/40.jpg)
Intrinsic Content Size
#WISSENTEILEN
![Page 41: iOS: einheitliche Oberflächen mit Auto Layout](https://reader034.vdocuments.site/reader034/viewer/2022042604/58a34b831a28ab62248b6761/html5/thumbnails/41.jpg)
Auto Layout
Compression Resistance
#WISSENTEILEN
• verhindert das View kleiner als Intrinsic Content Size wird
• höhere Priorität verhindert, dass View sich verkleinert
![Page 42: iOS: einheitliche Oberflächen mit Auto Layout](https://reader034.vdocuments.site/reader034/viewer/2022042604/58a34b831a28ab62248b6761/html5/thumbnails/42.jpg)
Auto Layout
Content Hugging
#WISSENTEILEN
• verhindert das View größer als Intrinsic Content Size wird
• höhere Priorität verhindert, dass View wächst
![Page 43: iOS: einheitliche Oberflächen mit Auto Layout](https://reader034.vdocuments.site/reader034/viewer/2022042604/58a34b831a28ab62248b6761/html5/thumbnails/43.jpg)
Content Hugging und Compression Resistance
#WISSENTEILEN
![Page 44: iOS: einheitliche Oberflächen mit Auto Layout](https://reader034.vdocuments.site/reader034/viewer/2022042604/58a34b831a28ab62248b6761/html5/thumbnails/44.jpg)
Content Hugging und Compression Resistance
#WISSENTEILEN
![Page 45: iOS: einheitliche Oberflächen mit Auto Layout](https://reader034.vdocuments.site/reader034/viewer/2022042604/58a34b831a28ab62248b6761/html5/thumbnails/45.jpg)
Content Hugging und Compression Resistance
#WISSENTEILEN
![Page 46: iOS: einheitliche Oberflächen mit Auto Layout](https://reader034.vdocuments.site/reader034/viewer/2022042604/58a34b831a28ab62248b6761/html5/thumbnails/46.jpg)
Programmically Auto Layout
#WISSENTEILEN
NSLayoutConstraint(item: redView, attribute: .leading, relatedBy: .equal, toItem: blueView, attribute: .trailing, multiplier: 1.0, constant: 8.0)
![Page 47: iOS: einheitliche Oberflächen mit Auto Layout](https://reader034.vdocuments.site/reader034/viewer/2022042604/58a34b831a28ab62248b6761/html5/thumbnails/47.jpg)
Programmically Auto Layout
#WISSENTEILEN
redView.leadingAnchor.constraint(equalTo: blueView.trailingAnchor, constant: 8.0)
![Page 48: iOS: einheitliche Oberflächen mit Auto Layout](https://reader034.vdocuments.site/reader034/viewer/2022042604/58a34b831a28ab62248b6761/html5/thumbnails/48.jpg)
Programmically Auto Layout
#WISSENTEILEN
let views = ["blueView" : blueView, "redView" : redView]NSLayoutConstraint.constraints(withVisualFormat: "H:[blueView]-20-[redView]", options: [], metrics: nil, views: views)
![Page 49: iOS: einheitliche Oberflächen mit Auto Layout](https://reader034.vdocuments.site/reader034/viewer/2022042604/58a34b831a28ab62248b6761/html5/thumbnails/49.jpg)
#WISSENTEILEN
What‘s next?
![Page 50: iOS: einheitliche Oberflächen mit Auto Layout](https://reader034.vdocuments.site/reader034/viewer/2022042604/58a34b831a28ab62248b6761/html5/thumbnails/50.jpg)
Autoresizing Masks
#WISSENTEILEN
![Page 51: iOS: einheitliche Oberflächen mit Auto Layout](https://reader034.vdocuments.site/reader034/viewer/2022042604/58a34b831a28ab62248b6761/html5/thumbnails/51.jpg)
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
![Page 52: iOS: einheitliche Oberflächen mit Auto Layout](https://reader034.vdocuments.site/reader034/viewer/2022042604/58a34b831a28ab62248b6761/html5/thumbnails/52.jpg)
FRAGEN
? ? ?#WISSENTEILEN
![Page 53: iOS: einheitliche Oberflächen mit Auto Layout](https://reader034.vdocuments.site/reader034/viewer/2022042604/58a34b831a28ab62248b6761/html5/thumbnails/53.jpg)
Michael KottenHead of mobile development
[email protected]+49 (0)441 4082 – 0
OFFENKUNDIGGUT
KONTAKT
#WISSENTEILEN
![Page 54: iOS: einheitliche Oberflächen mit Auto Layout](https://reader034.vdocuments.site/reader034/viewer/2022042604/58a34b831a28ab62248b6761/html5/thumbnails/54.jpg)
Icons in this presentation designed by “Freepik”, “Nice and Serious” and “Elegant Themes” from www.flaticon.com
BILDNACHWEISE
#WISSENTEILEN