In diesem Tutorial werden Sie in eine der am häufigsten verwendeten Cocoa-Touch-Klassen eingeführt: UIAlertView. Mit dieser Klasse können Sie Benutzer schnell über wichtige oder dringende Anwendungsinformationen informieren. Sie können auch Benutzerfeedback erzwingen, indem Sie die UIAlertView-Klasse mit dem UIAlertViewDelegate-Protokoll kombinieren. Lesen Sie weiter, um zu erfahren, wie!
Erstellen Sie ein neues Xcode-Projekt mit der Vorlage "Single View Application".
Nennen Sie die Anwendung "AlertDemo" und geben Sie Ihre eigene Firmenkennung ein oder verwenden Sie "com.mobiletuts.alertdemo", falls Sie noch keine haben. Stellen Sie "iPhone" für die Gerätefamilie ein und behalten Sie die Standardprüfungen bei. Wenn Sie fertig sind, klicken Sie auf Weiter.
Wählen Sie einen Ort auf Ihrer Festplatte aus, um das Projekt zu speichern, und klicken Sie auf "Speichern"..
Erweitern Sie nach dem Erstellen Ihres Projekts im Ordner Projektnavigator links neben dem Xcode-Fenster den Ordner Unterstützende Dateien. STRG + Klicken (oder Rechtsklick) auf den Ordner Unterstützende Dateien und wählen Sie Hinzufügen> Neue Gruppe. Nennen Sie die neue Gruppe "Bilder", da hier die Grafiken für unsere Anwendung gespeichert werden.
Laden Sie die Projektressourcendatei herunter, die diesem Tutorial angehängt ist, und öffnen Sie den Ordner "images". Ziehen Sie alle Bilder in die soeben erstellte Gruppe "Bilder". Seien Sie sicher zu überprüfen "Elemente in den Ordner der Zielgruppe kopieren (falls erforderlich)" Dadurch wird sichergestellt, dass die Ressourcen tatsächlich in Ihr Projekt kopiert und nicht einfach als Verweise verlinkt werden. Ihr Setup in Xcode sollte jetzt so aussehen:
Finden Sie das MainStoryboard.storyboard
Datei im Projektnavigator und wählen Sie sie aus. Sie haben gerade das Storyboard für das Projekt geöffnet, das aus einer einzelnen Szene oder einem Ansichts-Controller bestehen sollte, die wir ändern können, um die Schnittstelle für die Anwendung zu erstellen.
Wenn das Storyboard geöffnet ist, sollte die Xcode-Benutzeroberfläche nun die Objektbibliothek in der rechten unteren Ecke anzeigen. Verwenden Sie das Suchfeld der Objektbibliothek, um eine zu finden UIImageView
Objekt. Platzieren Sie das Bildobjekt in der Mitte des Bildschirms und ändern Sie die Größe manuell, um die Ansicht zu füllen. Als nächstes finden Sie die Bild Feld im Attribut-Inspektor (der Attribut-Inspektor sollte sich oben rechts in Xcode befinden). Setzen Sie den Wert für das Bildfeld auf "background.png". Sie sollten jetzt eine schöne, stählerne Textur haben, die den View-Controller ausfüllt.
Verwenden Sie erneut die Objektbibliothek, um a UIButton
Objekt und ziehen Sie diese Schaltfläche auf die Szene. Der Attribut-Inspektor sollte nun Informationen zum Schaltflächenobjekt anzeigen. Stellen Sie das ein Art Dropdown-Feld auf "Benutzerdefiniert". Als nächstes stellen Sie die Bild Feld zu "button.png". Sie sollten jetzt das Schaltflächenbild auf dem Szenenansicht-Controller sehen, aber es sieht wahrscheinlich nicht richtig aus. Wenn das Schaltflächenobjekt ausgewählt ist, müssen Sie auswählen Editor> Größe an Inhalt anpassen um die Größe der Schaltfläche automatisch an die Größe des Bildinhalts anzupassen. Zentrieren Sie anschließend die Schaltfläche auf dem Bildschirm, indem Sie sie in die Mitte ziehen.
Sie sollten jetzt die Schaltfläche für den Standardstatus richtig konfiguriert haben, aber wir möchten ein anderes Bild anzeigen, wenn die Schaltfläche tatsächlich gedrückt wird. Ändere das Zustand Konfig Dropdown-Wert auf "hervorgehoben". Die Änderungen, die Sie jetzt im Attribut-Inspector vornehmen, gelten nur für den hervorgehobenen Status. Stellen Sie das ein Bild Attribut für den hervorgehobenen Schaltflächenstatus auf Knopf gedrückt.png. Ihr Storyboard sollte jetzt so aussehen:
Dies ist ein guter Zeitpunkt, um Ihren Fortschritt zu testen. Speichern Sie also Ihre Arbeit ( Datei> Speichern) und führen Sie das Projekt anschließend im iPhone-Simulator aus (Produkt> Ausführen). Sie sollten jetzt in der Lage sein, auf die Schaltfläche zu tippen und das Bild im Simulator zu ändern.
Klicken Sie bei geöffnetem Projekt-Storyboard auf die Schaltfläche "Assistenten-Editor anzeigen" oben rechts im Xcode-Fenster, um die Quellcode-Liste anzuzeigen ViewController.h. Halten Sie in dieser Perspektive sowohl die Strg-Taste (Strg) als auch die Maustaste (linke Maustaste, falls Ihre Maus zwei hat) über dem Schaltflächenobjekt in der Storyboard-Szene gedrückt, und ziehen Sie sie in die Quellcodeliste direkt über dem @Ende
Linie.
Ein neues Dialogfeld wird geöffnet, in dem automatisch eine Verbindung zwischen dem Schnittstellenelement und Ihrer View Controller-Klasse hergestellt wird. In diesem Popup können Sie Outlets oder Aktionen erstellen. Mithilfe von Ausgängen werden Eigenschaften erstellt, die auf Ihre Interface Builder-Objekte verweisen. Mit Aktionen werden Methoden mit IB-Objektaktionen verbunden.
Wählen Sie "Aktion" aus Verbindung Dropdown, geben Sie "showMessage" als Verbindungsname ein und klicken Sie dann auf Verbinden. Der Interface Builder sollte Ihrem gerade die folgende Zeile hinzugefügt haben ViewController.h Datei:
- (IBAction) showMessage: (ID) Absender;
In Ergänzung, ViewController.m sollte jetzt diese Methodendefinition haben:
- (IBAction) showMessage: (id) Absender
Wenn der Benutzer auf die Schaltfläche tippt, wird der Code in dieser Methode ausgeführt. Das heißt, wir sind endlich bereit, den Code für die Anzeige einer UIAlertView
und reagieren auf seine Delegiertenmethoden!
Nachdem Sie nun Ihre Projektvorlage eingerichtet haben, können Sie UIAlertView zum Auslösen Ihrer Nachricht verwenden, wenn die benutzerdefinierte Schaltfläche gedrückt wird. Öffne das ViewController.m
Datei und geben Sie Folgendes in die zeige Nachricht
Methode, die Sie zuvor erstellt haben:
- (IBAction) showMessage: (id) Sender UIAlertView * message = [[UIAlertView-Zuordnung] initWithTitle: @ "Hallo Welt!" message: @ "Dies ist Ihre erste UIAlertview-Nachricht." Delegat: nil cancelButtonTitle: @ "OK" otherButtonTitles: nil]; [Nachricht zeigen];
Oben erstellen und initialisieren Sie Ihre Instanz der UIAlertView-Klasse. Das initWithTitle:
und Botschaft:
Die Parameter sind selbsterklärend und leicht zu verstehen, nachdem eine Warnung angezeigt wurde. Das delegieren:
Parameter bezieht sich auf die Klasse, die Benachrichtigungsnachrichten für Delegaten erhalten soll UIAlertViewDelegate
(später gezeigt). Das CancelButton:
Parameter ist die Standardschaltfläche, die zusammen mit der Warnung angezeigt wird otherButtonTitles:
Parameter wird verwendet, um eine oder mehrere zusätzliche Optionen anzuzeigen, die der Benutzer auswählen kann.
Nachdem Sie ein Alarmobjekt erstellt haben, wird der [Nachricht zeigen]
Der Anruf zeigt unsere Nachricht, indem er unser neues UIAlertView auf dem Bildschirm anzeigt.
Wenn Sie jetzt die Anwendung erstellen und debuggen, werden Sie feststellen, dass das Tippen auf die Schaltfläche dazu führt, dass unsere Nachricht angezeigt wird!
HINWEIS: Wenn beim Tippen auf die Schaltfläche im Simulator nichts passiert, vergewissern Sie sich, dass Sie die Änderungen, die Sie in der Storyboard-Datei vorgenommen haben, tatsächlich gespeichert haben und dass die Aktion "Innen ausbessern" mit der verbunden ist zeige Nachricht:
Methode.
Das Hinzufügen zusätzlicher Schaltflächen zu einer UIAlertView kann entweder beim Initialisieren des Objekts oder zu einem beliebigen Zeitpunkt erfolgen. Um Schaltflächen zur Initialisierungszeit im obigen Code hinzuzufügen, müssen Sie lediglich die zeige Nachricht:
Methode wie folgt:
UIAlertView * message = [[UIAlertView-Zuordnung] initWithTitle: @ "Hallo Welt!" message: @ "Dies ist Ihre erste UIAlertview-Nachricht." Delegate: nil cancelButtonTitle: @ "Button 1" otherButtonTitles: @ "Button 2", @ "Button 3", nil]; [Nachricht zeigen];
Um Schaltflächen nach der Initialisierung Ihrer Warnung hinzuzufügen, würden Sie die folgenden Codezeilen verwenden:
UIAlertView * message = [[UIAlertView-Zuordnung] initWithTitle: @ "Hallo Welt!" message: @ "Dies ist Ihre erste UIAlertview-Nachricht." Delegat: nil cancelButtonTitle: @ "Button 1" otherButtonTitles: nil]; [message addButtonWithTitle: @ "Button 2"]; [message addButtonWithTitle: @ "Button 3"]; [Nachricht zeigen];
Beide Codefragmente sind äquivalent, verwenden jedoch die addButtonWithTitle:
Diese Methode macht es einfach, Schaltflächen bedingt zu Ihren Warnmeldungen hinzuzufügen, z. B. durch Einschließen ob
Aussagen.
Wechseln Sie wieder zu ViewController.h
und ändern Sie Ihre Klassendeklarationszeile wie folgt:
@Interface ViewController: UIViewController
Dies ermöglicht Ihrer Klasse, auf das zu reagieren UIAlertViewDelegate
Protokollmethoden. Um auf Tastenknöpfe in unserem zu reagieren UIAlertView
, wir werden die verwenden - alertView: clickedButtonAtIndex:
Protokollmethode. Zurück in ViewController.m
, fügen Sie dies in Ihre Klasse ein:
- (void) alertView: (UIAlertView *) alertView clickedButtonAtIndex: (NSInteger) buttonIndex
Wie Sie dem Methodennamen entnehmen können, akzeptiert diese Methode einen Zeiger auf die UIAlertView
zuvor erstelltes Objekt und der vom Benutzer ausgewählte Schaltflächenindex. Sie sind möglicherweise versucht, die bedingte Schaltfläche buttonIndex einfach umzuschalten, um festzustellen, welche Schaltfläche vom Benutzer ausgewählt wurde. Was würde jedoch geschehen, wenn Sie der Warnung bedingte Schaltflächen hinzufügen? In diesem Szenario ist die Schaltfläche mit Index 1 möglicherweise nicht immer die gewünschte. Ein viel besserer Weg ist es, gegen den Titel des Buttons zu testen und dann entsprechend zu handeln:
- (void) alertView: (UIAlertView *) alertView clickedButtonAtIndex: (NSInteger) buttonIndex NSString * title = [alertView buttonTitleAtIndex: buttonIndex]; if ([title isEqualToString: @ "Button 1"]) NSLog (@ "Button 1 wurde ausgewählt."); else if ([title isEqualToString: @ "Button 2"]) NSLog (@ "Button 2 wurde ausgewählt."); else if ([title isEqualToString: @ "Button 3"]) NSLog (@ "Button 3 wurde ausgewählt.");
Es gibt noch eine weitere Änderung, die wir vornehmen müssen, bevor dies funktioniert. Gehen Sie zurück zur UIAlertView-Initialisierungsanweisung und aktualisieren Sie die delegieren:
Parameter, um das zu akzeptieren selbst
Schlüsselwort statt Null
. Danach sollte der Codeblock so aussehen:
UIAlertView * message = [[UIAlertView-Zuordnung] initWithTitle: @ "Hallo Welt!" message: @ "Dies ist Ihre erste UIAlertview-Nachricht." delegieren: self cancelButtonTitle: @ "Button 1" otherButtonTitles: @ "Button 2", @ "Button 3", nil]; [Nachricht zeigen];
Wenn Sie die Anwendung jetzt erstellen und debuggen, sollten Sie in der Lage sein, mehrere Schaltflächen auszuwählen und eine Anweisung auf der Konsole anzeigen zu sehen, wenn eine Schaltfläche ausgewählt ist (benötigen Sie Hilfe bei der Suche der Konsole? Auswählen Ansicht> Debug-Bereich> Konsole aktivieren aus dem Xcode-Menü).
So sollte die letzte Alertansicht im Simulator aussehen:
Hiermit ist unser Einführungskurs zu abgeschlossen UIAlertView
. Zusätzlich zu dem, was wir heute besprochen haben, gibt es viele andere Optionen, die von The angeboten werden UIAlertViewDelegate
Protokoll und mit der Veröffentlichung von iOS 5 einige zusätzliche Anwendungsmöglichkeiten UIAlertView
. Wenn Sie ein zusätzliches Lernprogramm zu diesen Themen mit erweiterten Warnmeldungen erhalten möchten, teilen Sie mir dies im Kommentarbereich mit. Sie können auch gerne Fragen oder Kommentare über mein persönliches Twitter @ markhammonds oder den offiziellen Mobiletuts + Twitter-Account @envatomobile einreichen.