SlideShare ist ein Scribd-Unternehmen logo
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
•  Prototyp
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 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
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
Entwicklungsumgebung
Debugging - Instruments
7© FH AACHEN | Sebastian Meßingfeld
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
GUI-Entwicklung
•  Grundlegendes zur GUI-Entwicklung
•  GUI-Elemente
•  Art der GUI-Entwicklung
9© FH AACHEN | Sebastian Meßingfeld
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
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 View (animiertes Blättern)
•  Table View
•  Collection View (Grid)
•  GLKit View (OpenGL)
•  Viele Third-Party Erweiterungen
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
•  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
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 .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
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
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-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
Pointing Device
•  Multitouch
•  Gesten
20© FH AACHEN | Sebastian Meßingfeld
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
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
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
Pointing Device
Gesten
•  1- und 2-Finger Gesten im iOS Simulator
•  Pinch
•  Pan
•  Swipe
24© FH AACHEN | Sebastian Meßingfeld
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
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
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
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

Weitere ähnliche Inhalte

Andere mochten auch

Glossar Akustik
Glossar AkustikGlossar Akustik
Glossar Akustik
ITWissen.info
 
Glossar Leuchtdioden
Glossar LeuchtdiodenGlossar Leuchtdioden
Glossar Leuchtdioden
ITWissen.info
 
Glossar A/D-Wandler
Glossar A/D-WandlerGlossar A/D-Wandler
Glossar A/D-Wandler
ITWissen.info
 
Mercedes Benz stellt autonomes Auto vor
Mercedes Benz stellt autonomes Auto vorMercedes Benz stellt autonomes Auto vor
Mercedes Benz stellt autonomes Auto vor
TWT
 
Glossar Smart-Energy
Glossar Smart-Energy Glossar Smart-Energy
Glossar Smart-Energy
ITWissen.info
 
Insights into... Smart Home
Insights into... Smart HomeInsights into... Smart Home
Insights into... Smart Home
Axel Springer Marktforschung
 
Pavone Project Management Was Ist Neu 9.5
Pavone Project Management Was Ist Neu 9.5Pavone Project Management Was Ist Neu 9.5
Pavone Project Management Was Ist Neu 9.5
Bjoern Reinhold
 
Why Game of Thrones needs a Social Media intervention
Why Game of Thrones needs a Social Media interventionWhy Game of Thrones needs a Social Media intervention
Why Game of Thrones needs a Social Media intervention
Germin8
 
Caso Plantas de Celulosa, Rio Uruguay, CIJ
Caso Plantas de Celulosa, Rio Uruguay, CIJCaso Plantas de Celulosa, Rio Uruguay, CIJ
Caso Plantas de Celulosa, Rio Uruguay, CIJ
Francisco Javier Camarena Juarez
 
Sci-Fi Interfaces - Innovationsmotor für Mensch-Maschine-Interfaces?
Sci-Fi Interfaces - Innovationsmotor für Mensch-Maschine-Interfaces?Sci-Fi Interfaces - Innovationsmotor für Mensch-Maschine-Interfaces?
Sci-Fi Interfaces - Innovationsmotor für Mensch-Maschine-Interfaces?
Thomas Gläser
 
Universal UI - Geräteübergreifendes Interaktionsdesign
Universal UI - Geräteübergreifendes InteraktionsdesignUniversal UI - Geräteübergreifendes Interaktionsdesign
Universal UI - Geräteübergreifendes Interaktionsdesign
SENSORY-MINDS
 
Datenbindung und Performance in Angular 2
Datenbindung und Performance in Angular 2Datenbindung und Performance in Angular 2
Datenbindung und Performance in Angular 2
Manfred Steyer
 
Ludica
LudicaLudica
Ludica
LeonesWilma
 
Geschäftsmodelle für die Mobilität der Zukunft
Geschäftsmodelle für die Mobilität der ZukunftGeschäftsmodelle für die Mobilität der Zukunft
Geschäftsmodelle für die Mobilität der Zukunft
FutureManagementGroup AG
 
