Erste Schritte mit UIKit Dynamics

1. Einleitung

In dem vorherigen Tutorial habe ich einige neue Funktionen von iOS 7 erläutert, mit denen Sie subtile Animationen und größere Interaktivität mit überraschend wenig Code hinzufügen können, um reale Physik zu simulieren. In diesem Tutorial zeige ich Ihnen, wie Sie auf einer Suchergebnisseite ein ausgeblendetes Formular erstellen.

Wir verwenden ein Schwerkraftverhalten und ein Kollisionsverhalten, um zu steuern, ob das Formular aktuell sichtbar ist oder nicht. Wir erhalten auch eine subtile Bounce-Animation, sobald das Panel angezeigt wird. Lass uns anfangen.

2. Erstellen Sie das Projekt

Öffnen Sie Xcode und wählen Sie Neu> Projekt… von dem Datei Speisekarte. Wählen Einzelansicht-Anwendung aus der Liste von iOS-Anwendung Vorlagen und klicken Sie auf Nächster.

Geben Sie einen Namen für Ihr Projekt ein, ich habe meinen angerufen Dynamik. Geben Sie den Namen, die Unternehmenskennung und das Klassenpräfix Ihrer Organisation ein. Wählen iPhone von dem Geräte Klicken Sie auf Nächster, und wählen Sie einen Ort zum Speichern des Projekts.

3. Erstellen Sie das Storyboard

Schritt 1

Öffnen Hauptplatine und löschen Sie den View Controller, der standardmäßig vorhanden ist.

Schritt 2

Ziehen Sie eine Navigationssteuerung von dem Objektbibliothek. Bei Xcode 5 ist der Root-View-Controller des Navigationscontrollers standardmäßig a UITableViewController Beispiel. Wählen Sie den Table View-Controller aus und löschen Sie ihn. Wir erstellen für dieses Projekt einen benutzerdefinierten Ansichts-Controller.

Schritt 3

Ziehen Sie eine Controller anzeigen von dem Objektbibliothek und positionieren Sie es links von der Navigationssteuerung. Klicken Sie mit der rechten Maustaste auf den Navigationscontroller, um das anzuzeigen Verbindungsinspektor. Klicken Sie auf das Plus links von Root-View-Controller und wählen Sie den soeben hinzugefügten View-Controller.

Schritt 4

Wählen Sie das Navigationselement des View-Controllers aus und ändern Sie den Titel in Suchergebnisse in dem Attribute-Inspektor zur Rechten.

Schritt 5

Erstellen Sie das Projekt, und führen Sie es aus, um sicherzustellen, dass die Ansichten und Ansichtscontroller ordnungsgemäß angeschlossen sind.

4. Bereiten Sie den View Controller vor

Schritt 1

Öffnen Sie in der Header-Datei des View-Controllers den Project Navigator. Füge hinzu ein UITableView Eigenschaft, a UIView Eigenschaft für die Formularansicht, a UIBarButtonItem für die Schaltfläche, um das Formular anzuzeigen, und a UIButton das Formular ausblenden. Fügen Sie eine Aktion für das hinzu UIBarButtonItem sowie eine Aktion für die UIButton.

Die View Controller-Klasse muss ebenfalls der entsprechen UITableViewDataSource und UITableViewDelegate Protokolle. Die Header-Datei des View-Controllers sollte jetzt so aussehen:

#einführen  @Interface ViewController: UIViewController @ property (nichtatomisch, schwach) IBOutlet UITableView * tableView; @ property (nichtatomisch, schwach) IBOutlet UIView * filterFormView; @ property (nichtatomisch, schwach) IBOutlet UIBarButtonItem * filterButton; @ property (nichtatomisch, schwach) IBOutlet UIButton * applyFilterButton; - (IBAction) filterButtonTapped; - (IBAction) applyFilterButtonTapped; @Ende

Schritt 2

Bearbeiten Sie in der Implementierungsdatei des View-Controllers die viewDidLoad Methode. Nach dem [super viewDidLoad], sag dem UITableView Beispiel für die Verwendung der UITableViewCell Klasse, die sich selbst bevölkern soll:

[self.tableView registerClass: [UITableViewCell-Klasse] forCellReuseIdentifier: @ "Cell"];

Schritt 3

Als nächstes implementieren Sie die UITableViewDataSource Protokoll in der Implementierungsdatei des View-Controllers. Die Tabelle sollte einen Abschnitt mit 100 Zeilen enthalten, und in jeder Zeile sollte die Zeilennummer der Zelle angezeigt werden.

