Einheitliche Oberflächen für iOS Auto Layout @michaelkotten @_openknowledge #WISSENTEILEN
Einheitliche Oberflächen für iOS
Auto Layout
@michaelkotten @_openknowledge #WISSENTEILEN
Michael Kotten (a.k.a. @michaelkotten)
ÜBER MICH
MK
#WISSENTEILEN
• Head of mobile development• Enterprise & Mobile • Developer & Speaker
• IOT Fan• zweifacher Vater, einfacher Ehemann
Branchenneutrale Softwareentwicklung und IT-Beratung
ÜBER OPEN KNOWLEDGE
#WISSENTEILEN
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
Wo ist das Problem?
#WISSENTEILEN
• Angezeigter Content ändert die Größe• Internationalisierung• Dynamic Type
? Interne Faktoren
Lösung ?
#WISSENTEILEN
- (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation { return (interfaceOrientation == UIInterfaceOrientationPortrait);}
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);
Autoresizing Masks
#WISSENTEILEN
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
Springs & Struts
#WISSENTEILEN
Springs & Struts
#WISSENTEILEN
Autoresizing Masks
#WISSENTEILEN
Autoresizing Masks
#WISSENTEILEN
Autoresizing Masks
#WISSENTEILEN
Autoresizing Masks
#WISSENTEILEN
Autoresizing Masks
#WISSENTEILEN
Autoresizing Masks
#WISSENTEILEN
Autoresizing Masks
#WISSENTEILEN
#WISSENTEILEN
WTF?!?!
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
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
Auto Layout
#WISSENTEILEN
Auto Layout
#WISSENTEILEN
Auto Layout
#WISSENTEILEN
Auto Layout
#WISSENTEILEN
Auto Layout
#WISSENTEILEN
Auto Layout
#WISSENTEILEN
Trait variation aka Size Classes
#WISSENTEILEN
Auto Layout
#WISSENTEILEN
Auto Korrektur
#WISSENTEILEN
Auto Korrektur
#WISSENTEILEN
Auto Layout
#WISSENTEILEN
+
Auto Layout
#WISSENTEILEN
Ausrichtung
#WISSENTEILEN
Fehlerquellen
#WISSENTEILEN
Fehlerquellen
#WISSENTEILEN
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
Auto Layout
Fehlerquellen
#WISSENTEILEN
• So wenig Constraints wie möglich, so viele Constraints wie nötig
• Fehler werden von Interface Builder nicht immer erkannt
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
Intrinsic Content Size
#WISSENTEILEN
Auto Layout
Compression Resistance
#WISSENTEILEN
• verhindert das View kleiner als Intrinsic Content Size wird
• höhere Priorität verhindert, dass View sich verkleinert
Auto Layout
Content Hugging
#WISSENTEILEN
• verhindert das View größer als Intrinsic Content Size wird
• höhere Priorität verhindert, dass View wächst
Content Hugging und Compression Resistance
#WISSENTEILEN
Content Hugging und Compression Resistance
#WISSENTEILEN
Content Hugging und Compression Resistance
#WISSENTEILEN
Programmically Auto Layout
#WISSENTEILEN
NSLayoutConstraint(item: redView, attribute: .leading, relatedBy: .equal, toItem: blueView, attribute: .trailing, multiplier: 1.0, constant: 8.0)
Programmically Auto Layout
#WISSENTEILEN
redView.leadingAnchor.constraint(equalTo: blueView.trailingAnchor, constant: 8.0)
Programmically Auto Layout
#WISSENTEILEN
let views = ["blueView" : blueView, "redView" : redView]NSLayoutConstraint.constraints(withVisualFormat: "H:[blueView]-20-[redView]", options: [], metrics: nil, views: views)
#WISSENTEILEN
What‘s next?
Autoresizing Masks
#WISSENTEILEN
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
FRAGEN
? ? ?#WISSENTEILEN
Michael KottenHead of mobile development
[email protected]+49 (0)441 4082 – 0
OFFENKUNDIGGUT
KONTAKT
#WISSENTEILEN
Icons in this presentation designed by “Freepik”, “Nice and Serious” and “Elegant Themes” from www.flaticon.com
BILDNACHWEISE
#WISSENTEILEN