Praktikum ios-entwicklung im Sommersemester 2015 Übungsblatt 3

Transkript

1 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 2015 Übungsblatt 3 Abgabetermin: , 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: 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 entsprechenden 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 Farbverlauf von blau nach rot visualisieren. Als Ergebnis soll ihre Anwendung eine Anzeige generieren, 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.

2 Praktikum ios-entwicklung SS 15, Ü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 zufallsbasiert 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.ä.). Implementieren sie ihre Lösung so, dass jedes Rechteck eine zufallsbasierte Position, eine zufallsbasierte 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 jedes zweite erzeugte Rechteck einen Schatten generieren. Greifen sie dazu auf die Funktion CTContextSetShadow zurück. Lagern sie alle sich wiederholenden Schritte wie die Erstellung 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 entsprechen.

3 Praktikum ios-entwicklung SS 15, Ü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.

4 Praktikum ios-entwicklung SS 15, Ü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 sowie 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 Instanz 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 dynamisch 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 Bildschirms immer dieselbe (maximale) Größe besitzen.

5 Praktikum ios-entwicklung SS 15, Ü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.