Offlinefähige Browseranwendungen: Progressive Web-Apps mit Angular 2
Offlinefähige Browseranwendungen: Progressive Web-Apps mit Angular 2Offlinefähige Browseranwendungen: Progressive Web-Apps mit Angular 2
Offlinefähige Browseranwendungen: Progressive Web-Apps mit Angular 2
Manfred Steyer
 
Google Plus für Business
Google Plus für BusinessGoogle Plus für Business
Google Plus für Business
DAVIES MEYER
 
Gfk Smart Home Studie
Gfk Smart Home StudieGfk Smart Home Studie
Gfk Smart Home Studie
myDLS
 
Introduction to Embedded Systems
Introduction to Embedded SystemsIntroduction to Embedded Systems
Introduction to Embedded Systems
Mohamed Tarek
 
Introduction to Embedded Systems
Introduction to Embedded SystemsIntroduction to Embedded Systems
Introduction to Embedded Systems
WalaaMohamed
 

Andere mochten auch (20)

Glossar Akustik
Glossar AkustikGlossar Akustik
Glossar Akustik
 
Glossar Leuchtdioden
Glossar LeuchtdiodenGlossar Leuchtdioden
Glossar Leuchtdioden
 
Glossar A/D-Wandler
Glossar A/D-WandlerGlossar A/D-Wandler
Glossar A/D-Wandler
 
Mercedes Benz stellt autonomes Auto vor
Mercedes Benz stellt autonomes Auto vorMercedes Benz stellt autonomes Auto vor
Mercedes Benz stellt autonomes Auto vor
 
Glossar Smart-Energy
Glossar Smart-Energy Glossar Smart-Energy
Glossar Smart-Energy
 
Insights into... Smart Home
Insights into... Smart HomeInsights into... Smart Home
Insights into... Smart Home
 
Pavone Project Management Was Ist Neu 9.5
Pavone Project Management Was Ist Neu 9.5Pavone Project Management Was Ist Neu 9.5
Pavone Project Management Was Ist Neu 9.5
 
Why Game of Thrones needs a Social Media intervention
Why Game of Thrones needs a Social Media interventionWhy Game of Thrones needs a Social Media intervention
Why Game of Thrones needs a Social Media intervention
 
Caso Plantas de Celulosa, Rio Uruguay, CIJ
Caso Plantas de Celulosa, Rio Uruguay, CIJCaso Plantas de Celulosa, Rio Uruguay, CIJ
Caso Plantas de Celulosa, Rio Uruguay, CIJ
 
Sci-Fi Interfaces - Innovationsmotor für Mensch-Maschine-Interfaces?
Sci-Fi Interfaces - Innovationsmotor für Mensch-Maschine-Interfaces?Sci-Fi Interfaces - Innovationsmotor für Mensch-Maschine-Interfaces?
Sci-Fi Interfaces - Innovationsmotor für Mensch-Maschine-Interfaces?
 
Universal UI - Geräteübergreifendes Interaktionsdesign
Universal UI - Geräteübergreifendes InteraktionsdesignUniversal UI - Geräteübergreifendes Interaktionsdesign
Universal UI - Geräteübergreifendes Interaktionsdesign
 
Datenbindung und Performance in Angular 2
Datenbindung und Performance in Angular 2Datenbindung und Performance in Angular 2
Datenbindung und Performance in Angular 2
 
Ludica
LudicaLudica
Ludica
 
Geschäftsmodelle für die Mobilität der Zukunft
Geschäftsmodelle für die Mobilität der ZukunftGeschäftsmodelle für die Mobilität der Zukunft
Geschäftsmodelle für die Mobilität der Zukunft
 
