Weitere ähnliche Inhalte
Ähnlich wie Apple iOS - GUI Entwicklung (20)
Apple iOS - GUI Entwicklung
- 2. Inhalt
2© FH AACHEN | Sebastian Meßingfeld
• Entwicklungsumgebung
• GUI-Entwicklung
• Pointing Device
• Styleguide
• Prototyp
- 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
- 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
- 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
- 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
- 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
- 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
- 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
- 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