Share
UIKit stellt Entwicklern UIActivityIndicatorView zur Verfügung, was nichts weiter als ein Spinner ist. Diese einfache UIView-Unterklasse teilt dem Benutzer jedoch mit, dass etwas im Gange ist - eine wichtige UX-Betrachtung. In diesem Tutorial werde ich Ihnen alles über UIActivityIndicatorView erzählen und als zusätzlichen Bonus MBProgressHUD vorstellen, eine Aktivitätsindikator-Klasse für Steroide!
Immer wenn ein Benutzer mit Ihrer Anwendung interagiert, ist es wichtig, dass er sich darüber im Klaren ist, was Ihre Anwendung tut. Wenn Ihre Anwendung eine große Datenbank im Hintergrund aktualisiert, und Sie möchten verhindern, dass der Benutzer mit Ihrer Anwendung interagiert, bis dieser Vorgang abgeschlossen ist, reicht es nicht aus, den Benutzer nur daran zu hindern, mit Ihrer Anwendung zu interagieren. Wenn ein Prozess mehr als einige Millisekunden dauert, kann es hilfreich sein, das Feedback des Benutzers anzuzeigen. Die Leute lieben Feedback, weil es ihnen sagt, was los ist. Wenn Sie mir nicht glauben, schlage ich vor, dass Sie eine Stunde im App Store lesen.
Für diesen schnellen Tipp benötigen wir kein komplexes Setup. Starten Sie Xcode und erstellen Sie ein neues Projekt mit der Vorlage "Single View Application".
Benennen Sie Ihre Bewerbung SpinnerDemo, Geben Sie eine Firmenkennung ein, legen Sie "iPhone" für die Gerätefamilie fest und deaktivieren Sie "Storyboards verwenden". Sie können den Rest unberührt lassen. Sagen Sie Xcode, wo Sie dieses Projekt speichern möchten, und klicken Sie auf "Speichern"..
Wie der Name schon sagt, ist UIActivityIndicatorView eine UIView-Unterklasse. UIActivityIndicatorView ist einfach einzurichten und zu verwenden, also machen wir das jetzt. Wählen Sie im Projektnavigator links ViewController.m aus, und suchen Sie nach - viewDidLoad Methode. Ersetzen Sie die Standardimplementierung durch die folgende.
- (void) viewDidLoad [super viewDidLoad]; UIActivityIndicatorView * ai = [[UIActivityIndicatorView Allocation] initWithActivityIndicatorStyle: UIActivityIndicatorViewStyleWhite]; ai.center = self.view.center; [self.view addSubview: ai];
Für die Anzeige eines UIActivityIndicatorView sind nur drei Codezeilen erforderlich. In der ersten Zeile initialisieren wir den Aktivitätsindikator mit einem Stil. Drei Stile stehen uns zur Verfügung: (1) UIActivityIndicatorViewStyleWhiteLarge, (2) UIActivityIndicatorViewStyleWhite und (3) UIActivityIndicatorViewStyleGray. Die Namen der Stile sprechen für sich, dh die Stile unterscheiden sich nur in Farbe und Größe. In der zweiten Zeile positionieren wir den Aktivitätsindikator in der Mitte der Ansicht unseres View-Controllers und in der letzten Zeile fügen wir unseren UIActivityIndicatorView als Unteransicht zur View-Controller-Ansicht hinzu.
Wenn Sie Ihre Anwendung erstellen und ausführen, werden Sie überrascht sein, dass keine Aktivitätsanzeige vorhanden ist. Warum das? Standardmäßig ist die Eigenschaft verstecktWennStop ist eingestellt auf JA. Dies bedeutet, dass UIActivityIndicatorView sich versteckt, wenn es nicht animiert wird (dreht). Animieren Sie unseren Aktivitätsindikator, indem Sie unserer Implementierungsdatei eine zusätzliche Zeile hinzufügen.
- (void) viewDidLoad [super viewDidLoad]; UIActivityIndicatorView * ai = [[UIActivityIndicatorView Allocation] initWithActivityIndicatorStyle: UIActivityIndicatorViewStyleWhite]; ai.center = self.view.center; [ai startAnimating]; [self.view addSubview: ai];
Erstellen Sie Ihre Anwendung erneut, und führen Sie sie erneut aus. Sie sollten jetzt sehen, wie sich Ihre Aktivitätsanzeige wie noch nie dreht. Nehmen Sie sich einen Moment Zeit, um den Stil des UIActivityIndicatorView zu ändern, um eine Vorstellung davon zu bekommen, wie die verschiedenen Stile aussehen. In iOS 5 können Sie auch die Farbe der Aktivitätsanzeige ändern, indem Sie das Symbol festlegen Farbe Eigenschaft des Aktivitätsindikators.
Das Stoppen der Aktivitätsanzeige ist unkompliziert. Sie rufen einfach an - StopAnimating auf der UIActivityIndicatorView. Wie ich schon sagte, wenn verstecktWennStop ist eingestellt auf JA, Die Aktivitätsanzeige wird automatisch ausgeblendet. In den meisten Anwendungsfällen ist dies das gewünschte Verhalten.
Ein Indikator hat einen Wert, wenn er etwas anzeigt, aber wenn er nichts anzeigt, sollte er nicht vorhanden sein. -Jony Ive, objektiviert (2009)
Es gibt eine weitere Methode, über die ich gerne sprechen würde, da sie sich bei der Arbeit mit UIActivityIndicatorView als nützlich erweisen könnte. Berufung - isAnimating Auf einem UIActivityIndicatorView erfahren Sie, ob der Aktivitätsindikator gerade animiert wird.
Bevor wir fortfahren, möchte ich auf etwas Wichtiges hinweisen, auf das viele neue iOS-Entwickler stoßen. Ich möchte heute nicht zu sehr auf Details und Hintergrund eingehen, aber der Kernpunkt ist, dass Sie immer sicherstellen müssen, dass Sie den Haupt-Thread Ihrer Anwendung nicht blockieren. Möglicherweise haben Sie dies bereits gehört und dies gilt insbesondere für UIActivityIndicatorView. Die Aktualisierung der Benutzeroberfläche erfolgt im Hauptthread. Wenn Sie also den Hauptthread durch Ausführen einer lang laufenden Task im Hauptthread blockieren, wird Ihre Anwendung dadurch nicht nur nicht mehr auf den Benutzer reagiert, sondern auch Ihre Aktivitäten werden verhindert Anzeige von auftauchen oder animieren. Wie gesagt, ich werde darüber in einem zukünftigen Beitrag etwas mehr schreiben.
Schauen wir uns jetzt MBProgressHUD an. Wenn Sie bereits seit einiger Zeit iOS-Anwendungen entwickeln, werden Sie die Vorteile dieser großartigen Open-Source-Klasse definitiv sehen. Sie finden MBProgressHUD unter https://github.com/jdg/MBProgressHUD. Lob an Matej Bukovinski für die Entwicklung und Pflege von MBProgressHUD.
Sie werden feststellen, dass MBProgressHUD (HUD steht für Head-up-Display) bekannt ist. Dies ist darauf zurückzuführen, dass es dem Fortschritt ähnelt, den HUD in einigen seiner eigenen Anwendungen verwendet. Der von Apple verwendete HUD ist jedoch privat und daher für Entwickler von Drittanbietern nicht verfügbar.
Das Hinzufügen von MPProgressHUD zu Ihrer Anwendung ist kinderleicht. Laden Sie das Projekt von GitHub herunter, entpacken Sie das Archiv und ziehen Sie MBProgressHUD.h und MBProgressHUD.m in Ihr Xcode-Projekt. Vergewissern Sie sich, dass "Element in den Ordner der Zielgruppe kopieren (falls erforderlich)" aktiviert ist, und fügen Sie außerdem MBProgressHUD zu Ihrem Ziel, SpinnerDemo, hinzu.
MBProgressHUD wurde entwickelt, um dem Benutzer Feedback zu geben, wenn zeitaufwändige Aufgaben im Hintergrund ausgeführt werden. Beachten Sie das letzte Wort - den Hintergrund. Wie bereits erwähnt, möchten Sie Ihren Haupt-Thread nicht blockieren, indem Sie eine zeitaufwändige Aufgabe für den Haupt-Thread ausführen. Ich kann das nicht genug betonen.
Die Verwendung von MBProgressHUD ist fast so einfach wie UIActivityIndicatorView. Es ist ein bisschen mehr Arbeit, um alles einzurichten, aber dafür bekommt man viel zurück. Kommentieren Sie zunächst die vier Codezeilen, die wir hinzugefügt haben, um unseren Aktivitätsindikator festzulegen. Wir werden das nicht mehr brauchen. Als Nächstes fügen wir der Header-Datei unserer ViewController-Klasse eine neue Instanzvariable (ivar) hinzu. Vergessen Sie nicht, auch die Vorwärtsklassendeklaration von MBProgressHUD hinzuzufügen, damit Ihre ViewController-Klasse MBProgressHUD kennt.
#einführen@class MBProgressHUD; @Interface ViewController: UIViewController MBProgressHUD * HUD; @Ende
Wechseln Sie wieder zu ViewController.m, und importieren Sie die Header-Datei von MBProgressHUD, indem Sie die folgende Zeile direkt unter der ersten Importanweisung hinzufügen.
#import "MBProgressHUD.h"
Wenn Sie die vorherigen Schritte befolgt haben, wird die - viewDidLoad Die Methode Ihrer ViewController-Klasse sollte jetzt nur einen Aufruf an die Superklasse enthalten. - viewDidLoad Methode und vier auskommentierte Codezeilen. Lassen Sie uns nun unser MBProgressHUD initialisieren, indem Sie die - viewDidLoad Methode für die unten stehende (auskommentierter Code wird nicht angezeigt).
- (void) viewDidLoad [super viewDidLoad]; HUD = [[MBProgressHUD-Zuordnung] initWithView: self.view]; [self.view addSubview: HUD]; [HUD-Show: JA];
Die Initialisierung von MBProgressHUD unterscheidet sich geringfügig von der von UIActivityIndicatorView. Anstatt einen Stil zu übergeben, übergeben Sie eine Ansicht als das Argument Ihres - drin Methode. Diese Ansicht ist die Ansicht, die MBProgressHUD blockiert (der Benutzer kann nicht mit dieser Ansicht interagieren), wenn die Fortschritts-HUD sichtbar ist. Die zweite Zeile sollte bekannt sein, und in der dritten Zeile sagen wir dem HUD, dass es sich standardmäßig verborgen zeigt. Bereit? Erstellen Sie Ihre Anwendung im iOS-Simulator, und führen Sie sie aus. Schauen Sie sich den angezeigten Fortschritt-HUD an.
Auf den ersten Blick könnte man denken, dass dies weniger nützlich ist als UIActivityIndicatorView. Es ist in der Mitte des Bildschirms gespritzt, und es scheint keine Möglichkeit zu geben, das Fortschritts-HUD zu positionieren. Dies ist darauf zurückzuführen, dass MBProgressHUD einem anderen Zweck dient, als ich es bereits gesagt habe. Es soll dem Benutzer zeigen, dass eine Aufgabe ausgeführt wird, und es verhindert auch, dass der Benutzer mit der Ansicht interagiert, zu der die Fortschritts-HUD hinzugefügt wird.
MBProgressHUD bietet weit mehr Funktionen als nur das Zeigen und Verstecken. Sie können beispielsweise einen Delegierten zuweisen, der benachrichtigt wird, wenn sich der Fortschritts-HUD versteckt hat. Darüber hinaus können Sie das Fortschritts-HUD mit einem Fortschrittsanzeiger, einer oder zwei Beschriftungen, die den Benutzer über die Anwendung Ihrer Anwendung informieren, in großem Umfang anpassen. Außerdem kann es zur Anzeige einer Meldung verwendet werden. Ernsthaft, MBProgressHUD ist sehr nützlich und ich schlage vor, dass Sie sich die Demo-Anwendung ansehen, die im heruntergeladenen Projekt enthalten ist, um eine Vorstellung davon zu bekommen, was es für Sie tun kann.
Um dieses Tutorial zu beenden, möchte ich Ihnen ein Beispiel zeigen, wie Sie MBProgressHUD in einem fortgeschritteneren Szenario verwenden können. Wir werden im Hintergrund eine zeitraubende Aufgabe ausführen, während unser Fortschritt-HUD den Fortschritt dieser Aufgabe anzeigt. Um ehrlich zu sein, werden wir nicht wirklich eine Aufgabe im Hintergrund ausführen. Wir werden dies mit einer cleveren Lösung nachahmen, die auch von der in MBProgressHUD enthaltenen Demoanwendung verwendet wird. Bearbeiten Sie den Setup-Code Ihres MBProgressHUD so, dass er wie folgt aussieht.
- (void) viewDidLoad [super viewDidLoad]; HUD = [[MBProgressHUD-Zuordnung] initWithView: self.view]; HUD.labelText = @ "Funkelndes Zeug machen ..."; HUD.detailsLabelText = @ "Entspannen Sie sich"; HUD.mode = MBProgressHUDModeAnnularDeterminate; [self.view addSubview: HUD]; [HUD showWhileExecuting: @selector (doSomeFunkyStuff) onTarget: self withObject: nil animiert: YES];
In der zweiten und dritten Zeile legen wir den Text der primären und sekundären Bezeichnung des Fortschritts-HUDs fest, um dem Benutzer Informationen darüber zu geben, was los ist. Die vierte Zeile legt den Modus unseres HUD fest. MBProgressHUD verfügt über eine Reihe verschiedener Modi. Der von uns gewählte Modus MBProgressHUDModeAnnularDeterminate zeigt eine Statusanzeige, die den Fortschritt unserer Hintergrundaufgabe anzeigt. In der letzten Zeile zeigen wir nicht nur das HUD, sondern wir zeigen das HUD und sagen ihm, dass wir eine Aufgabe ausführen, die sich zeigen sollte, solange die Aufgabe läuft. Habe ich nicht gesagt, dass MBProgressHUD einfach zu bedienen ist? Lass uns jetzt einen Blick darauf werfen - doSomeFunkyStuff.
- (void) doSomeFunkyStuff float progress = 0.0; während (Fortschritt) < 1.0) progress += 0.01; HUD.progress = progress; usleep(50000);
Wir erklären einen Float mit dem Namen Fortschritt und setze es auf 0.0. Mit einer while-Schleife erhöhen wir uns Fortschritt Legen Sie die Progess-Eigenschaft von MBProgressHUD auf diesen Wert fest. Dies führt dazu, dass der Fortschrittsindikator unseres HUDs weiter steigt. Die letzte Zeile der while-Schleife ist ein geschickter Trick, um sicherzustellen, dass diese Methode länger als einige Millisekunden dauert. Verwendung der Funktion du schläfst, Die Ausführung des Hauptthreads wird für den Betrag ausgesetzt, den wir als Argument übergeben (in Mikrosekunden). Schließlich läuft die while-Schleife solange fortschreiten ist kleiner als 1,0. Das HUD verschwindet automatisch, wenn unsere Methode beendet ist. Erstellen Sie Ihre Anwendung, und führen Sie sie aus, um all dies in Aktion zu sehen.
Wie Sie sehen, haben sowohl UIActivityIndicatorView als auch MBProgressHUD Anwendungsfälle, und beide sind äußerst nützlich, wenn Sie eine benutzerfreundliche Anwendung erstellen möchten. Vergessen Sie nicht, einen Blick auf die Demoanwendung von MBProgressHUD zu werfen, um zu sehen, was es für Sie tun kann.
Accentsconagua