Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
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

593 Aufrufe

Veröffentlicht am

GUI Entwicklung für Apple iPhone und iPad

Veröffentlicht in: Software
  • Als Erste(r) kommentieren

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

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

×