Share
UIKit tillhandahåller utvecklare med UIActivityIndicatorView, vilket är inget annat än en spinner. Detta enkla UIView-underklass berättar dock användaren att något pågår - en viktig UX-övervägning. I denna handledning kommer jag att berätta allt om UIActivityIndicatorView och som en tilläggsbonus introducerar jag dig till MBProgressHUD, en aktivitetsindikator klass på steroider!
När en användare interagerar med din ansökan är det viktigt att användaren är medveten om vad din ansökan gör. Om din ansökan uppdaterar en stor databas i bakgrunden och du vill förhindra att användaren interagerar med din ansökan tills processen är klar är det inte tillräckligt för att bara hindra användaren från att interagera med din ansökan. När en process tar mer än några millisekunder kan det vara användbart att visa användarens återkoppling. Folk älskar feedback eftersom det berättar för dem vad som händer. Om du inte tror på mig, föreslår jag att du spenderar en timme som läser recensioner på App Store.
Vi behöver inte en komplex installation för detta snabba tips. Släck upp Xcode och skapa ett nytt projekt med mallen "Enkel visningsprogram".
Namn på din ansökan SpinnerDemo, ange en företagsidentifierare, ställ in "iPhone" för enhetsfamiljen och avmarkera "Använd storyboards". Du kan lämna resten orörd. Berätta Xcode där du vill spara projektet och klicka på "Spara".
Som namnet antyder är UIActivityIndicatorView en UIView-underklass. UIActivityIndicatorView är lätt att installera och använda så låt oss göra det just nu. I Project Navigator till vänster väljer du ViewController.m och letar efter - viewDidLoad metod. Byt standard implementering med den nedan.
- (void) viewDidLoad [super viewDidLoad]; UIActivityIndicatorView * ai = [[UIActivityIndicatorView alloc] initWithActivityIndicatorStyle: UIActivityIndicatorViewStyleWhite]; ai.center = self.view.center; [self.view addSubview: ai];
Endast tre streckkod krävs för att visa en UIActivityIndicatorView. I första raden initierar vi aktivitetsindikatorn med en stil. Tre stilar är tillgängliga för oss: (1) UIActivityIndicatorViewStyleWhiteLarge, (2) UIActivityIndicatorViewStyleWhite, och (3) UIActivityIndicatorViewStyleGray. Namnen på stilarna talar för sig själva, det vill säga, stilerna skiljer sig bara i färg och storlek. I den andra raden placerar vi aktivitetsindikatorn i mitten av vår visningskontrollerns vy och i den sista raden lägger vi till vår UIActivityIndicatorView som en undervy till visningskontrollerns vy.
När du bygger och kör din ansökan kommer du att bli förvånad över att det inte finns någon aktivitetsindikator att se. Varför är det så? Som standard är egenskapen hidesWhenStopped är satt till JA. Det betyder att UIActivityIndicatorView kommer att gömma sig när det inte animerar (spinning). Låt oss animera vår aktivitetsindikator genom att lägga till en extra rad i vår implementeringsfil.
- (void) viewDidLoad [super viewDidLoad]; UIActivityIndicatorView * ai = [[UIActivityIndicatorView alloc] initWithActivityIndicatorStyle: UIActivityIndicatorViewStyleWhite]; ai.center = self.view.center; [ai startAnimating]; [self.view addSubview: ai];
Bygg och kör din ansökan en gång till och du bör nu se din aktivitetsindikator snurra som den aldrig gjort tidigare. Ta en stund att ändra stilen på UIActivityIndicatorView för att få en uppfattning om hur olika stilar ser ut. I IOS 5 kan du också ändra färg på aktivitetsindikatorn genom att ställa in Färg aktivitetsindikatorens egendom.
Att stoppa aktivitetsindikatorn är rakt framåt. Du ringer bara - stopAnimating på UIActivityIndicatorView. Som jag nämnde tidigare, om hidesWhenStopped är satt till JA, Aktivitetsindikatorn kommer gömma automatiskt. I de flesta användningsfall är detta det beteende som du vill ha.
En indikator har ett värde när det indikerar något, men om det inte indikerar något borde det inte vara där. -Jony Ive, Objectified (2009)
Det finns ytterligare en metod som jag skulle vilja prata om eftersom det kan komma till nytta när du arbetar med UIActivityIndicatorView. Kallelse - isAnimating På en UIActivityIndicatorView kommer du att berätta om aktivitetsindikatorn för närvarande animerar.
Innan vi går vidare vill jag peka på något som är mycket viktigt och något som många nya iOS-utvecklare går in i. Jag vill inte gå in på för mycket detaljer och bakgrund idag, men kärnan i det är att du alltid måste se till att du inte blockerar huvudtråden i din ansökan. Du kanske har hört det här förut och det är särskilt sant för UIActivityIndicatorView. Uppdatering av användargränssnittet görs på huvudtråden och det innebär att när du blockerar huvudtråden genom att utföra en långvarig uppgift på huvudgänget, kommer det att göra att din applikation inte bara svarar mot användaren, men det kommer också att förhindra din aktivitet indikator för att visa upp eller animera. Som jag sa kommer jag att skriva om detta lite mer i ett framtida inlägg.
Låt oss nu titta på MBProgressHUD. Om du har utvecklat iOS-applikationer under en tid kommer du definitivt se fördelarna med denna fantastiska open source-klass. Du hittar MBProgressHUD på https://github.com/jdg/MBProgressHUD. Kudos till Matej Bukovinski för att utveckla och underhålla MBProgressHUD.
Du kommer att märka att MBProgressHUD (HUD står för head-up-skärm) ser bekant ut och det beror på att det ser ut som det framsteg som Apple använder i vissa egna applikationer. Det framsteg HUD som Apple använder är dock privat och är därför inte tillgängligt för utvecklare från tredje part.
Att lägga MPProgressHUD till din ansökan är lätt som paj. Ladda ner projektet från GitHub, packa upp arkivet och dra både MBProgressHUD.h och MBProgressHUD.m till ditt Xcode-projekt. Se till att du markerar "Kopiera objekt till destinationsgruppens mapp (om det behövs)" och lägg till även MBProgressHUD till ditt mål, SpinnerDemo.
MBProgressHUD var utformad för att ge användarens återkoppling när tidskrävande uppgifter utförs i bakgrunden. Notera det sista ordet - bakgrund. Som jag nämnde tidigare vill du inte blockera din huvudgänga genom att utföra en tidskrävande uppgift på huvudtråden. Jag kan inte betona det tillräckligt.
Att använda MBProgressHUD är nästan lika enkelt som UIActivityIndicatorView. Det tar en liten bit mer arbete att ställa upp allt, men du får mycket till gengäld för den insatsen. Först, kommentera de fyra raderna av kod som vi lade till för att ställa in vår aktivitetsindikator. Vi kommer inte behöva det längre. Därefter kommer vi att lägga till en ny instansvariabel (ivar) till huvudfilen i vår ViewController-klass. Glöm inte att lägga till vidareklassdeklarationen för MBProgressHUD så att din ViewController-klass vet om MBProgressHUD.
#importera@ klass MBProgressHUD; @interface ViewController: UIViewController MBProgressHUD * HUD; @slutet
Byt tillbaka till ViewController.m och importera huvudfilen till MBProgressHUD genom att lägga till följande rad strax under den första importen.
#import "MBProgressHUD.h"
Om du följde de föregående stegen, - viewDidLoad Metoden i din ViewController-klass bör nu bara innehålla ett samtal till superklassen " - viewDidLoad metod och fyra kodkod som har kommenterats. Låt oss nu initiera vår MBProgressHUD genom att ändra - viewDidLoad metod till den här nedan (kod som kommenteras visas ej).
- (void) viewDidLoad [super viewDidLoad]; HUD = [[MBProgressHUD tilldela] initWithView: self.view]; [self.view addSubview: HUD]; [HUD show: JA];
Initialiseringen av MBProgressHUD skiljer sig något från den av UIActivityIndicatorView. I stället för att gå över en stil passerar du en vy som ditt eget argument - i det metod. Den här uppfattningen är den uppfattningen att MBProgressHUD kommer att blockera (användaren kommer inte att kunna interagera med den här vyn) när framstegen HUD är synlig. Den andra raden ska vara bekant och i den tredje raden berättar vi HUD att visa sig som det är doldt som standard. Redo? Bygg och kör din applikation i iOS-simulatorn och kolla på framstegen HUD som visas.
Vid första anblicken kan du tro att det här är mindre användbart än UIActivityIndicatorView. Det stänker i mitten av skärmen och det verkar inte vara något sätt att placera framstegen HUD. Detta beror på att MBProgressHUD tjänar ett annat syfte som jag sa tidigare. Det är meningen att användaren visar att en uppgift är igång och det hindrar också användaren att interagera med den uppfattning som framstegen HUD läggs till.
MBProgressHUD har mycket mer funktioner än att bara visa och gömma sig. Du kan tilldela en delegat, till exempel, som meddelas när framstegen HUD har gömt sig. Dessutom kan du anpassa progess HUD i stor utsträckning med en progressiv inidicator, en eller två etiketter som berättar användaren vad din ansökan gör, och den kan också användas för att visa ett meddelande. Allvarligt är MBProgressHUD mycket användbar och jag föreslår att du tittar på demo-programmet som följer med projektet du laddat ner för att få en uppfattning om vad det kan göra för dig.
För att avsluta denna handledning skulle jag vilja visa dig ett exempel på hur du kan använda MBProgressHUD i ett mer avancerat scenario. Vi ska utföra en tidskrävande uppgift i bakgrunden medan vår framsteg HUD visar uppgiften för den uppgiften. För att vara ärlig, kommer vi inte verkligen att utföra en uppgift i bakgrunden. Vi kommer att efterlikna detta med en smart lösning som också används av demoprogrammet som ingår i MBProgressHUD. Redigera inställningskoden för din MBProgressHUD så att den ser ut som den nedan.
- (void) viewDidLoad [super viewDidLoad]; HUD = [[MBProgressHUD tilldela] initWithView: self.view]; HUD.labelText = @ "gör funky saker ..."; HUD.detailsLabelText = @ "Bara slappna av"; HUD.mode = MBProgressHUDModeAnnularDeterminate; [self.view addSubview: HUD]; [HUD showWhileExecuting: @selector (doSomeFunkyStuff) onTarget: self withObject: nil animated: YES];
I den andra och tredje raden ställer vi in texten på den primära och sekundära etiketten på framsteget HUD för att ge användaren lite information om vad som händer. Den fjärde raden sätter läget på vårt HUD. MBProgressHUD levereras med ett antal olika lägen och det läge vi väljer, MBProgressHUDModeAnnularDeterminate, visar en cirkulär framdriftsindikator som visar hur vår bakgrundsuppgift fortskrider. Med den sista raden visar vi inte bara HUD, men vi visar HUD och berättar att vi utför en uppgift och den ska visa sig så länge som uppgiften är igång. Jag sa inte att MBProgressHUD är lätt att använda. Låt oss nu titta på - doSomeFunkyStuff.
- (tomrum) doSomeFunkyStuff float progress = 0.0; medan (framsteg < 1.0) progress += 0.01; HUD.progress = progress; usleep(50000);
Vi förklarar en flottör som heter framsteg och ställ den till 0,0. Med en stundslinga ökar vi framsteg och ställa MBProgressHUDs progessegenskap till det värdet. Detta kommer att resultera i vår HUDs framdriftsindikator för att avancera. Den sista raden i mellanslangen är ett snyggt knep för att se till att den här metoden tar längre tid än några millisekunder att köra. Använda funktionen du sover, utförandet av huvudgängan är suspenderad för det belopp vi överför som argumentet (i mikrosekunder). Slutligen löper samtidigt slingan så länge som progess är mindre än 1,0. HUD kommer automatiskt att försvinna när vår metod slutar. Bygg och kör din ansökan för att se allt detta i åtgärd.
Som du kan se har både UIActivityIndicatorView och MBProgressHUD sina användarfall och båda är oerhört användbara om du vill bygga en användarvänlig applikation. Glöm inte att ta en titt på demoapplikationen för MBProgressHUD för att se vad det kan göra för dig.
Accentsconagua