iOS
GUI-Entwicklung
Sebastian Meßingfeld
18.04.2013
1© FH AACHEN | Sebastian Meßingfeld
Inhalt
2© FH AACHEN | Sebastian Meßingfeld
•  Entwicklungsumgebung
•  GUI-Entwicklung
•  Pointing Device
•  Styleguide
•  ...
Entwicklungsumgebung
•  Xcode Interface Builder
•  Debugging
•  Xcode
•  Intruments
3© FH AACHEN | Sebastian Meßingfeld
Entwicklungsumgebung
Interface Builder
4© FH AACHEN | Sebastian Meßingfeld
Entwicklungsumgebung
Interface Builder
5© FH AACHEN | Sebastian Meßingfeld
•  in Xcode enthalten
•  Ermöglicht zusammenkli...
Entwicklungsumgebung
Debugging - Xcode
•  statische Codeanalyse
•  Unit-Test-Unterstützung in Xcode enthalten
•  mittels B...
Entwicklungsumgebung
Debugging - Instruments
7© FH AACHEN | Sebastian Meßingfeld
Entwicklungsumgebung
Debugging - Instruments
8© FH AACHEN | Sebastian Meßingfeld
•  automatisierte UI-Tests
•  Analyse von...
GUI-Entwicklung
•  Grundlegendes zur GUI-Entwicklung
•  GUI-Elemente
•  Art der GUI-Entwicklung
9© FH AACHEN | Sebastian M...
GUI-Entwicklung
Grundlegendes zur GUI-Entwicklung
•  MVC ist verwendetes Paradigma
•  View: Anzeige von Daten (UI mittels ...
GUI-Entwicklung
GUI-Elemente
11© FH AACHEN | Sebastian Meßingfeld
GUI-Entwicklung
GUI-Elemente
12© FH AACHEN | Sebastian Meßingfeld
•  Weitere (integrierte)
•  Web View
•  Map View
•  Page...
Art der GUI-Entwicklung
XIB
13© FH AACHEN | Sebastian Meßingfeld
Art der GUI-Entwicklung
XIB
•  einzelne Views in je einer *.XIB-Datei
•  Beziehung zwischen Views im Code hinterlegt
•  Vi...
Art der GUI-Entwicklung
Storyboard
15© FH AACHEN | Sebastian Meßingfeld
Art der GUI-Entwicklung
Storyboard
•  zusätzliche Erstellung von Abläufen innerhalb der
App möglich
•  alle Views in einer...
Art der GUI-Entwicklung
Autolayout
•  Constraints für Beziehung zwischen einzelnen
„Child“-Views
•  erweitert bisherige La...
Datenübertragung zwischen Views
18© FH AACHEN | Sebastian Meßingfeld
Datenübertragung zwischen Views
•  im Code
•  Daten werden beim Übergang der Views manuell
übergeben
•  im „alten“ View-Co...
Pointing Device
•  Multitouch
•  Gesten
20© FH AACHEN | Sebastian Meßingfeld
Pointing Device
Multitouch und Gesten
•  ereignisgesteuerte Behandlung
•  Aufruf von Handler-Methoden
•  in jedem UI-Eleme...
Pointing Device
Multitouch
•  iPhone
•  gleichzeitige Erkennung bis zu 5 Fingern
•  iPad
•  gleichzeitige Erkennung bis zu...
Pointing Device
Gesten
•  Standard-Gesten im App nutzbar
•  Tap
•  Pinch
•  Rotation
•  Swipe
•  Pan
•  LongPress
•  Erwei...
Pointing Device
Gesten
•  1- und 2-Finger Gesten im iOS Simulator
•  Pinch
•  Pan
•  Swipe
24© FH AACHEN | Sebastian Meßin...
Styleguide
Apple iOS Human Interface Guidelines
•  detailreiche Beschreibung über die gute
Gestaltung von App
•  „plattfor...
Styleguide
Wichtige Punkte für Gestaltung der Oberfläche
•  ästhetische Integrität
•  an den Einsatz angepasste grafische ...
Styleguide
Wichtige Punkte für Gestaltung der Oberfläche
•  Feedback
•  bei jeder Aktion soll dem Nutzer ein Feedback
gege...
Prototyp
28© FH AACHEN | Sebastian Meßingfeld
Sonstiges
29© FH AACHEN | Sebastian Meßingfeld
FH Aachen
Fachbereich Elektrotechnik & Informationstechnik
Sebastian Meßingfeld
30© FH AACHEN | Sebastian Meßingfeld
Nächste SlideShare
Wird geladen in …5
×

Apple iOS - GUI Entwicklung

524 Aufrufe

Veröffentlicht am

GUI Entwicklung für Apple iPhone und iPad

Veröffentlicht in: Software
0 Kommentare
0 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

  • Gehören Sie zu den Ersten, denen das gefällt!

Keine Downloads
Aufrufe
Aufrufe insgesamt
524
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
3
Aktionen
Geteilt
0
Downloads
0
Kommentare
0
Gefällt mir
0
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

Apple iOS - GUI Entwicklung

  1. 1. iOS GUI-Entwicklung Sebastian Meßingfeld 18.04.2013 1© FH AACHEN | Sebastian Meßingfeld
  2. 2. Inhalt 2© FH AACHEN | Sebastian Meßingfeld •  Entwicklungsumgebung •  GUI-Entwicklung •  Pointing Device •  Styleguide •  Prototyp
  3. 3. Entwicklungsumgebung •  Xcode Interface Builder •  Debugging •  Xcode •  Intruments 3© FH AACHEN | Sebastian Meßingfeld
  4. 4. Entwicklungsumgebung Interface Builder 4© FH AACHEN | Sebastian Meßingfeld
  5. 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. 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. 7. Entwicklungsumgebung Debugging - Instruments 7© FH AACHEN | Sebastian Meßingfeld
  8. 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. 9. GUI-Entwicklung •  Grundlegendes zur GUI-Entwicklung •  GUI-Elemente •  Art der GUI-Entwicklung 9© FH AACHEN | Sebastian Meßingfeld
  10. 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. 11. GUI-Entwicklung GUI-Elemente 11© FH AACHEN | Sebastian Meßingfeld
  12. 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. 13. Art der GUI-Entwicklung XIB 13© FH AACHEN | Sebastian Meßingfeld
  14. 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. 15. Art der GUI-Entwicklung Storyboard 15© FH AACHEN | Sebastian Meßingfeld
  16. 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. 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. 18. Datenübertragung zwischen Views 18© FH AACHEN | Sebastian Meßingfeld
  19. 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. 20. Pointing Device •  Multitouch •  Gesten 20© FH AACHEN | Sebastian Meßingfeld
  21. 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. 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. 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. 24. Pointing Device Gesten •  1- und 2-Finger Gesten im iOS Simulator •  Pinch •  Pan •  Swipe 24© FH AACHEN | Sebastian Meßingfeld
  25. 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. 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. 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. 28. Prototyp 28© FH AACHEN | Sebastian Meßingfeld
  29. 29. Sonstiges 29© FH AACHEN | Sebastian Meßingfeld
  30. 30. FH Aachen Fachbereich Elektrotechnik & Informationstechnik Sebastian Meßingfeld 30© FH AACHEN | Sebastian Meßingfeld

×