GUI Entwicklung für Apple iPhone und iPad

1. iOS
GUI-Entwicklung
Sebastian Meßingfeld
18.04.2013
1© FH AACHEN | Sebastian Meßingfeld

2. Inhalt
2© FH AACHEN | Sebastian Meßingfeld
• Entwicklungsumgebung
• GUI-Entwicklung
• Pointing Device
• Styleguide
• Prototyp

3. Entwicklungsumgebung
• Xcode Interface Builder
• Debugging
• Xcode
• Intruments
3© FH AACHEN | Sebastian Meßingfeld

4. Entwicklungsumgebung
Interface Builder
4© FH AACHEN | Sebastian Meßingfeld

5. Entwicklungsumgebung
Interface Builder
5© FH AACHEN | Sebastian Meßingfeld
• in Xcode enthalten
• Ermöglicht zusammenklicken der Oberfläche
• Standard UI-Elemente vorhanden
• kein manuelles editieren der Dateien vorgesehen
• Erzeugt .xib / .storyboard Dateien
• XML-basierte Beschreibung der Oberfläche
• gleich mehr ...
• Erstellung der GUI auch im Code möglich

6. Entwicklungsumgebung
Debugging - Xcode
• statische Codeanalyse
• Unit-Test-Unterstützung in Xcode enthalten
• mittels Breakpoints
• Breakpoints können geteilt werden
• im Projekt abgespeichert
• Konfiguration von Breakpoints möglich
• bedingte Breakpoints
6© FH AACHEN | Sebastian Meßingfeld

7. Entwicklungsumgebung
Debugging - Instruments
7© FH AACHEN | Sebastian Meßingfeld

8. Entwicklungsumgebung
Debugging - Instruments
8© FH AACHEN | Sebastian Meßingfeld
• automatisierte UI-Tests
• Analyse von Systemauslastungen
• CPU
• Speicher
• I/O
• Grafik (frames per second)
• Fehleranalyse
• Memory Leaks

9. GUI-Entwicklung
• Grundlegendes zur GUI-Entwicklung
• GUI-Elemente
• Art der GUI-Entwicklung
9© FH AACHEN | Sebastian Meßingfeld

10. GUI-Entwicklung
Grundlegendes zur GUI-Entwicklung
• MVC ist verwendetes Paradigma
• View: Anzeige von Daten (UI mittels GUI Builder)
• Controller: Verbindet Model und View
• Model: Datenhalterung (z.b. CoreData)
• Verknüpfung von Code und GUI Elementen
• IBOutlets: Verweise für Zugriff der UI aus Code
• IBActions: Delegate Funktionen für GUI-Events
• per Drag&Drop im Interface Builder möglich
10© FH AACHEN | Sebastian Meßingfeld

11. GUI-Entwicklung
GUI-Elemente
11© FH AACHEN | Sebastian Meßingfeld

12. GUI-Entwicklung
GUI-Elemente
12© FH AACHEN | Sebastian Meßingfeld
• Weitere (integrierte)
• Web View
• Map View
• Page View (animiertes Blättern)
• Table View
• Collection View (Grid)
• GLKit View (OpenGL)
• Viele Third-Party Erweiterungen

13. Art der GUI-Entwicklung
XIB
13© FH AACHEN | Sebastian Meßingfeld

14. Art der GUI-Entwicklung
XIB
• einzelne Views in je einer *.XIB-Datei
• Beziehung zwischen Views im Code hinterlegt
• View muss im Code erzeugt werden
*anzeige = [[ViewController alloc] initWithNibName:@“XIBDatei“ ...]
• View muss im Code angezeigt werden
[self.window.view addSubview:anzeige.view]
• View muss im Code ausgeblendet werden
• für komplexe Anwendungsstrukturen nicht
geeignet
14© FH AACHEN | Sebastian Meßingfeld

15. Art der GUI-Entwicklung
Storyboard
15© FH AACHEN | Sebastian Meßingfeld

16. Art der GUI-Entwicklung
Storyboard
• zusätzliche Erstellung von Abläufen innerhalb der
App möglich
• alle Views in einer .storyboard-Datei
• können eigenständig gestaltet werden
• können eigenen View-Controller haben
• per Drag&Drop Erstellung von Verbindung
zwischen Views
• z.B. per Button-Klick wechseln der View
• auf Wechsel der Views kann reagiert werden
• Zugriff auf Quell-, Ziel-View(-Controller) möglich
16© FH AACHEN | Sebastian Meßingfeld