Offlinefähige Browseranwendungen: Progressive Web-Apps mit Angular 2
Offlinefähige Browseranwendungen: Progressive Web-Apps mit Angular 2Offlinefähige Browseranwendungen: Progressive Web-Apps mit Angular 2
Offlinefähige Browseranwendungen: Progressive Web-Apps mit Angular 2
 
Google Plus für Business
Google Plus für BusinessGoogle Plus für Business
Google Plus für Business
 
Kalsel
KalselKalsel
Kalsel
 
Gfk Smart Home Studie
Gfk Smart Home StudieGfk Smart Home Studie
Gfk Smart Home Studie
 
Introduction to Embedded Systems
Introduction to Embedded SystemsIntroduction to Embedded Systems
Introduction to Embedded Systems
 
Introduction to Embedded Systems
Introduction to Embedded SystemsIntroduction to Embedded Systems
Introduction to Embedded Systems
 

Ähnlich wie Apple iOS - GUI Entwicklung

Apple iPhone iOS - Plattform und Konzepte
Apple iPhone iOS - Plattform und KonzepteApple iPhone iOS - Plattform und Konzepte
Apple iPhone iOS - Plattform und Konzepte
messeb
 
Robuste Design Systems mit Storybook und Angular: vom Konzept zur lebendigen ...
Robuste Design Systems mit Storybook und Angular: vom Konzept zur lebendigen ...Robuste Design Systems mit Storybook und Angular: vom Konzept zur lebendigen ...
Robuste Design Systems mit Storybook und Angular: vom Konzept zur lebendigen ...
Andreas Wissel
 
Roadshow: Einstieg in die Hybrid-App Entwicklung mit dem Intel XDK und Apache...
Roadshow: Einstieg in die Hybrid-App Entwicklung mit dem Intel XDK und Apache...Roadshow: Einstieg in die Hybrid-App Entwicklung mit dem Intel XDK und Apache...
Roadshow: Einstieg in die Hybrid-App Entwicklung mit dem Intel XDK und Apache...
Gregor Biswanger
 
Cross Plattform Entwicklung für Mobile Anwendungen
Cross Plattform Entwicklung für Mobile AnwendungenCross Plattform Entwicklung für Mobile Anwendungen
Cross Plattform Entwicklung für Mobile Anwendungen
Markus Eiglsperger
 
Progressive Web Apps and TYPO3
Progressive Web Apps and TYPO3Progressive Web Apps and TYPO3
Progressive Web Apps and TYPO3
flossels
 
iOS Apps mit Webtechnologien erstellen
iOS Apps mit Webtechnologien erstelleniOS Apps mit Webtechnologien erstellen
iOS Apps mit Webtechnologien erstellenMichael Kühnel
 
Intel XDK: Cross-Plattform Entwicklung – Apps Entwickeln für alle Plattformen...
Intel XDK: Cross-Plattform Entwicklung – Apps Entwickeln für alle Plattformen...Intel XDK: Cross-Plattform Entwicklung – Apps Entwickeln für alle Plattformen...
Intel XDK: Cross-Plattform Entwicklung – Apps Entwickeln für alle Plattformen...
Gregor Biswanger
 
We4IT LCTY 2013 - captain mobility - delivering your existing ibm domino appl...
We4IT LCTY 2013 - captain mobility - delivering your existing ibm domino appl...We4IT LCTY 2013 - captain mobility - delivering your existing ibm domino appl...
We4IT LCTY 2013 - captain mobility - delivering your existing ibm domino appl...We4IT Group
 
Android Apps mit Xamarin entwickeln
Android Apps mit Xamarin entwickelnAndroid Apps mit Xamarin entwickeln
Android Apps mit Xamarin entwickeln
André Krämer
 
Creasoft Akademie - Windows 8 aus Entwicklersicht
Creasoft Akademie - Windows 8 aus EntwicklersichtCreasoft Akademie - Windows 8 aus Entwicklersicht
Creasoft Akademie - Windows 8 aus EntwicklersichtCreasoft AG
 
