iOS: einheitliche Oberflächen mit Auto Layout
•Als PPTX, PDF herunterladen•
0 gefällt mir•508 views
Mittlerweile ist Apple mit iPad, iPhone, Apple Watch und Apple TV in vier verschiedenen Gerätekategorien vertreten. Dazu kommen teilweise noch mehrere verschiedene Bildschirmauflösungen pro Kategorie. Diese Session soll zeigen, wie man die eigene App auf diese Anforderungen vorbereiten kann und dabei trotzdem nicht alles doppelt schreiben muss. Dazu werden unter anderem die Möglichkeiten von Auto Layout näher beleuchtet – Apples Lösung, um eine einheitliche Oberfläche über alle Gerätekategorien und Auflösungen zu unterstützen.
Empfohlen
Empfohlen
Weitere ähnliche Inhalte
Was ist angesagt?
Was ist angesagt? (20)
Andere mochten auch
Andere mochten auch (11)
Ähnlich wie iOS: einheitliche Oberflächen mit Auto Layout
Ähnlich wie iOS: einheitliche Oberflächen mit Auto Layout (7)
Mehr von OPEN KNOWLEDGE GmbH
Mehr von OPEN KNOWLEDGE GmbH (20)
iOS: einheitliche Oberflächen mit Auto Layout
- 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);
- 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
- 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
- 28. Trait variation aka Size Classes #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
- 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)
- 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
- 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
Hinweis der Redaktion
- Nur Portrait
- Apples Lösung für verschiedene Screens und Orientierungen seit iOS 2 bis iOS 6 heisst AutoResizing Masks.
- Strut = Strebe Abstand zum Rand, auch Margin
- Höhe und Breite der View
- Wir haben hier unsere tolle App
- So soll die App aussehen
- So siehts leider aus! Was machen wir jetzt?
- Vorher für alle drei Views
- Oben links
- Oben rechts usw.
- So siehts jetzt aus.
- Was ist jetzt passiert?
- Intent = Absicht When you design by intent, you’re expressing what you want to accomplish but not necessarily how it should be accomplished Oberfläche beschreiben
- Beispiel für die Berechnung
- Attribute die verwendet werden können auf der rechten Seite der Formel Not an attribute ist der Wert der genutzt wird bei festen Grössen. view.height = 1.0 * Not An Attribute + 30
- Gleiche Breite für beide Views
- Abstand zwischen linker und rechter View. Die restlichen Constraints erklären! untere View: Abstand links, rechts und unten zu Super view, oben zu linker oder rechter View Obere views: oberer Abstand zu Super view Gleiche Höhe für alle Views Wenn nicht alle nötigen Constraints gesetzt sind -> Fehler!
- So solls am Ende aussehen.
- Platz nach oben normal
- Zum testen können hier die verschiedenen Device Typen durchprobiert werden
- Die Views müssen nicht nach den Constraints gezeichnet werden
- Update Frames passt die Views an. Update constraints passt die Constraints an
- Autoresizing masks einstellung
- Auto Layout einstellung
- Links und unten an der linken seite ausrichten, alternative zu leading space. Vorteil: nur ein Constraint muss geändert werden.
- Die Berechung muss am Ende immer X, Y, Höhe und Breite ergeben.
- Zu viele Constraints, entweder Breite fixed oder Abstand zum Rand
- Teilweise werden Fehler erst durch andere Bedingungen sichtbar, z.B. neuer Content oder andere Sprache => TESTEN
- Grundprinzipien von Auto Layout sind jetzt klar
- Zwei Views die sich automatisch an die Größe ihres Inhalts anpassen. Was passiert wenn die blaue View größer wird?
- Intent = Absicht When you design by intent, you’re expressing what you want to accomplish but not necessarily how it should be accomplished Oberfläche beschreiben
- Intent = Absicht When you design by intent, you’re expressing what you want to accomplish but not necessarily how it should be accomplished Oberfläche beschreiben
- sieht fast aus wie die Formel
- sieht noch natürlicher aus
- Bei vielen Constraints kann man auch per Visual Format Language Constraints definieren.
- Mit Xcode 8 werden wieder Autoresizing Masks eingeführt. Parallel mit Auto Layout nutzbar
- Intent = Absicht When you design by intent, you’re expressing what you want to accomplish but not necessarily how it should be accomplished Oberfläche beschreiben