17. Art der GUI-Entwicklung
Autolayout
• Constraints für Beziehung zwischen einzelnen
„Child“-Views
• erweitert bisherige Layout-Beziehung, die bisher nur
auf Basis des Parent-Views geschah
• für unterschiedliche Ausrichtungen des Geräts
• Portrait, Landscape
• für Universal (iPad/iPhone) – Apps geeignet
• ermöglicht einfache Lokalisierung
• erkennt GUI-Elemente, extrahiert Text und erstellt
Platzhalter
• Key-Value Dateien für unterschiedliche Sprachen
• Vorher: Erstellung lokalisierter Views (eig. *.XIBs ...)
• in *.XIB und *.storyboard ab iOS 6 verwendbar
17© FH AACHEN | Sebastian Meßingfeld

18. Datenübertragung zwischen Views
18© FH AACHEN | Sebastian Meßingfeld

19. Datenübertragung zwischen Views
• im Code
• Daten werden beim Übergang der Views manuell
übergeben
• im „alten“ View-Controller wird auf „neuen“ View-
Controller zugegriffen: Übergabe Werte/Objekte
• neuerController.objekt = alterController.objekt
• *.XIB
• Ablauf muss selbst definiert werden
• *.storyboard
• im Eventhandler des „Übgangs“ möglich
19© FH AACHEN | Sebastian Meßingfeld

20. Pointing Device
• Multitouch
• Gesten
20© FH AACHEN | Sebastian Meßingfeld

21. Pointing Device
Multitouch und Gesten
• ereignisgesteuerte Behandlung
• Aufruf von Handler-Methoden
• in jedem UI-Element möglich
• vordefinierte Ereignisverarbeitung in bestimmten
UI-Komponenten
• Slider: Pan (Drag & Move)
• Button: Tap (Klick)
• „System“-Gesten können nicht überschrieben
werden
• App-Wechsel
• schließen von Apps auf iPad
21© FH AACHEN | Sebastian Meßingfeld

22. Pointing Device
Multitouch
• iPhone
• gleichzeitige Erkennung bis zu 5 Fingern
• iPad
• gleichzeitige Erkennung bis zu 11 Fingern
• Zugriff auf einzelne Fingerpositionen möglich
22© FH AACHEN | Sebastian Meßingfeld

23. Pointing Device
Gesten
• Standard-Gesten im App nutzbar
• Tap
• Pinch
• Rotation
• Swipe
• Pan
• LongPress
• Erweiterung der Funktionalität von UI-
Komponenten mit Standardgesten
• „Swipe-Out“ von Tabellenzelle
• Erstellung eigener Gesten möglich
23© FH AACHEN | Sebastian Meßingfeld

24. Pointing Device
Gesten
• 1- und 2-Finger Gesten im iOS Simulator
• Pinch
• Pan
• Swipe
24© FH AACHEN | Sebastian Meßingfeld

25. Styleguide
Apple iOS Human Interface Guidelines
• detailreiche Beschreibung über die gute
Gestaltung von App
• „plattformübergreifende Best Practices“
• Betrachtung unterschiedliches Punkte
• Aufbau der Benutzeroberfläche
• Interaktion mit dem Nutzer
• Besonderheiten iOS
Link:
http://developer.apple.com/library/ios/documentation/userexperience/conceptual/mobilehig/MobileHIG.pdf
25© FH AACHEN | Sebastian Meßingfeld

26. Styleguide
Wichtige Punkte für Gestaltung der Oberfläche
• ästhetische Integrität
• an den Einsatz angepasste grafische Oberfläche
• Konsistenz
• Verwendung von Standards in der eigenen grafischen
Oberfläche
• Einheitliche Gestaltung der Benutzerführung in der
eignen App
• direkte Manipulation
• Direkte Interaktion mit Objekten, anstatt über
anderer Kontrollelemente
• z.B. bei der Bildmanipulation: Zoomen, Rotieren
26© FH AACHEN | Sebastian Meßingfeld

27. Styleguide
Wichtige Punkte für Gestaltung der Oberfläche
• Feedback
• bei jeder Aktion soll dem Nutzer ein Feedback
gegeben werden, dass ein Aktion gerade ausgeführt
wird
• Metaphern
• Beispiele aus der realen Welt verwenden
• z.B.: Dinge in Ordner ablegen, Seite umblättern ...
• Benutzerkontrolle
• nicht die App, sondern Benutzer soll Aktionen
initiieren
27© FH AACHEN | Sebastian Meßingfeld

28. Prototyp
28© FH AACHEN | Sebastian Meßingfeld

29. Sonstiges
29© FH AACHEN | Sebastian Meßingfeld

30. FH Aachen
Fachbereich Elektrotechnik & Informationstechnik
Sebastian Meßingfeld
30© FH AACHEN | Sebastian Meßingfeld