- (NSInteger) numberOfSectionsInTableView: (UITableView *) tableView return 1;  - (NSInteger) tableView: (UITableView *) tableView numberOfRowsInSection: (NSInteger) Abschnitt return 100;  - (UITableViewCell *) tableView: (UITableView *) tableView cellForRowAtIndexPath: (NSIndexPath *) indexPath UITableViewCell * cell = [tableView dequeueReusableCellWithIdentifier: @ "Cell"]; cell.textLabel.text = [NSString stringWithFormat: @ "% ld", (long) indexPath.row]; zurück Zelle; 

5. Fügen Sie die Tabellenansicht hinzu

Schritt 1

Erneut besuchen Hauptplatine und wählen Sie den zuvor hinzugefügten View-Controller aus. Ändern Sie die Klasse in ViewController in dem Identitätsinspektor damit wir die zuvor geschaffenen Verkaufsstellen verbinden können.

Schritt 2

Ziehen Sie eine UITableView Beispiel aus dem Objektbibliothek in der Ansicht des View Controllers. Stellen Sie sicher, dass die Tabellenansicht oben auf dem View Controller platziert ist und diese vollständig abdeckt. Verwenden Sie die Verbindungsinspektor um den View-Controller als Tabellenansicht festzulegen Datenquelle und delegieren.

Schritt 3

Erstellen Sie Ihre Anwendung und führen Sie sie aus. Sie sollten eine Tabelle mit 100 Zeilen sehen, die jeweils die Zeilennummer enthält.

6. Fügen Sie das Filterformular hinzu

Schritt 1

Im Hauptplatine ziehen Sie ein UIView Instanz an den View Controller. Stellen Sie sicher, dass die Ansicht nicht als Kopf der Tabellenansicht hinzugefügt wird. Sie können dies überprüfen, indem Sie das öffnen Dokument Gliederung auf der linken Seite und prüfen, ob die soeben hinzugefügte Ansicht ein Peer der Tabellenansicht ist, keine Unteransicht.

Schritt 2

Setzen Sie die Hintergrundfarbe der Ansicht auf ein hellgrau, den Ursprung auf (0,0, 0,0), und seine Größe zu (320,0, 568,0) so dass es den gesamten Bildschirm ausfüllt und die Tabellenansicht abdeckt.

Schritt 3

Verbinden Sie diese Ansicht mit der filterFormView Steckdose, die wir in der Header-Datei des View-Controllers deklariert haben.

Schritt 4

Fügen Sie der Ansicht einige Steuerelemente hinzu. Stellen Sie sich vor, es handelt sich um ein Formular zum Filtern der in der Tabellenansicht angezeigten Suchergebnisse. Fügen Sie eine Reihe von Textfeldern und eine Schaltfläche hinzu (siehe Abbildung unten).

Schritt 5

Verbinden Sie das Sich bewerben Taste mit der applyFilterButton Steckdose haben wir früher erklärt und verbinden die Touch Up Inside Veranstaltung zum applyFilterButtonTapped Aktion.

Schritt 6

Besuchen Sie die Implementierungsdatei des View-Controllers erneut und fügen Sie eine leere Methodendeklaration für hinzu applyFilterButtonTapped damit die Anwendung nicht abstürzt, wenn Sie versehentlich auf die Schaltfläche tippen.

- (void) applyFilterButtonTapped 

Schritt 7

Erstellen Sie Ihre Anwendung und führen Sie sie aus. Sie sollten das Formular sehen, das die Tabellenansicht abdeckt.

7. Fügen Sie das Bar Button-Element hinzu

Schritt 1

Füge hinzu ein UIBarButtonItem Instanz zur Navigationsleiste. Ändern Sie den Titel in Filter und verbinden Sie es mit dem filterButton Ausgang, den wir in der Header-Datei des View-Controllers deklariert haben. Verbinden Sie das filterButtonTapped Aktion zum filterButton Bar-Button-Element.

Schritt 2

Wechseln Sie zurück zur Implementierungsdatei des View-Controllers und fügen Sie eine leere Methodendeklaration für hinzu filterButtonTapped damit die Anwendung nicht abstürzt, wenn Sie auf das Element der Bar-Schaltfläche tippen.

- (void) filterButtonTapped 

8. Fügen Sie dynamische Verhalten hinzu

Schritt 1

Bevor wir dynamisches Verhalten hinzufügen, sollten Sie sich einen Moment Zeit nehmen, um darüber nachzudenken, was wir tun sollen und wie wir es erreichen können.

Wenn das Filterformular nicht sichtbar ist, sollte es außerhalb des Bildschirms liegen. Wir können eine verwenden UIGravityBehavior nach oben zu wirken, damit es nicht herunterfällt. Wenn der Filter Wenn die Taste gedrückt wird, sollte die Schwerkraft nach unten wirken, wodurch die Form in Sicht kommt.