Mobile Apps für Designer
Mobile Apps für DesignerMobile Apps für Designer
Mobile Apps für Designerbowstreet
 
XAML UI DEVELOPMENT BEST PRACTICES 2.0
XAML UI DEVELOPMENT BEST PRACTICES 2.0XAML UI DEVELOPMENT BEST PRACTICES 2.0
XAML UI DEVELOPMENT BEST PRACTICES 2.0
thoemmes
 
Cross-Apps-Entwicklung für iPhone, Android und Co.
Cross-Apps-Entwicklung für iPhone, Android und Co.Cross-Apps-Entwicklung für iPhone, Android und Co.
Cross-Apps-Entwicklung für iPhone, Android und Co.
GFU Cyrus AG
 
Automatisierte Generierung hybrider Apps für Mobile Devices (Kolloquium)
Automatisierte Generierung hybrider Apps für Mobile Devices (Kolloquium)Automatisierte Generierung hybrider Apps für Mobile Devices (Kolloquium)
Automatisierte Generierung hybrider Apps für Mobile Devices (Kolloquium)
Jens Küsters
 
Agile Entwicklungsumgebung mit DVCS, Jenkins und Trello - Agile Bodensee Konf...
Agile Entwicklungsumgebung mit DVCS, Jenkins und Trello - Agile Bodensee Konf...Agile Entwicklungsumgebung mit DVCS, Jenkins und Trello - Agile Bodensee Konf...
Agile Entwicklungsumgebung mit DVCS, Jenkins und Trello - Agile Bodensee Konf...
Jürgen Gutsch
 
Sencha Touch und PhoneGap
Sencha Touch und PhoneGapSencha Touch und PhoneGap
Sencha Touch und PhoneGap
Indiginox
 
Android Entwicklung (App Entwickler Konferenz 2010 der Telekom)
Android Entwicklung (App Entwickler Konferenz 2010 der Telekom)Android Entwicklung (App Entwickler Konferenz 2010 der Telekom)
Android Entwicklung (App Entwickler Konferenz 2010 der Telekom)
greenrobot
 
Sencha Touch & PhoneGap
Sencha Touch & PhoneGapSencha Touch & PhoneGap
Sencha Touch & PhoneGap
Stefan Kolb
 
Einführung in Flex Mobile
Einführung in Flex MobileEinführung in Flex Mobile
Einführung in Flex Mobile
Johannes Hohenbichler
 
Mobile Web Apps
Mobile Web AppsMobile Web Apps
Mobile Web Apps
holgerrueprich
 

Ähnlich wie Apple iOS - GUI Entwicklung (20)

Apple iPhone iOS - Plattform und Konzepte
Apple iPhone iOS - Plattform und KonzepteApple iPhone iOS - Plattform und Konzepte
Apple iPhone iOS - Plattform und Konzepte
 
Robuste Design Systems mit Storybook und Angular: vom Konzept zur lebendigen ...
Robuste Design Systems mit Storybook und Angular: vom Konzept zur lebendigen ...Robuste Design Systems mit Storybook und Angular: vom Konzept zur lebendigen ...
Robuste Design Systems mit Storybook und Angular: vom Konzept zur lebendigen ...
 
Roadshow: Einstieg in die Hybrid-App Entwicklung mit dem Intel XDK und Apache...
Roadshow: Einstieg in die Hybrid-App Entwicklung mit dem Intel XDK und Apache...Roadshow: Einstieg in die Hybrid-App Entwicklung mit dem Intel XDK und Apache...
Roadshow: Einstieg in die Hybrid-App Entwicklung mit dem Intel XDK und Apache...
 
Cross Plattform Entwicklung für Mobile Anwendungen
Cross Plattform Entwicklung für Mobile AnwendungenCross Plattform Entwicklung für Mobile Anwendungen
Cross Plattform Entwicklung für Mobile Anwendungen
 
