UIKit biedt ontwikkelaars UIActivityIndicatorView, dat niets meer is dan een spinner. Deze eenvoudige UIView-subklasse vertelt de gebruiker echter dat er iets aan de hand is - een essentiële UX-overweging. In deze tutorial zal ik u alles vertellen over UIActivityIndicatorView en, als een toegevoegde bonus, zal ik u kennis laten maken met MBProgressHUD, een activiteitsindicator klasse op steroïden!
Wanneer een gebruiker interactie heeft met uw applicatie, is het belangrijk dat de gebruiker weet wat uw applicatie aan het doen is. Als uw toepassing een grote database op de achtergrond bijwerkt en u wilt voorkomen dat de gebruiker met uw toepassing interageert totdat dit proces is voltooid, volstaat het niet om te voorkomen dat de gebruiker met uw toepassing communiceert. Wanneer een proces meer dan enkele milliseconden duurt, kan het nuttig zijn om de feedback van de gebruiker te tonen. Mensen houden van feedback als het hen vertelt wat er aan de hand is. Als je me niet gelooft, raad ik aan om een uurtje recensies in de App Store te lezen.
We hebben geen complexe setup nodig voor deze snelle tip. Start Xcode op en maak een nieuw project met behulp van de sjabloon "Single View Application".
Geef je sollicitatie een naam SpinnerDemo, voer een bedrijfsidentificatie in, stel "iPhone" in voor de apparaatfamilie en schakel "Gebruik storyboards" uit. Je kunt de rest onaangetast laten. Vertel Xcode waar je dit project wilt opslaan en klik op "Opslaan".
Zoals de naam aangeeft, is UIActivityIndicatorView een UIView-subklasse. UIActivityIndicatorView is eenvoudig in te stellen en te gebruiken, dus laten we dat nu doen. Selecteer ViewController.m in de Project Navigator aan de linkerkant en zoek naar de - viewDidLoad methode. Vervang de standaardimplementatie door die hieronder.
- (void) viewDidLoad [super viewDidLoad]; UIActivityIndicatorView * ai = [[UIActivityIndicatorView alloc] initWithActivityIndicatorStyle: UIActivityIndicatorViewStyleWhite]; ai.center = self.view.center; [self.view addSubview: ai];
Er zijn slechts drie regels code nodig om een UIActivityIndicatorView weer te geven. In de eerste regel initialiseren we de activiteitsindicator met een stijl. Er zijn drie stijlen beschikbaar voor ons: (1) UIActivityIndicatorViewStyleWhiteLarge, (2) UIActivityIndicatorViewStyleWhite en (3) UIActivityIndicatorViewStyleGray. De namen van de stijlen spreken voor zich, dat wil zeggen, de stijlen verschillen alleen in kleur en grootte. In de tweede regel plaatsen we de activiteitsindicator in het midden van de weergave van onze view controller en in de laatste regel voegen we onze UIActivityIndicatorView toe als een subweergave van de weergave van de view controller.
Wanneer u uw toepassing bouwt en uitvoert, zult u verrast zijn dat er geen activiteitsindicator te zien is. Waarom is dat? Standaard is de eigenschap hidesWhenStopped ingesteld op JA. Dit betekent dat de UIActivityIndicatorView zichzelf zal verbergen wanneer deze niet beweegt (draait). Laten we onze activiteitsindicator animeren door een extra regel toe te voegen aan ons implementatiebestand.
- (void) viewDidLoad [super viewDidLoad]; UIActivityIndicatorView * ai = [[UIActivityIndicatorView alloc] initWithActivityIndicatorStyle: UIActivityIndicatorViewStyleWhite]; ai.center = self.view.center; [ai startAnimatie]; [self.view addSubview: ai];
Bouw en voer uw applicatie opnieuw uit en u zou nu uw activiteitsindicator zien draaien zoals nooit tevoren. Neem even de tijd om de stijl van de UIActivityIndicatorView te wijzigen om een idee te krijgen van hoe de verschillende stijlen eruit zien. In iOS 5 kun je de kleur van de activiteitsindicator ook veranderen door de kleur eigendom van de activiteitsindicator.
Het stoppen van de activiteitsindicator is eenvoudig. Je belt gewoon - stopAnimating op de UIActivityIndicatorView. Zoals ik al eerder zei, als hidesWhenStopped ingesteld op JA, de activiteitsindicator zal zich automatisch verbergen. In de meeste gevallen is dit het gedrag dat u wilt.
Een indicator heeft een waarde wanneer deze iets aangeeft, maar als deze niet iets aangeeft dat hij er niet zou moeten zijn. -Jony Ive, Objectified (2009)
Er is nog een methode waar ik het over zou willen hebben, omdat dit van pas kan komen bij het werken met UIActivityIndicatorView. Roeping - isAnimating op een UIActivityIndicatorView zal u vertellen of de activiteitsindicator momenteel aan het animeren is.
Voordat we verder gaan, wil ik iets wijzen dat erg belangrijk is en iets dat veel nieuwe iOS-ontwikkelaars tegenkomen. Ik wil vandaag niet al te veel in detail en achtergrond ingaan, maar de essentie is dat je altijd moet zorgen dat je de rode draad van je applicatie niet blokkeert. Je hebt dit misschien al eerder gehoord en dit geldt vooral voor UIActivityIndicatorView. Het bijwerken van de gebruikersinterface gebeurt via de hoofdthread. Dit betekent dat wanneer u de hoofdthread blokkeert door een lange taak op de hoofdthread uit te voeren, uw applicatie niet alleen niet meer reageert op de gebruiker, maar ook uw activiteit zal voorkomen indicator van verschijnen of animeren. Zoals ik al zei, zal ik hierover in een volgende post iets meer schrijven.
Laten we nu eens kijken naar MBProgressHUD. Als u al enige tijd iOS-applicaties ontwikkelt, ziet u zeker de voordelen van deze geweldige open source-klasse. U kunt MBProgressHUD vinden op https://github.com/jdg/MBProgressHUD. Een pluim voor Matej Bukovinski voor het ontwikkelen en onderhouden van MBProgressHUD.
Je zult zien dat MBProgressHUD (HUD staat voor head-up display) er bekend uitziet en dat is omdat het lijkt op de vooruitgang HUD die Apple gebruikt in sommige van zijn eigen applicaties. De voortgang HUD die Apple gebruikt is echter privé en daarom niet beschikbaar voor externe ontwikkelaars.
Het toevoegen van MPProgressHUD aan uw applicatie is eenvoudig als taart. Download het project van GitHub, pak het uit en pak zowel MBProgressHUD.h als MBProgressHUD.m naar uw Xcode-project. Zorg ervoor dat u "Kopieer item in de map van de bestemmingsgroep (indien nodig)" aanvinkt en voeg ook MBProgressHUD toe aan uw doel, SpinnerDemo.
MBProgressHUD is ontworpen om de gebruiker feedback te geven wanneer tijdrovende taken op de achtergrond worden uitgevoerd. Let op dat laatste woord - achtergrond. Zoals ik eerder al zei, wilt u uw hoofdthema niet blokkeren door een tijdrovende taak uit te voeren op de hoofdthread. Ik kan dit niet genoeg benadrukken.
Het gebruik van MBProgressHUD is bijna net zo eenvoudig als UIActivityIndicatorView. Het kost een klein beetje meer werk om alles in te stellen, maar je krijgt veel voor die inspanning. Ten eerste, maak een commentaar op de vier regels code die we hebben toegevoegd om onze activiteitsindicator in te stellen. We hebben dat niet meer nodig. Vervolgens gaan we een nieuwe instantievariabele (ivar) toevoegen aan het headerbestand van onze ViewController-klasse. Vergeet niet om ook de forward class-verklaring van MBProgressHUD toe te voegen, zodat uw ViewController-klasse weet heeft van MBProgressHUD.
#importeren@class MBProgressHUD; @interface ViewController: UIViewController MBProgressHUD * HUD; @end
Schakel terug naar ViewController.m en importeer het headerbestand van MBProgressHUD door de volgende regel net onder de eerste importinstructie toe te voegen.
#import "MBProgressHUD.h"
Als u de vorige stappen hebt uitgevoerd, kunt u de - viewDidLoad methode van uw ViewController-klasse zou nu alleen een aanroep naar de superklasse moeten bevatten - viewDidLoad methode en vier regels code die zijn becommentarieerd. Laten we nu onze MBProgressHUD initialiseren door de - viewDidLoad methode naar de onderstaande methode (code die is becommentarieerd wordt niet getoond).
- (void) viewDidLoad [super viewDidLoad]; HUD = [[MBProgressHUD alloc] initWithView: self.view]; [self.view addSubview: HUD]; [HUD show: YES];
De initialisatie van MBProgressHUD verschilt enigszins van die van UIActivityIndicatorView. In plaats van een stijl door te geven, geef je een weergave door als het argument van je - in het methode. Deze weergave is de weergave die MBProgressHUD zal blokkeren (de gebruiker kan geen interactie hebben met deze weergave) wanneer de voortgang HUD zichtbaar is. De tweede regel moet bekend zijn en in de derde regel vertellen we de HUD om zichzelf te laten zien zoals deze standaard verborgen is. Klaar? Bouw en run uw applicatie in de iOS-simulator en kijk naar de voortgang HUD die verschijnt.
Op het eerste gezicht zou je denken dat dit minder handig is dan UIActivityIndicatorView. Het wordt in het midden van het scherm gespat en het lijkt erop dat er geen manier is om de voortgang HUD te positioneren. Dit komt omdat MBProgressHUD een ander doel dient, zoals ik eerder al zei. Het is bedoeld om de gebruiker te laten zien dat een taak aan de gang is en het voorkomt ook dat de gebruiker kan communiceren met de weergave waaraan de voortgang HUD is toegevoegd.
MBProgressHUD heeft veel meer functies dan alleen zichzelf tonen en verbergen. U kunt bijvoorbeeld een gedelegeerde toewijzen die een melding ontvangt wanneer de voortgang HUD zichzelf heeft verborgen. Bovendien kunt u de voortgangs-HUD in grote mate aanpassen met een voortgangsanalysator, een of twee labels die de gebruiker vertellen wat uw toepassing aan het doen is, en het kan ook worden gebruikt om een bericht weer te geven. Serieus, MBProgressHUD is erg handig en ik stel voor dat je de demo-applicatie bekijkt die bij het project is geleverd dat je hebt gedownload om een idee te krijgen van wat het voor je kan doen.
Om deze zelfstudie te beëindigen, wil ik u een voorbeeld laten zien van hoe u MBProgressHUD in een geavanceerder scenario kunt gebruiken. We gaan een tijdrovende taak uitvoeren op de achtergrond terwijl onze voortgang HUD de voortgang van die taak laat zien. Om eerlijk te zijn, gaan we niet echt een taak uitvoeren op de achtergrond. We zullen dit nabootsen met een slimme oplossing die ook wordt gebruikt door de demo-applicatie die is meegeleverd met MBProgressHUD. Bewerk de setup-code van uw MBProgressHUD zodat deze eruit ziet zoals hieronder.
- (void) viewDidLoad [super viewDidLoad]; HUD = [[MBProgressHUD alloc] initWithView: self.view]; HUD.labelText = @ "Funky dingen doen ..."; HUD.detailsLabelText = @ "Gewoon ontspannen"; HUD.mode = MBProgressHUDModeAnnularDeterminate; [self.view addSubview: HUD]; [HUD showWhileExecuting: @selector (doSomeFunkyStuff) onTarget: self withObject: nil geanimeerd: YES];
In de tweede en derde regel zetten we de tekst van het primaire en secundaire label van de voortgang HUD om de gebruiker wat informatie te geven over wat er gaande is. De vierde regel bepaalt de modus van onze HUD. MBProgressHUD wordt geleverd met een aantal verschillende modi en de modus die we kiezen, MBProgressHUDModeAnnularDeterminate, toont een circulr-voortgangsindicator die de voortgang van onze achtergrondtaak laat zien. Met de laatste regel tonen we niet alleen de HUD, maar laten we de HUD zien en vertellen we dat we een taak uitvoeren en deze moet zichzelf laten zien zolang de taak actief is. Heb ik je niet gezegd dat MBProgressHUD gemakkelijk te gebruiken is. Laten we nu eens kijken - doSomeFunkyStuff.
- (void) doSomeFunkyStuff float progress = 0,0; terwijl (vooruitgang < 1.0) progress += 0.01; HUD.progress = progress; usleep(50000);
We verklaren een float met de naam vooruitgang en stel deze in op 0.0. Met behulp van een while-lus nemen we toe vooruitgang en stel de progess-eigenschap van MBProgressHUD in op die waarde. Dit zal ertoe leiden dat de voortgangsindicator van onze HUD verder gaat. De laatste regel van de while-lus is een handige truc om ervoor te zorgen dat deze methode langer dan een paar milliseconden duurt om te worden uitgevoerd. Gebruik van de functie jij slaapt, de uitvoering van de hoofdthread wordt opgeschort voor het bedrag dat we passeren als het argument (in microseconden). Ten slotte werkt de while-lus zo lang als voorgangsbalk
is minder dan 1,0. De HUD verdwijnt automatisch wanneer onze methode is voltooid. Bouw en voer uw applicatie uit om dit allemaal in actie te zien.
Zoals u kunt zien, hebben zowel UIActivityIndicatorView als MBProgressHUD hun use cases en beide zijn enorm handig als u een gebruikersvriendelijke applicatie wilt bouwen. Vergeet niet om de demo-applicatie van MBProgressHUD te bekijken om te zien wat het voor u kan doen.