Share
UIKit tilbyr utviklere med UIActivityIndicatorView, noe som ikke er noe mer enn en spinner. Denne enkle UIView-underklassen forteller imidlertid brukeren at noe er i gang - en viktig UX-vurdering. I denne veiledningen vil jeg fortelle deg alt om UIActivityIndicatorView, og som en tilleggsbonus vil jeg introdusere deg til MBProgressHUD, en aktivitetsindikatorklasse på steroider!
Når en bruker samhandler med søknaden din, er det viktig at brukeren er klar over hva søknaden din gjør. Hvis søknaden din oppdaterer en stor database i bakgrunnen, og du vil forhindre at brukeren interagerer med søknaden din til denne prosessen er ferdig, er det ikke nok å bare forhindre at brukeren interagerer med søknaden din. Når en prosess tar mer enn noen få millisekunder, kan det være nyttig å vise brukerens tilbakemelding. Folk elsker tilbakemelding som forteller dem hva som skjer. Hvis du ikke tror på meg, foreslår jeg at du bruker en time å lese anmeldelser på App Store.
Vi trenger ikke et komplisert oppsett for dette raske tipset. Brann opp Xcode og opprett et nytt prosjekt ved hjelp av "Enkel visningsprogram" -malen.
Navn søknaden din SpinnerDemo, skriv inn en bedriftsidentifikator, sett "iPhone" for enhetsfamilien, og fjern merket "Bruk Storyboards". Du kan la resten stå uberørt. Fortell Xcode hvor du vil lagre dette prosjektet og trykk "Lagre".
Som navnet antyder, er UIActivityIndicatorView en UIView-underklasse. UIActivityIndicatorView er enkelt å sette opp og bruke, så la oss gjøre det akkurat nå. I Project Navigator til venstre, velg ViewController.m og se etter - viewDidLoad metode. Erstatt standard implementering med den nedenfor.
- (void) viewDidLoad [super viewDidLoad]; UIActivityIndicatorView * ai = [[UIActivityIndicatorView alloc] initWithActivityIndicatorStyle: UIActivityIndicatorViewStyleWhite]; ai.center = self.view.center; [self.view addSubview: ai];
Bare tre kodelinjer kreves for å vise en UIActivityIndicatorView. I den første linjen, initierer vi aktivitetsindikatoren med en stil. Tre stiler er tilgjengelige for oss: (1) UIActivityIndicatorViewStyleWhiteLarge, (2) UIActivityIndicatorViewStyleWhite, og (3) UIActivityIndicatorViewStyleGray. Navnene på stilene snakker for seg selv, det vil si, stilene varierer bare i farge og størrelse. I den andre linjen plasserer vi aktivitetsindikatoren i midten av visningskontrollens visning, og i den siste linjen legger vi til vår UIActivityIndicatorView som et undervisning til visningskontrollørens visning.
Når du bygger og driver søknaden din, vil du bli overrasket over at det ikke er noen aktivitetsindikator som skal ses. Hvorfor det? Som standard er eiendommen hidesWhenStopped er satt til JA. Dette betyr at UIActivityIndicatorView vil gjemme seg når den ikke animerer (spinning). La oss animere vår aktivitetsindikator ved å legge til en ekstra linje i implementeringsfilen vår.
- (void) viewDidLoad [super viewDidLoad]; UIActivityIndicatorView * ai = [[UIActivityIndicatorView alloc] initWithActivityIndicatorStyle: UIActivityIndicatorViewStyleWhite]; ai.center = self.view.center; [ai startAnimating]; [self.view addSubview: ai];
Bygg og kjør din søknad en gang til, og du bør nå se aktivitetsindikatoren din spinner som det aldri har gjort før. Ta et øyeblikk for å endre stilen til UIActivityIndicatorView for å få en ide om hvordan de forskjellige stilene ser ut. I iOS 5 kan du også endre fargen på aktivitetsindikatoren ved å sette inn farge aktiviteten til aktivitetsindikatoren.
Å stoppe aktivitetsindikatoren er rett frem. Du ringer bare - stopAnimating på UIActivityIndicatorView. Som jeg nevnte før, hvis hidesWhenStopped er satt til JA, Aktivitetsindikatoren vil gjemme seg automatisk. I de fleste brukssaker er dette oppførselen du vil ha.
En indikator har en verdi når den indikerer noe, men hvis det ikke indikerer noe, bør det ikke være der. -Jony Ive, Objectified (2009)
Det er en annen metode som jeg vil snakke om, da det kan komme til nytte når du arbeider med UIActivityIndicatorView. ringe - isAnimating På en UIActivityIndicatorView vil du fortelle om aktivitetsindikatoren for øyeblikket animerer.
Før vi går videre, vil jeg peke på noe som er veldig viktig og noe som mange nye iOS-utviklere går inn i. Jeg ønsker ikke å gå inn i for mye detalj og bakgrunn i dag, men det er viktig at du alltid må sørge for at du ikke blokkerer hovedtråden i søknaden din. Du har kanskje hørt dette før, og det gjelder spesielt for UIActivityIndicatorView. Oppdatering av brukergrensesnittet er gjort på hovedtråden, og dette betyr at når du blokkerer hovedtråden ved å utføre en lang løpende oppgave på hovedtråden, vil det gjøre at søknaden din ikke bare reagerer på brukeren, men det vil også hindre aktiviteten din indikator fra å vise opp eller animere. Som jeg sa, vil jeg skrive om dette litt mer i et fremtidig innlegg.
La oss nå ta en titt på MBProgressHUD. Hvis du har utviklet iOS-applikasjoner for en stund, vil du definitivt se fordelene med denne fantastiske open source-klassen. Du finner MBProgressHUD på https://github.com/jdg/MBProgressHUD. Kudos til Matej Bukovinski for å utvikle og vedlikeholde MBProgressHUD.
Du vil legge merke til at MBProgressHUD (HUD står for head-up-skjerm) ser kjent ut, og det er fordi det ser ut som den fremgang HUD som Apple bruker i noen av sine egne applikasjoner. Fremdriften HUD som Apple bruker, er imidlertid privat og er derfor ikke tilgjengelig for tredjepartsutviklere.
Å legge til MPProgressHUD til søknaden din er lett som kake. Last ned prosjektet fra GitHub, pakk arkivet, og dra både MBProgressHUD.h og MBProgressHUD.m til ditt Xcode-prosjekt. Sørg for å sjekke "Kopier element i destinasjonsgruppens mappe (om nødvendig)" og legg også til MBProgressHUD til målet ditt, SpinnerDemo.
MBProgressHUD ble utformet for å gi brukerens tilbakemelding når tidkrevende oppgaver utføres i bakgrunnen. Vær oppmerksom på det siste ordet - bakgrunn. Som nevnt tidligere, vil du ikke blokkere hovedtråden din ved å utføre en tidkrevende oppgave på hovedtråden. Jeg kan ikke stresse dette nok.
Bruke MBProgressHUD er nesten like enkelt som UIActivityIndicatorView. Det tar litt mer arbeid å sette opp alt, men du får mye til gjengjeld for det arbeidet. Først, kommentere de fire kodelinjene vi la til for å sette opp vår aktivitetsindikator. Vi vil ikke trenge det lenger. Deretter skal vi legge til en ny instansvariabel (ivar) i headerfilen til vår ViewController-klasse. Ikke glem å også legge til fremoverklassedeklarasjonen for MBProgressHUD slik at ViewController-klassen din vet om MBProgressHUD.
#importere@ klasse MBProgressHUD; @interface ViewController: UIViewController MBProgressHUD * HUD; @slutt
Bytt tilbake til ViewController.m og importer headerfilen til MBProgressHUD ved å legge til følgende linje like under den første importoppstillingen.
#import "MBProgressHUD.h"
Hvis du fulgte de forrige trinnene, - viewDidLoad Metoden i ViewController-klassen din bør nå bare inneholde et anrop til superklassen ' - viewDidLoad metode og fire kodelinjer som har blitt kommentert. La oss nå initialisere vår MBProgressHUD ved å endre - viewDidLoad metode til den ene nedenfor (kode som er kommentert, vises ikke).
- (void) viewDidLoad [super viewDidLoad]; HUD = [[MBProgressHUD alloker] initWithView: self.view]; [self.view addSubview: HUD]; [HUD show: JA];
Initialiseringen av MBProgressHUD skiller seg litt fra den av UIActivityIndicatorView. I stedet for å passere en stil, passerer du en visning som argumentet til din - i det metode. Denne visningen er visningen at MBProgressHUD vil blokkere (brukeren vil ikke kunne samhandle med denne visningen) når fremdriften HUD er synlig. Den andre linjen bør være kjent, og i den tredje linjen forteller vi HUD å vise seg selv som det er gjemt som standard. Klar? Bygg og kjør din søknad i iOS-simulatoren og se på fremdriften HUD som vises.
Ved første øyekast kan du tenke at dette er mindre nyttig enn UIActivityIndicatorView. Det er sprutet midt på skjermen, og det ser ut til å være ingen måte å plassere fremdriften HUD. Dette skyldes at MBProgressHUD tjener en annen hensikt som jeg sa tidligere. Det er ment å vise brukeren at en oppgave er i gang, og det forhindrer også brukeren i å samhandle med visningen som fremdriften HUD er lagt til.
MBProgressHUD har mye flere funksjoner enn å bare vise og gjemme seg selv. Du kan tilordne en delegat, for eksempel, som blir varslet når fremdriften HUD har skjult seg selv. I tillegg kan du tilpasse progess HUD i stor grad med en fremdriftsindikator, en eller to etiketter som forteller brukeren hva søknaden din gjør, og den kan også brukes til å vise en melding. Seriøst er MBProgressHUD veldig nyttig, og jeg foreslår at du tar en titt på demo-applikasjonen som følger med prosjektet du lastet ned for å få en ide om hva det kan gjøre for deg.
For å avslutte denne opplæringen, vil jeg gjerne vise deg et eksempel på hvordan du kan bruke MBProgressHUD i et mer avansert scenario. Vi skal utføre en tidkrevende oppgave i bakgrunnen mens vår fremgang HUD viser fremgangen til oppgaven. For å være ærlig, skal vi ikke virkelig utføre en oppgave i bakgrunnen. Vi vil etterligne dette med en smart løsning som også brukes av demo-applikasjonen som følger med MBProgressHUD. Rediger oppsettkoden til MBProgressHUD slik at den ser ut som den nedenfor.
- (void) viewDidLoad [super viewDidLoad]; HUD = [[MBProgressHUD alloker] initWithView: self.view]; HUD.labelText = @ "Å gjøre funky ting ..."; HUD.detailsLabelText = @ "Bare slapp av"; HUD.mode = MBProgressHUDModeAnnularDeterminate; [self.view addSubview: HUD]; [HUD showWhileExecuting: @selector (doSomeFunkyStuff) onTarget: self withObject: null animated: YES];
I den andre og tredje linjen setter vi teksten til den primære og sekundære etiketten til fremdriften HUD for å gi brukeren litt informasjon om hva som skjer. Den fjerde linjen setter modusen til HUD. MBProgressHUD kommer med en rekke forskjellige moduser, og modusen vi velger, MBProgressHUDModeAnnularDeterminate, vil vise en sirkulasjonsfremdriftsindikator som viser utviklingen av vår bakgrunnsoppgave. Med den siste linjen viser vi ikke bare HUD, men vi viser HUD og forteller at vi utfører en oppgave, og den skal vise seg så lenge oppgaven løper. Fortalte jeg deg ikke at MBProgressHUD er lett å bruke. La oss nå se på - doSomeFunkyStuff.
- (void) doSomeFunkyStuff float progress = 0.0; mens (fremgang < 1.0) progress += 0.01; HUD.progress = progress; usleep(50000);
Vi erklærer en flytende navngitt framgang og sett den til 0,0. Ved hjelp av en stundsløyfe øker vi framgang og sett progessegenskapen til MBProgressHUD til den verdien. Dette vil resultere i vår HUDs fremdriftsindikator for å gå videre. Den siste linjen i mensløkken er et greit triks for å sikre at denne metoden tar lengre tid enn noen få millisekunder å løpe. Bruk av funksjonen usleep, utførelse av hovedtråden er suspendert for beløpet vi overfører som argumentet (i mikrosekunder). Endelig løper mensløkken så lenge som progess er mindre enn 1,0. HUD vil automatisk forsvinne når metoden er ferdig. Bygg og kjør din søknad for å se alt dette i aksjon.
Som du kan se, har både UIActivityIndicatorView og MBProgressHUD sine brukstilfeller, og begge er enormt nyttige hvis du vil bygge et brukervennlig program. Ikke glem å ta en titt på demoapplikasjonen til MBProgressHUD for å se hva det kan gjøre for deg.
Accentsconagua