Share
Interface Builder ist eines der besten Tools, die Apple seinen iPhone-Entwicklern zur Verfügung stellt. Interface Builder ist eine Anwendung, mit der Sie als Entwickler die grafische Benutzeroberfläche (GUI) für Ihre App in einem WYSIWYG-Stileditor erstellen können. Wenn die App kompiliert ist, generiert IB dann alle erforderlichen Codes für Sie. So können Sie schnell und einfach Schnittstellen erstellen. In diesem Lernprogramm werden Sie durch die Erstellung von Schnittstellen in Interface Builder und die Verwendung der verschiedenen von Apple bereitgestellten Elemente geführt
Bevor Sie mit einem der Beispiele in diesem Lernprogramm fortfahren, sollten Sie die Apple-Richtlinien für das Human Interface von Apple lesen. Dieses Dokument enthält wichtige Informationen zum Erstellen von Schnittstellen für das iPhone. Wenn Sie die darin enthaltenen Richtlinien nicht einhalten, kann dies dazu führen, dass Ihre App abgelehnt wird, wenn sie an den App Store übermittelt wird. Dieses Dokument wird im weiteren Verlauf ausführlicher erörtert. Alle Beispiele in diesem Lernprogramm entsprechen diesen Richtlinien.
Interface Builder hat ein recht einfaches Layout. Es besteht aus vier Hauptfenstern, der Ansicht, der Bibliothek, dem Dokumentbrowser für Nib (oder Xib) und dem Inspektor. Was machen also die einzelnen Fenster? In der Ansicht erstellen Sie Ihre Schnittstelle. Sie ziehen Elemente aus dem Bibliotheksfenster in die Ansicht, um sie zu platzieren. Mit dem Dokumentenbrowser können Sie die Elemente, die Sie in Ihre Nib-Datei eingefügt haben, hierarchisch durchsuchen. Der Inspektor zeigt Ihnen schließlich alle verschiedenen Attribute des ausgewählten Elements an und ermöglicht Ihnen, diese zu bearbeiten.
Technisch gesehen ermöglicht Interface Builder die Interaktion des Anwendungsquellcodes mit der Schnittstelle auf zwei grundlegende Arten: Ausgänge und Aktionen. Outlets definieren ein Element, auf das Sie in Ihrem Quellcode zugreifen können. Sie können dann eine Verbindung von Ihren Outlets zu diesen bestimmten UI-Elementen im Interface Builder herstellen.
Ein Auslass ist wie folgt definiert:
IBOutlet ID someElement;
Die IBOutlet-Anweisung könnte auch wie folgt mit der Eigenschaftsdeklaration versehen werden:
@ property (nichtatomisch, einbehalten) IBOutlet id someElement;
So oder so ist das akzeptabel. Eine Aktion ist eine spezielle Methode, die als Reaktion auf ein Ereignis aufgerufen wird (d. H. Der Benutzer tippt auf eine Schaltfläche), die Sie im Interface Builder definieren. Eine Aktion wird definiert, indem die Methoden den IBAction-Typ wie folgt zurückgeben:
-(IBAction) someAction: (ID) Absender;
Wir werden Outlets und Aktionen später ausführlicher besprechen.
Bevor Sie mit Interface Builder spielen können, müssen Sie zunächst ein neues Xcode-Projekt erstellen. Öffnen Sie Xcode, klicken Sie auf Neues Xcode-Projekt erstellen und wählen Sie ein auf Ansicht basierendes Projekt aus. Titel es "Zähler".
HINWEIS:
Stellen Sie sicher, dass Sie Ihr Ziel in Xcode auf iPhone und nicht auf iPad eingestellt haben.
Jetzt, da Sie ein Xcode-Projekt haben, möchten wir den automatisch erstellten CounterViewController ändern, um unsere Outlets und Aktionen zu definieren. Öffnen Sie die Datei CounterViewController.h und ändern Sie sie so, dass sie wie folgt aussieht:
#einführen@interface CounterViewController: UIViewController IBOutlet UILabel * countLabel; NSInteger count; @ property (nonatomic, keep) UILabel * countLabel; @ property (nonatomic) NSInteger count; - (IBAction) add: (UIButton *) Absender; - (IBAction) sub: (UIButton *) -Sender; - (void) displayCount; @Ende
Dies definiert eine Ganzzahl für die Zählung und einen Ausgang für ein Label, das diese Zählung anzeigt. Es definiert auch eine Reihe von Methoden, die Ereignisse von IB erhalten. Nun müssen wir eine Implementierung für diese Aktion definieren. Öffnen Sie also die entsprechende Datei CounterViewController.m und nehmen Sie die folgenden Änderungen vor:
#import "CounterViewController.h" @implementation CounterViewController @synthesize count; @synthesize countLabel; - (IBAction) add: (UIButton *) Sender Anzahl ++; [self displayCount]; - (IBAction) sub: (UIButton *) Sender count--; [self displayCount]; - (void) displayCount [self.countLabel setText: [[NSString-Zuordnung] initWithFormat: @ "% d", self.count]]; … - (void) dealloc [countLabel release]; [Super Dealloc]; @Ende
Das ist ziemlich einfach Datei. Alles, was er tut, ist, wenn die Aktion aufgerufen wird, den Zähler entweder nach oben oder nach unten zu ändern und diesen Zähler dann auf dem Etikett anzuzeigen.
Erweitern Sie nun den Ressourcenordner in Xcode, und Sie sehen drei Dateien. Zwei davon sind Interfcae Builder-XIB-Dateien. Für jetzt können Sie die MainWindow.xib ignorieren, wir werden uns auf die CounterViewController.xib konzentrieren. Öffne es jetzt, dies startet den Interface Builder und du siehst einen Bildschirm wie diesen:
Es ist Zeit, mit dem Aufbau unserer Schnittstelle zu beginnen! Gehen Sie zu der Bibliotheksregisterkarte, nehmen Sie eine Schaltfläche und ziehen Sie sie in Ihre Ansicht. Wenn Sie die Schaltfläche einen Moment lang ziehen, werden blaue Hilfslinien angezeigt. Interfcae Builder gibt Ihnen verschiedene Leitfäden, um Elemente in der Ansicht zu platzieren. Sie werden dies mehr sehen, wenn wir anfangen, mehr Elemente zu platzieren. Mach das zweimal. Suchen Sie dann ein Etikett und platzieren Sie es in Ihrer Ansicht.
Wählen Sie nun eine der Schaltflächen aus, wechseln Sie zur Registerkarte "Attribute" im Inspektor und ändern Sie den Titel in "+". Machen Sie dasselbe für die andere Schaltfläche, ändern Sie stattdessen den Titel in "-". Durch Doppelklicken können Sie auch den Titel ändern. Doppelklicken Sie auf das Etikett und ändern Sie den Text in "0". Möglicherweise möchten Sie auch die Textausrichtung in "Mitte" ändern. Dies kann auf der Registerkarte "Attribute" des Inspektors erfolgen.
Jetzt sollten Sie eine Schnittstelle haben, die ungefähr so aussieht:
Das Letzte, was Sie tun müssen, um Ihre Counter-App zum Laufen zu bringen, ist das Verbinden der Schnittstelle und der Quelle.
Verbinden Sie die countLabel-Steckdose mit dem tatsächlichen Etikett. Dies kann durch Anklicken und Ziehen des Objektobjekts der Datei im Dokumentfenster auf das Etikett in der Ansicht gesteuert werden. Ein kleines, graues Fenster wird mit zwei Optionen angezeigt. Eine ist das zuvor definierte countLabel, und das andere ist die Ansicht (dies ist ein Standardausgang, der für Viewcontroller erforderlich ist. Er enthält einen Bindestrich, um anzuzeigen, dass bereits eine Verbindung zu einem Objekt besteht.) ). Klicken Sie auf die Option countLabel, um sie auszuwählen.
Jetzt verbinden wir unsere Schaltflächen mit unseren Aktionen zum Hinzufügen und Entfernen. Für unsere Zwecke können Sie einfach per Drag-and-Drop von den Schaltflächen auf das Eigentümerobjekt der Datei klicken (und die entsprechende Aktion für jede Schaltfläche auswählen). Beachten Sie jedoch, dass Sie das Verbindungsfeld im Inspektor öffnen (was Ihnen möglich ist) Holen Sie sich durch Drücken von Befehlstaste + 2) eine Reihe verschiedener Ereignisse, mit denen Sie Ihre Aktionen auslösen können und aus einer einfachen Schaltfläche eine Vielzahl von Funktionen erstellen können. Standardmäßig wird das Ereignis "Touch Up Inside" verwendet.
Jetzt können Sie wieder zu Xcode wechseln und auf Erstellen und Ausführen klicken. Die Anwendung sollte im Simulator gestartet werden. Wenn Sie alles richtig verdrahtet haben, sollten Sie in der Lage sein, die Anzahl zu addieren und von der Zählung abzuziehen, und Sie sollten sehen, dass sich das Etikett ändert, um dies widerzuspiegeln.
Ein UISegmented Control ist wie ein paar zusammengefügte Tasten, mit einem Unterschied. Der allgemeine Zweck eines UISegmentedControl besteht darin, nicht wie eine Drucktaste zu arbeiten, sondern zur Auswahl. Lassen Sie uns die Funktionalität unserer Counter-App erweitern, indem Sie ein separates Steuerelement verwenden, mit dem der Benutzer zwischen den Modi "Count by One" oder "Count by Two" wählen kann.
Als erstes müssen Sie die Datei CounterViewController.h in Xcode öffnen und eine IBAction-Definition und eine Ganzzahl hinzufügen, um unseren Modus zu speichern.
Ändern Sie es so, dass es so aussieht:
#einführen@interface CounterViewController: UIViewController IBOutlet UILabel * countLabel; NSInteger count; NSInteger-Modus @property (nicht atomar, keep) UILabel * countLabel; @ property (nonatomic) NSInteger count; @ property (nonatomic) NSInteger-Modus; - (IBAction) add: (UIButton *) Absender; - (IBAction) sub: (UIButton *) -Sender; - (IBAction) -Modus: (UISegmentedControl) -Sender; - (void) displayCount; @Ende
Dies ist ein guter Zeitpunkt, um darauf hinzuweisen, dass die Aktionsdefinitionen in diesem Lernprogramm bisher einen Klassentyp für den Absender definiert haben, der die Objekte, die diese Aktion aufrufen können, auf die Objekte dieses Klassentyps beschränkt. Ich halte das für eine hilfreiche Praxis, weil Sie davon abgehalten werden, Dinge falsch zu verbinden. Es ist jedoch zu beachten, dass dies der Fall ist nicht Eine Anforderung, diese Definitionen könnten genauso einfach gewesen sein:
- (IBAction) add: (id) absender; - (IBAction) sub: (id) Absender; - (IBAction) -Modus: (ID) -Sender;
Zulassen, dass ein Objekt sie anruft. So oder so müssen Sie die Implementierung dieser Aktionen anpassen, öffnen Sie CounterViewController.m und nehmen Sie die folgenden Änderungen vor:
#import "CounterViewController.h" @implementation CounterViewController @synthesize count; @synthesize countLabel; @synthetisierender Modus; - (IBAction) add: (UIButton *) Sender Schalter (Modus) Fall 0: Count ++; brechen; Fall 1: Anzahl + = 2; brechen; Standard: Pause; [self displayCount]; - (IBAction) sub: (UIButton *) Sender Schalter (Modus) Fall 0: Count--; brechen; Fall 1: Anzahl - = 2; brechen; Standard: Pause; [self displayCount]; - (IBAction) -Modus: (UISegmentedControl) Sender Modus = Sender.selectedSegmentIndex; … @Ende
Jetzt müssen wir die Schnittstelle ändern. Öffnen Sie also die CounterViewController.xib.
Gehen Sie zur Bibliothek und ziehen Sie ein segmentiertes Steuerelement. Jetzt müssen wir es konfigurieren. Stellen Sie sicher, dass das segmentierte Steuerelement ausgewählt ist, und öffnen Sie das Attributfenster des Inspektors. Wenn Sie sich etwas unterhalb der Segment-Dropdown-Liste bewegen, die "Segment 0 - first" lauten sollte, möchten wir den Titel in "Eins" ändern. Rufen Sie nun das Segmentmenü auf und wechseln Sie zu Segment "Segment 1 - Sekunde" und ändern Sie den Titel in "Zwei"..
Wir müssen dies auch mit unserer Aktion verbinden. Öffnen Sie das Verbindungsfeld und ziehen Sie von "Wert geändert" in den Dateieigentümer. Wählen Sie den Modus "Aktion".
Das ist es. Sie sollten jetzt eine Zähler-App haben, die entweder um ein oder zwei hoch und runter zählen kann.
Bisher haben die Elemente, über die wir gesprochen haben, zahlreiche Verwendungsmöglichkeiten und sehr wenige Einschränkungen. Die Symbolleiste ist das erste Element, das wir besprechen werden, und hat Einschränkungen in den iPhone-Richtlinien für die Benutzeroberfläche. Wenn Sie die Verwendung von Symbolleisten planen, sollten Sie diese Richtlinien beachten. Kurz gesagt, Symbolleisten sollten immer am unteren Rand der Benutzeroberfläche platziert werden. Sie sollten aus Schaltflächen bestehen, deren Symbole nicht größer als 44 x 44 Pixel sind. Es ist kein Navigationselement, und das ist eine wichtige Unterscheidung. Wenn Sie die Ansicht oder die Modi in Ihrer App ändern möchten, verwenden Sie stattdessen eine Tab-Leiste. Wenn Sie diese Richtlinien befolgen, ist die Symbolleiste jedoch sehr einfach. Es ist einfach eine Sammlung von Schaltflächen in einer Leiste und kann daher genau wie eine Reihe von Schaltflächen verwendet werden. Der einzige Unterschied besteht darin, dass Apple einen größeren Satz von Systemvorgaben bereitstellt als Standardtasten. Sie können auch Abstandhalter in der Symbolleiste zwischen Schaltflächen platzieren, um deren Position zu ändern. Lass es uns ausprobieren.
Gehen Sie zurück zur CounterViewController.h und fügen Sie nach Ihren vorherigen Aktionsdeklarationen die folgende Zeile ein.
- (IBAction) reset: (UIBarButtonItem *) -Sender;
Hinweis:
Der Absender ist hier ein UIBarButtonItem, keine UIToolbar. Jedes UIBarButtonItem sendet ein eigenes Ereignis, die UIToolbar ist einfach ein Container.
Fügen Sie dies nun zu Ihren CounterViewController.m hinzu, und folgen Sie dabei den zuvor definierten Aktionen:
- (IBAction) reset: (UIBarButtonItem *) Sender count = 0; [self displayCount];
Zurück in IB, lassen Sie uns eine UIToolbar aus der Bibliothek in die Ansicht ziehen. Beachten Sie, dass sie bereits eine Schaltfläche enthält. Um diese Schaltfläche auszuwählen, müssen Sie darauf doppelklicken (beim ersten Klicken wird die Symbolleiste ausgewählt, beim zweiten wird die Schaltfläche ausgewählt.).
Gehen Sie zu den Attributen im Inspektor. Sie werden feststellen, dass es für UIBarButtonItem wesentlich weniger Optionen gibt als für andere Elemente. Dies liegt daran, dass die Symbolleisten einheitlich sein sollen. Daher müssen Sie die Farbe für die gesamte Symbolleiste festlegen (Sie können dies ausprobieren, indem Sie einfach auf die Symbolleiste klicken und dann den Attribut-Inspektor öffnen). Ändern Sie den Bezeichner der Schaltfläche in "Papierkorb"..
Verbinden Sie dann die Schaltfläche mit dem Rücksetzvorgang, indem Sie die Steuerung per Drag & Drop zum Eigentümer der Datei ziehen. Wenn Sie Ihre App ausführen, sollten Sie jetzt in der Lage sein, die Zählung durch Tippen auf den Papierkorb anzuhalten.
Der Switch ist wahrscheinlich das am stärksten eingeschränkte Element, das vom Interface Builder bereitgestellt wird. Es gibt fast keine Anpassungsmöglichkeiten. Es hat einen "Ein" -Zustand und einen "Aus" -Zustand. Sie können die Beschriftungen oder Farben nicht ändern. Schalter müssen immer gleich aussehen, egal was. Trotz der Tatsache, dass sie sehr eingeschränkt sind, sind Schalter gelegentlich nützlich. Beispielsweise neigen Einstellungen dazu, Schalter intensiv zu nutzen, und der Schalter kann hilfreich sein, um Funktionen in Ihrer App ein- und auszuschalten - genau das, was wir tun werden. Wir werden einen Schalter machen, der ein- und ausschaltet, ob wir in unserer App Negative zählen können.
Zuerst müssen Sie folgende Änderungen an Ihrem CounterViewController.h vornehmen:
#einführen@interface CounterViewController: UIViewController … Boolesches Negativ; … @Property (nonatomic) Boolesches Negativ;… - (IBAction) negativeSwitch: (UISwitch *) -Sender;… @end
Dies definiert einfach einen Boolean, der speichert, wenn wir im negativen Modus sind oder nicht, und eine Aktion, die von einem UISwitch gesendet wird, der diesen Boolean ändert. Nun definieren wir unsere Aktion und lassen den Rest unserer Anwendung auf unser neues negatives Boolean reagieren. Passen Sie Ihre CounterViewController.m-Datei an die folgenden an:
#import "CounterViewController.h" @implementation CounterViewController… @synthesize negative;… - (IBAction) sub: (UIButton *) Sender Schalter (Modus) Fall 0: Count--; brechen; Fall 1: Anzahl - = 2; brechen; Standard: Pause; if (negativ) // Hiermit wird einfach überprüft, ob der negative Modus deaktiviert ist < 0) //and if count is negative count = 0; //sets it back to zero [self displayCount]; … - (void)viewDidLoad negative = TRUE; - (IBAction)negativeSwitch:(UISwitch*)sender negative = sender.on; if (!negative) if (count < 0) count = 0; [self displayCount];
Hier wird lediglich der negative Modus auf der Grundlage des Status des Schalters eingestellt. Wenn dann eine Subtraktion erfolgt, wird geprüft, in welchem Modus sich der Schalter gerade befindet (im negativen Boolean gespeichert)..
Wechseln Sie wieder zum Schnittstellenersteller, suchen Sie einen Schalter in der Bibliothek und legen Sie ihn in der Ansicht ab. Jetzt müssen wir den Switch mit der Aktion verbinden, aber im Falle des Switches wie des segmentierten Steuerelements möchten wir das Value Changed-Ereignis verwenden, nicht das Touch-In. Gehen Sie im Inspector auf die Registerkarte "Verbindungen", ziehen Sie den Mauszeiger zum Dateibesitzer und stellen Sie eine Verbindung mit der Aktion negativeMode: her. Sie können auch ein Etikett anbringen, um die Funktion des Schalters zu kennzeichnen.
Zu diesem Zeitpunkt sollte Ihre Anwendung in etwa wie oben aussehen.
Das letzte und komplizierteste Element, das wir besprechen werden, ist der Schieberegler. Schieberegler stellen einen Bereich von Werten dar (die Sie angeben können), die sich ändern, wenn Sie sich entlang des Schiebereglers bewegen. Dieses Element ist sehr anpassbar. Die meisten Anpassungen müssen jedoch in Code ausgeführt werden und liegen nicht im Rahmen dieses Lernprogramms. Wir werden es verwenden, um einen Multiplikator und einen Teiler für unseren Zähler zu erstellen.
Das erste, was wir brauchen, ist, Sie haben es erraten, eine weitere Aktion. Fügen Sie der CounterViewController.h mit den restlichen Aktionsdeklarationen Folgendes hinzu:
- (IBAction) -Multiplikator: (UISlider *) -Sender;
Als Nächstes müssen wir die Multiplikations- und Divisionsfunktion für unseren Counter implementieren. Ändern Sie also Ihren CounterViewController.m so:
#import "CounterViewController.h" @implementation CounterViewController… @synthesize mult;… - (IBAction) add: (UIButton *) Sender count + = mode; count * = mult; if (! negativ) if (count < 0) count = 0; [self displayCount]; - (IBAction)sub:(UIButton*)sender count -= mode; count /= mult; if (!negative) if (count < 0) count = 0; [self displayCount]; - (IBAction)mode:(UISegmentedControl*)sender mode = sender.selectedSegmentIndex+1; //Don't forget to add the +1 here - (IBAction)multiplier:(UISlider*)sender mult = sender.value; … - (void)viewDidLoad negative = TRUE; mult=1; … @end
Wenn Sie nun addieren oder subtrahieren, wird die Zahl mit dem Wert des Schiebereglers multipliziert oder dividiert. Wenn der Schieberegler auf 1 steht (was die untere Grenze sein wird), wirkt der Zähler normalerweise auf 9 (was das Maximum ist)..
Wenn Sie sich wieder im IB befinden, greifen Sie einen Schieberegler aus der Bibliothek in die Ansicht und öffnen Sie dessen Attribute im Inspektor. Das erste, was Sie hier beachten sollten, sind die Werte. Wir wollen sie ein bisschen ändern. Wie bereits erwähnt, möchten Sie, dass der Mindestwert 1 ist, der Maximalwert 9 und der Anfangswert 1. Deaktivieren Sie das Kästchen "Continuous", damit kein Dezimalpunkt darin angezeigt wird. Verbinden Sie einfach das Ereignis "Wert geändert" Ihres Schiebereglers mit dem Besitzer der Datei, und Sie haben Ihren Multiplikator!
Ihre endgültige App sollte in etwa wie folgt aussehen:
Dieses Tutorial hat die Oberfläche dessen, was im Interface Builder möglich ist, kaum zerkratzt. Es ist eine extrem leistungsfähige Anwendung. Heute haben wir uns mit der grundlegenden Verwendung von IB und den grundlegenden Elementen der IB-Bibliothek befasst. In diesem Lernprogramm wurde gezeigt, wie Sie mit Interface Builder eine voll funktionsfähige Anwendung ohne viel Code erstellen können. Denken Sie immer daran, die iPhone-Richtlinien für Benutzeroberflächen zu lesen, bevor Sie drastische Maßnahmen ergreifen. Weitere Inspiration und Unterstützung für die Benutzeroberfläche finden Sie in UICatalog von Apple.
Accentsconagua