Wir brauchen auch eine UICollisionBehavior mit Grenzen, so dass das Formular so weit ansteigt, dass es sich außerhalb des Bildschirms befindet und nur bis zum unteren Rand des Bildschirms reicht. Der nächste Screenshot zeigt die beiden Endzustände des Formulars, wobei die rosa Linien die Kollisionsgrenzen anzeigen. Lassen Sie uns das in Code übersetzen.

Schritt 2

Im ViewController.h a erklären UIDynamicAnimator Eigentum. Wir werden unser Verhalten an diesen Animator übergeben, der bestimmt, was mit der Formularansicht geschehen muss. Deklarieren Sie a UIGravityBehaviorund ein UICollisionBehavior.

@ property (nonatomic, strong) UIDynamicAnimator * -Animateur; @ Eigenschaft (nichtatomar, stark) UIGravityBehavior * Schwerkraft; @ property (nonatomic, strong) UICollisionBehavior * -Kollision;

Schritt 3

Im viewDidLoad, initialisieren Animator als dynamischer Animator mit der Ansicht des View-Controllers als Referenzansicht. Als nächstes initialisieren  Schwere und konfigurieren Sie es so, dass es mit einem Winkel von nach oben wirkt -M_PI_2 auf der filterForm Aussicht.

Es ist jetzt Zeit, die View Controller zu initialisieren Kollision Eigenschaft durch Aufruf initWithItems: und ein Array nur mit übergeben self.filterForm drin. Wir fügen zwei Begrenzungen hinzu, eine am unteren Rand der Ansicht und eine am oberen Rand der Ansicht. So wird die aktualisierte Implementierung von viewDidLoad sieht aus wie:

- (void) viewDidLoad [super viewDidLoad]; [self.tableView registerClass: [UITableViewCell-Klasse] forCellReuseIdentifier: @ "Cell"]; self.animator = [[UIDynamicAnimator-Zuordnung] initWithReferenceView: self.view]; self.gravity = [[UIGravityBehavior-Zuordnung] initWithItems: @ [self.filterFormView]]; self.gravity.angle = -M_PI_2; [self.animator addBehavior: self.gravity]; self.collision = [[UICollisionBehavior-Zuordnung] initWithItems: @ [self.filterFormView]]; [self.collision addBoundaryWithIdentifier: @ "TopOfView" vonPoint: CGPointMake (0., -self.filterFormView.bounds.size.height) anPoint: CGPointMake (self.view.bounds.size.width, -self.filterFormView.bounds.size .Höhe)]; [self.collision addBoundaryWithIdentifier: @ "BottomOfView" vonPoint: CGPointMake (0., self.view.bounds.size.height) nachPoint: CGPointMake (self.view.bounds.size.width, self.view.bounds.size.height )]; [self.animator addBehavior: self.collision]; 

Schritt 4

Wenn Sie auf die Filter-Schaltfläche tippen, möchten wir die Schaltfläche deaktivieren, um den Benutzer nicht zu verwirren. Außerdem möchten wir, dass die Schwerkraft nach unten wirkt, damit das Formular sichtbar wird. Aktualisieren Sie die filterButtonTapped Aktion wie folgt:

Schritt 5

Wenn der Sich bewerben Wenn Sie auf die Schaltfläche in der Formularansicht tippen, möchten Sie, dass die Schwerkraft wieder nach oben wirkt, um sicherzustellen, dass das Formular vom Bildschirm abrutscht. Wir ermöglichen auch die Filter Taste erneut. Aktualisieren Sie die applyFilterButtonTapped Aktion wie folgt:

- (void) applyFilterButtonTapped self.gravity.angle = -M_PI_2; self.filterButton.enabled = YES; 

9. Abschließende Schritte

Schritt 1

Bevor wir das Projekt zum letzten Mal erstellen und ausführen, verschieben wir das Filterformular außerhalb des Bildschirms, sodass Benutzer die Formularrutsche nicht sehen können, wenn die Anwendung gestartet wird. Stellen Sie das ein y Position für die Filterformularansicht auf -568.

Schritt 2

Erstellen Sie die Anwendung und führen Sie sie aus. Tippen Sie auf die Filter Taste und das Formular sollte in Sicht kommen und mit einem sanften Sprung einrasten. Tippen Sie auf die Sich bewerben Klicken Sie auf die Schaltfläche und sehen Sie, wie das Formular wieder reibungslos aus dem Bildschirm verschoben wird.

Fazit

Die Einrichtung der Benutzeroberfläche hat etwas Arbeit gekostet, aber nachdem wir das getan hatten, war es ein Kinderspiel, eine auf Physik basierende Animation hinzuzufügen. Es dauerte nur ein paar Zeilen Code.

Wir mussten nicht programmieren, wie die Physik funktioniert, wie zum Beispiel der Absprung. Dank UIKit Dynamics mussten wir nur angeben, welche Verhaltensweisen wir wollten, und das lassen UIDynamicAnimator Objekt machen die Arbeit für uns.