Praktikum iOS-Entwicklung im Sommersemester 2016 Übungsblatt 3
←
→
Transkription von Seiteninhalten
Wenn Ihr Browser die Seite nicht korrekt rendert, bitte, lesen Sie den Inhalt der Seite unten
Ludwig-Maximilians-Universität München
Institut für Informatik
Lehrstuhl für Mobile und Verteilte Systeme
Prof. Dr. Claudia Linnhoff-Popien
Praktikum iOS-Entwicklung im
Sommersemester 2016
Übungsblatt 3
Abgabetermin: 10.05.2016, spätestens 23:59
(Gilt nur für die, die ihre Lösungen am Besprechungstermin vorstellen. Dies geschieht
in Form einer ca. 5-minütigen Powerpoint-Präsentation. Die Abgabe muss daher die
Präsentationsdatei enthalten und erfolgt über Uniworx.)
Besprechung: 11.05.2016
Aufgabe 5: (H) Gradienten mit Core Graphics
In der Vorlesung haben Sie mit UIKit und Core Graphics zwei Möglichkeiten kennengelernt,
individuelle zweidimensionale Views zu erstellen. Einige Funktionalitäten von Core Graphics wie
z.B. das Zeichnen von Gradienten lassen sich jedoch nicht auf objektorientierte Art und Weise mit
Hilfe der Klassen und Methoden von UIKit realisieren.
In dieser Aufgabe sollen Sie eine iOS-App mit Objective C bzw. Swift erstellen, die in einer eigenen
View geometrische Figuren mit unterschiedlichen Gradienten visualisiert. Halten Sie sich bei der
Lösung der nachfolgenden Aufgaben an folgende Vorgehensweise:
– Erstellen Sie mit Xcode ein Projekt vom Typ Single View Application.
– Fügen Sie dem Projekt eine Klasse GradientView hinzu, die von der Klasse UIView erbt.
– Überschreiben Sie die Methode drawRect der Klasse GradientView, indem Sie die ent-
sprechenden Anweisungen zum Zeichnen der geometrischen Figuren implementieren.
– Modifizieren Sie das automatisch generierte Storyboard, so dass es als Custom View eine
Instanz der Klasse GradientView verwendet.
a. Setzen Sie die iOS-App in Objective C unter Beachtung der oben genannten Vorgehensweise
um. Die Methode drawRect der Klasse GradientView soll ein Dreieck mit einem Farbver-
lauf von blau nach rot visualisieren. Als Ergebnis soll Ihre Anwendung eine Anzeige generie-
ren, die der aus Abbildung 1a entspricht.
b. Setzen Sie die iOS-App in Swift unter Beachtung der oben genannten Vorgehensweise um.
Die Methode drawRect der Klasse GradientView soll ein Rechteck mit einem Farbverlauf
von gelb nach grün visualisieren. Als Ergebnis soll Ihre Anwendung eine Anzeige generieren,
die der aus Abbildung 1b entspricht.
Praktikum iOS-Entwicklung – SS 16, Übungsblatt 3 2
(a) Objective C (b) Swift
Abbildung 1: Darstellung der Anwendungen auf dem iPhone 6.
Aufgabe 6: (H) Schattierungen mit Core Graphics
In dieser Aufgabe sollen Sie eine iOS-App mit Objective C bzw. Swift erstellen, die in einer eigenen
View zufällig erzeugte Rechtecke mit und ohne Schattierung visualisiert. Halten Sie sich bei der
Lösung der nachfolgenden Aufgaben an folgende Vorgehensweise:
– Erstellen Sie mit Xcode ein Projekt vom Typ Single View Application.
– Fügen Sie dem Projekt eine Klasse ShadowView hinzu, die von der Klasse UIView erbt.
– Überschreiben Sie die Methode drawRect der Klasse ShadowView, so dass diese zufalls-
basiert zwischen 1 und 50 Rechtecke generiert. Verwenden Sie für Ihre Lösung ausschließ-
lich Funktionen aus dem Core Graphics Framework (also nicht UIKit o.ä.). Implementie-
ren Sie Ihre Lösung so, dass jedes Rechteck eine zufallsbasierte Position, eine zufallsbasier-
te Größe und eine zufallsbasierte Füllfarbe erhält. Achten Sie darauf, dass alle Rechtecke
komplett innerhalb der durch die View vorgegebene Zeichenfläche liegen. Zudem soll je-
des zweite erzeugte Rechteck einen Schatten generieren. Greifen Sie dazu auf die Funktion
CTContextSetShadow zurück. Lagern Sie alle sich wiederholenden Schritte wie die Er-
stellung der zufallsbasierten Rechtecke, die Erstellung der zufallsbasierten Farben und das
wiederholte Zeichnen der Rechtecke in geeignet Hilfsfunktionen aus.
Hinweis: Um den Grafikkontext Ihrer View zwischenzuspeichern, bietet sich die Verwendung der
Funktionen CGContextSaveGState und CGContextRestoreGState an.
a. Setzen Sie die iOS-App in Objective C unter Beachtung der oben genannten Vorgehensweise
um. Als Ergebnis soll Ihre Anwendung Anzeigen generieren, die denen aus Abbildung 2
entsprechen.
b. Setzen Sie die iOS-App in Swift unter Beachtung der oben genannten Vorgehensweise um.
Als Ergebnis soll Ihre Anwendung Anzeigen generieren, die denen aus Abbildung 2 entspre-
chen.
Praktikum iOS-Entwicklung – SS 16, Übungsblatt 3 3
(a) 3 Rechtecke (b) 5 Rechtecke (c) 6 Rechtecke
Abbildung 2: Darstellung der Anwendung für eine unterschiedliche Anzahl an Rechtecken auf dem
iPhone 6.
Aufgabe 7: (H) Tab Bar Controller
Erstellen Sie eine iOS-App, die unter Verwendung einer Instanz vom Typ TabBarController,
die Logos von Apple, Windows und Ubuntu visualisiert. Verwenden Sie dazu eine Vorgehensweise
Ihrer Wahl (z.B. programmatisch mit Swift oder Objective C, mit Storybord, mit Xib-Files, . . . ).
Achten Sie bei der Umsetzung auf die Verwendung sinnvoller Layout-Constraints. Als Ergebnis
soll Ihre Anwendung Anzeigen generieren, die der aus Abbildung 3 entsprechen.
(a) Apple (b) Windows (c) Ubuntu
Abbildung 3: Darstellung der Anwendungen auf dem iPhone 6.
Praktikum iOS-Entwicklung – SS 16, Übungsblatt 3 4
Aufgabe 8: (H) Navigation Controller und Segues
In dieser Aufgabe sollen Sie unter Verwendung einer Instanz vom Typ NavigationController
eine iOS-App implementieren, die dem Nutzer folgende Funktionalität bietet:
Der erste Screen (Startansicht) Ihrer Anwendung visualisiert einen roten Button mit dem Titel
“5”, einen grünen Button mit dem Titel “10”, einen blauen Button mit dem Titel “20” sowie einen
schwarzen Button mit dem Titel “50”. Klickt der Nutzer auf einen der vier Buttons, wird er zu
einem neuen Screen (Detailansicht) navigiert. In der Detailansicht werden dem Nutzer in einer
diagonalen Anordnung farbige Rechtecke präsentiert. Die Anzahl der visualisierten Rechtecke so-
wie deren Farbe richten sich nach dem Titel sowie der Farbe des zuvor angeklickten Buttons.
Abbildung 4 illustriert beispielhaft einige Zustände der Anwendung.
(a) Startansicht (b) Detailansicht nach Klick(c) Detailansicht nach Klick
auf den roten Button auf den blauen Button
Abbildung 4: Darstellung der Anwendungen in seinen möglichen Zuständen auf dem iPhone 6.
Beachten Sie bei der Implementierung der Anwendung folgende Anforderungen:
– Implementieren Sie die Anwendung mit Swift.
– Verwenden Sie für die Navigation zwischen der Startansicht und der Detailansicht eine In-
stanz vom Typ NavigationController.
– Implementieren Sie die Startansicht sowie die Detailansicht in jeweis einem eigenen View
Controller. Verwenden Sie also auch für die verschiedenen Detailansichten nur einen View
Controller.
– Implementieren Sie im View Controller der Startansicht die Methode prepareForSegue,
um die Anzahl und die Farbe der zu zeichnenden Rechtecke zu übergeben. Lesen Sie dazu
beim Aufruf der Methode die Farbe sowie den Text des entsprechenden Buttons aus und
speichern Sie diese Wert in geeigneten Properties des View Controllers der Detailansicht.
– Überschreiben Sie die Methode loadView des View Controllers der Detailansicht, um dy-
namisch die Rechtecke zu visualisieren. Fügen Sie dazu der View des ViewControllers eine
entsprechende Anzahl farbiger Subviews hinzu.
– Versehen Sie die Buttons der Startansicht mit geeigneten Layout-Constraints. Die Buttons
sollen quadratisch sein und unabhängig von der Auflösung und der Orientierung des Bild-
schirms immer dieselbe (maximale) Größe besitzen.
Praktikum iOS-Entwicklung – SS 16, Übungsblatt 3 5 Hinweis: Es lassen sich mehrere Segues von den UI-Elementen eines View Controllers A zu ein und demselben View Controller B erzeugen.
Sie können auch lesen
