Share
UIKit oferă dezvoltatorilor UIActivityIndicatorView, care nu este altceva decât un spinner. Cu toate acestea, această subclasă simplă UIView îi spune utilizatorului că ceva este în curs de desfășurare - o analiză vitală UX. În acest tutorial, vă voi spune totul despre UIActivityIndicatorView și, ca un bonus suplimentar, vă voi prezenta MBProgressHUD, o clasă de indicatori de activitate pe steroizi!
Ori de câte ori un utilizator interacționează cu aplicația dvs., este important ca utilizatorul să fie conștient de ceea ce face aplicația dvs. Dacă aplicația dvs. actualizează o bază de date mare în fundal și doriți să împiedicați utilizatorul să interacționeze cu aplicația dvs. până la terminarea procesului, nu este suficient să împiedicați utilizatorul să interacționeze cu aplicația. Ori de câte ori un proces durează mai mult de câteva milisecunde, poate fi utilă afișarea feedback-ului utilizatorului. Oamenii iubesc feedbackul, deoarece le spune ceea ce se întâmplă. Dacă nu mă credeți atunci vă sugerez să petreceți o oră citește recenzii la App Store.
Nu avem nevoie de o configurație complexă pentru acest sfat rapid. Activați Xcode și creați un nou proiect folosind șablonul "Single View Application".
Denumiți aplicația SpinnerDemo, introduceți un identificator al companiei, setați "iPhone" pentru familia de dispozitive și debifați "Utilizați tablouri de articole". Puteți lăsa restul neatins. Spuneți Xcode unde doriți să salvați acest proiect și apăsați pe "Save".
După cum indică și numele, UIActivityIndicatorView este o subclasă UIView. UIActivityIndicatorView este ușor de configurat și de utilizat așa că hai să facem asta chiar acum. În Navigatorul de proiecte din stânga, selectați ViewController.m și căutați - viewDidLoad metodă. Înlocuiți implementarea implicită cu cea de mai jos.
- (vid) viewDidLoad [super viewDidLoad]; UIActivityIndicatorView * ai = [[UIActivityIndicatorView alocare] initWithActivityIndicatorStyle: UIActivityIndicatorViewStyleWhite]; ai.center = auto.view.center; [self.view addSubview: ai];
Doar trei linii de cod sunt necesare pentru a afișa un UIActivityIndicatorView. În primul rând, inițializăm indicatorul de activitate cu un stil. Există trei stiluri: (1) UIActivityIndicatorViewStyleWhiteLarge, (2) UIActivityIndicatorViewStyleWhite și (3) UIActivityIndicatorViewStyleGray. Numele stilurilor vorbesc de la sine, adică stilurile diferă numai prin culoare și mărime. În al doilea rând, poziționăm indicatorul de activitate în centrul vizualizării controlerului nostru, iar în ultima linie adăugăm UIActivityIndicatorView ca subiectiv la vizualizarea controlerului de vizualizare.
Când construiți și executați aplicația dvs., veți fi surprins de faptul că nu există niciun indicator de activitate care să fie văzut. De ce este asta? Implicit, proprietatea hidesWhenStopped este setat sa DA. Acest lucru înseamnă că UIActivityIndicatorView se va ascunde atunci când nu animă (filare). Să animăm indicatorul de activitate adăugând o linie suplimentară fișierului nostru de implementare.
- (vid) viewDidLoad [super viewDidLoad]; UIActivityIndicatorView * ai = [[UIActivityIndicatorView alocare] initWithActivityIndicatorStyle: UIActivityIndicatorViewStyleWhite]; ai.center = auto.view.center; [ai startAnimating]; [self.view addSubview: ai];
Construiți și rulați aplicația o dată în plus și acum ar trebui să vedeți indicatorul dvs. de activitate rotindu-se ca și cum nu a mai făcut-o până acum. Luați un moment pentru a schimba stilul UIActivityIndicatorView pentru a obține o idee despre cum arată diferitele stiluri. În iOS 5, puteți schimba și culoarea indicelui de activitate setând culoare proprietatea indicatorului de activitate.
Oprirea indicatorului de activitate este simplă. Pur și simplu sunați - stopAnimating pe UIActivityIndicatorView. După cum am menționat mai devreme, dacă hidesWhenStopped este setat sa DA, indicatorul de activitate se va ascunde automat. În majoritatea cazurilor de utilizare, acesta este comportamentul pe care îl doriți.
Un indicator are o valoare când indică ceva, dar dacă nu indică ceva nu ar trebui să fie acolo. -Jony Ive, Obiectiv (2009)
Există încă o metodă despre care aș vrea să vorbesc, deoarece ar putea fi utilă când lucrați cu UIActivityIndicatorView. apel - isAnimating pe un UIActivityIndicatorView vă va spune dacă animatorul actualmente indică activitatea.
Înainte de a merge mai departe, aș dori să menționez ceva care este foarte important și pe care i-au întâlnit mulți dezvoltatori noi de iOS. Nu vreau să intru astăzi prea multe detalii și fundaluri, dar esența este că întotdeauna trebuie să vă asigurați că nu blocați firul principal al aplicației. S-ar putea să fi auzit acest lucru înainte și este valabil mai ales pentru UIActivityIndicatorView. Actualizarea interfeței cu utilizatorul se face pe firul principal și aceasta înseamnă că atunci când blocați firul principal executând o sarcină lungă pe firul principal, acesta va face ca aplicația dvs. nu numai să nu răspundă la utilizator, ci va împiedica, de asemenea, activitatea indicator de la afișarea sau animarea. Așa cum am spus, voi scrie mai mult despre acest lucru într-un post viitor.
Să luăm acum o privire la MBProgressHUD. Dacă ați dezvoltat aplicații iOS de ceva timp, veți vedea cu siguranță avantajele acestei minunate clase de surse deschise. Puteți găsi MBProgressHUD la https://github.com/jdg/MBProgressHUD. Kudos lui Matej Bukovinski pentru dezvoltarea și menținerea MBProgressHUD.
Veți observa că MBProgressHUD (HUD înseamnă afișajul head-up) pare familiar și asta se datorează faptului că arată la fel ca progresul pe care Apple îl folosește în unele aplicații proprii. Cu toate acestea, progresul HUD utilizat de Apple este privat și, prin urmare, nu este disponibil pentru dezvoltatorii terți.
Adăugarea MPProgressHUD la aplicația dvs. este ușor ca plăcintă. Descărcați proiectul de la GitHub, despachetați arhiva și trageți atât MBProgressHUD.h, cât și MBProgressHUD.m la proiectul dvs. Xcode. Asigurați-vă că ați bifat opțiunea "Copiați elementul în dosarul grupului de destinație (dacă este necesar)" și adăugați, de asemenea, MBProgressHUD la țintă, SpinnerDemo.
MBProgressHUD a fost conceput pentru a oferi feedback utilizatorilor atunci când sarcinile consumatoare de timp sunt efectuate în fundal. Luați notă de ultimul cuvânt - fundal. După cum am menționat mai devreme, nu doriți să blocați firul principal efectuând o sarcină consumatoare de timp pe firul principal. Nu pot sublinia acest lucru suficient.
Utilizarea MBProgressHUD este aproape la fel de simplă ca UIActivityIndicatorView. Este nevoie de puțin mai mult de lucru pentru a pune totul în mișcare, dar obțineți multe în schimbul acestui efort. Mai întâi, comentați cele patru linii de cod pe care le-am adăugat pentru a configura indicatorul de activitate. Nu mai avem nevoie de asta. Apoi, vom adăuga o nouă variabilă de instanță (ivar) în fișierul antet al clasei ViewController. Nu uitați să adăugați, de asemenea, declarația de clasă a MBProgressHUD, astfel încât clasa ViewController să știe despre MBProgressHUD.
#import@ class MBProgressHUD; @ interfață ViewController: UIViewController MBProgressHUD * HUD; @Sfârșit
Reveniți la ViewController.m și importați fișierul antet al MBProgressHUD adăugând următoarea linie imediat sub prima declarație de import.
#import "MBProgressHUD.h"
Dacă ați urmat pașii anteriori, - viewDidLoad metoda din clasa ViewController ar trebui să conțină acum doar un apel către superclajul " - viewDidLoad și patru linii de cod care au fost comentate. Acum, inițializați MBProgressHUD, schimbând - viewDidLoad la cel de mai jos (codul care este comentat nu este afișat).
- (vid) viewDidLoad [super viewDidLoad]; HUD = [[MBProgressHUD alocat] initWithView: self.view]; [auto.view addSubview: HUD]; [Spectacol HUD: DA];
Initializarea MBProgressHUD diferă ușor de cea a UIActivityIndicatorView. În loc să treci un stil, treci ca o părere ca argument al tău - init metodă. Această vizualizare este vizualizarea pe care MBProgressHUD o va bloca (utilizatorul nu va putea să interacționeze cu această vizualizare) atunci când HUD progres este vizibil. A doua linie trebuie să fie familiară, iar în al treilea rând îi spunem HUD să se arate ca fiind ascuns în mod implicit. Gata? Construiți și rulați aplicația în simulatorul iOS și vedeți progresul HUD care apare.
La prima vedere, ați putea crede că acest lucru este mai puțin util decât UIActivityIndicatorView. Acesta este stropit în mijlocul ecranului și nu pare să existe nici o modalitate de a poziționa progresul HUD. Acest lucru se datorează faptului că MBProgressHUD servește un scop diferit, așa cum am spus mai devreme. Este menit să arate utilizatorului că o activitate este în curs de desfășurare și, de asemenea, împiedică utilizatorul să interacționeze cu vizualizarea la care se adaugă progresul HUD.
MBProgressHUD are mult mai multe caracteristici decât arătând și ascunzându-se. Puteți atribui un delegat, de exemplu, care este notificat atunci când progresul HUD sa ascuns. În plus, puteți personaliza progresul HUD într-o mare măsură cu un progres inidicator, una sau două etichete care îi spun utilizatorului ce face aplicația dvs. și poate fi, de asemenea, utilizat pentru a afișa un mesaj. Serios, MBProgressHUD este foarte util și vă sugerez să aruncați o privire la aplicația demo care vine cu proiectul pe care l-ați descărcat pentru a obține o idee despre ce poate face pentru dvs..
Pentru a încheia acest tutorial, aș dori să vă arăt un exemplu despre modul în care ați putea folosi MBProgressHUD într-un scenariu mai avansat. Vom face o sarcină consumatoare de timp în fundal, în timp ce progresul nostru HUD arată progresul acestei sarcini. Pentru a fi sincer, nu vom face cu adevărat o sarcină în fundal. Vom imita acest lucru cu o soluție inteligentă, care este de asemenea folosită de aplicația demo inclusă în MBProgressHUD. Editați codul de configurare al MBProgressHUD astfel încât acesta să pară cel de mai jos.
- (vid) viewDidLoad [super viewDidLoad]; HUD = [[MBProgressHUD alocat] initWithView: self.view]; HUD.labelText = @ "Făcând lucruri funky ..."; HUD.detailsLabelText = @ "Relaxați-vă"; HUD.mode = MBProgressHUDModeAnnularDeterminate; [auto.view addSubview: HUD]; [HUD showWhileExecutarea: @selector (doSomeFunkyStuff) onTarget: eu cu Object: zero animat: YES];
În al doilea și al treilea rând, am setat textul etichetei primare și secundare a HUD-ului de progres pentru a oferi utilizatorului câteva informații despre ceea ce se întâmplă. Cea de-a patra linie setează modul HUD-ului nostru. MBProgressHUD vine cu un număr de moduri diferite, iar modul pe care îl alegem, MBProgressHUDModeAnnularDeterminate, va afișa un indicator al progresului circulator care arată progresul sarcinii de fundal. Cu ultima linie, nu arătăm pur și simplu HUD-ul, dar vom arăta HUD-ul și-i spunem că îndeplinim o sarcină și ar trebui să ne arătăm atâta timp cât sarcina rulează. Nu v-am spus că MBProgressHUD este ușor de utilizat. Să ne uităm acum - doSomeFunkyStuff.
- (void) doSomeFunkyStuff float progress = 0,0; în timp ce (progres < 1.0) progress += 0.01; HUD.progress = progress; usleep(50000);
Declarăm un float numit progres și setați-l la 0,0. Folosind o buclă în timp, noi creștem progres și setați proprietatea progess a MBProgressHUD la acea valoare. Acest lucru va duce la progresul indicatorului nostru de progres al HUD. Ultima linie a bucla în timp ce este un truc nifty pentru a vă asigura că această metodă durează mai mult de câteva milisecunde pentru a rula. Utilizarea funcției tu dormi, execuția firului principal este suspendată pentru suma pe care o parcurgem ca argument (în microsecunde). În cele din urmă, bucla în timp ce rulează atâta timp cât progess este mai mică de 1,0. HUD va dispărea automat când metoda noastră se va termina. Construiți și rulați aplicația dvs. pentru a vedea toate acestea în acțiune.
După cum puteți vedea, atât UIActivityIndicatorView, cât și MBProgressHUD au cazuri de utilizare și ambele sunt extrem de utile dacă doriți să creați o aplicație ușor de utilizat. Nu uitați să aruncați o privire la aplicația demo a MBProgressHUD pentru a vedea ce poate face pentru dvs..
Accentsconagua