Progressive Web Apps and TYPO3
Progressive Web Apps and TYPO3Progressive Web Apps and TYPO3
Progressive Web Apps and TYPO3
 
iOS Apps mit Webtechnologien erstellen
iOS Apps mit Webtechnologien erstelleniOS Apps mit Webtechnologien erstellen
iOS Apps mit Webtechnologien erstellen
 
Intel XDK: Cross-Plattform Entwicklung – Apps Entwickeln für alle Plattformen...
Intel XDK: Cross-Plattform Entwicklung – Apps Entwickeln für alle Plattformen...Intel XDK: Cross-Plattform Entwicklung – Apps Entwickeln für alle Plattformen...
Intel XDK: Cross-Plattform Entwicklung – Apps Entwickeln für alle Plattformen...
 
We4IT LCTY 2013 - captain mobility - delivering your existing ibm domino appl...
We4IT LCTY 2013 - captain mobility - delivering your existing ibm domino appl...We4IT LCTY 2013 - captain mobility - delivering your existing ibm domino appl...
We4IT LCTY 2013 - captain mobility - delivering your existing ibm domino appl...
 
Android Apps mit Xamarin entwickeln
Android Apps mit Xamarin entwickelnAndroid Apps mit Xamarin entwickeln
Android Apps mit Xamarin entwickeln
 
Creasoft Akademie - Windows 8 aus Entwicklersicht
Creasoft Akademie - Windows 8 aus EntwicklersichtCreasoft Akademie - Windows 8 aus Entwicklersicht
Creasoft Akademie - Windows 8 aus Entwicklersicht
 
Mobile Apps für Designer
Mobile Apps für DesignerMobile Apps für Designer
Mobile Apps für Designer
 
XAML UI DEVELOPMENT BEST PRACTICES 2.0
XAML UI DEVELOPMENT BEST PRACTICES 2.0XAML UI DEVELOPMENT BEST PRACTICES 2.0
XAML UI DEVELOPMENT BEST PRACTICES 2.0
 
Cross-Apps-Entwicklung für iPhone, Android und Co.
Cross-Apps-Entwicklung für iPhone, Android und Co.Cross-Apps-Entwicklung für iPhone, Android und Co.
Cross-Apps-Entwicklung für iPhone, Android und Co.
 
Automatisierte Generierung hybrider Apps für Mobile Devices (Kolloquium)
Automatisierte Generierung hybrider Apps für Mobile Devices (Kolloquium)Automatisierte Generierung hybrider Apps für Mobile Devices (Kolloquium)
Automatisierte Generierung hybrider Apps für Mobile Devices (Kolloquium)
 
Agile Entwicklungsumgebung mit DVCS, Jenkins und Trello - Agile Bodensee Konf...
Agile Entwicklungsumgebung mit DVCS, Jenkins und Trello - Agile Bodensee Konf...Agile Entwicklungsumgebung mit DVCS, Jenkins und Trello - Agile Bodensee Konf...
Agile Entwicklungsumgebung mit DVCS, Jenkins und Trello - Agile Bodensee Konf...
 
Sencha Touch und PhoneGap
Sencha Touch und PhoneGapSencha Touch und PhoneGap
Sencha Touch und PhoneGap
 
Android Entwicklung (App Entwickler Konferenz 2010 der Telekom)
Android Entwicklung (App Entwickler Konferenz 2010 der Telekom)Android Entwicklung (App Entwickler Konferenz 2010 der Telekom)
Android Entwicklung (App Entwickler Konferenz 2010 der Telekom)
 
Sencha Touch & PhoneGap
Sencha Touch & PhoneGapSencha Touch & PhoneGap
Sencha Touch & PhoneGap
 
Einführung in Flex Mobile
Einführung in Flex MobileEinführung in Flex Mobile
Einführung in Flex Mobile
 
Mobile Web Apps
Mobile Web AppsMobile Web Apps
Mobile Web Apps
 

Apple iOS - GUI Entwicklung

  • 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
  • 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