Urmăriți navigarea prin navigație, tranzițiile și contextele

Introducere

Cadrul Apple WatchKit pentru dezvoltarea aplicațiilor Apple Watch oferă mai multe moduri pentru dvs., ca dezvoltator, de a prezenta diferite tipuri de interfețe utilizatorilor aplicației dvs. Aceasta include interfețe bazate pe pagină, ierarhice și modale, care pot folosi toate contextele pentru a crea conținut dinamic.

În acest tutorial, vă voi arăta cum să configurați și să manipulați fiecare tip de interfață și ce cazuri de utilizare sunt concepute pentru fiecare.

cerinţe

Acest tutorial necesită să executați Xcode 6.2+ și să vă simțiți confortabil cu crearea unei aplicații de bază Apple Watch. Dacă nu, citiți câteva dintre celelalte tutoriale WatchKit pe Tuts + și apoi reveniți la acesta. De asemenea, va trebui să descărcați proiectul Starter de la GitHub.

1. Interfețe bazate pe pagină

Primul tip de interfață pe care o veți implementa în aplicația Apple Watch va fi una bazată pe pagină. Aceste tipuri de interfețe funcționează foarte asemănător cu ecranul de pornire standard de pe un dispozitiv iOS pentru a afișa mai multe pagini de informații într-o ordine stabilită. Interfețele bazate pe pagină sunt cele mai potrivite atunci când trebuie să afișați mai multe ecrane de informații care sunt legate între ele.

Deschideți proiectul de pornire în Xcode și navigați la Interface.storyboard. Tabloul de bord conține deja șase controale de interfață pe măsură ce vedeți mai jos.

Pentru a crea o interfață bazată pe pagină, trebuie să creați o pagina următoarerelație segmente între controlorii de interfață pe care doriți să le legați. apasă pe Control de pe tastatură și faceți clic și trageți de la un controler de interfață la altul. Controlați și trageți de la primul controler de interfață la cel de-al doilea și, dacă ați făcut corect, a Relația Segue ar trebui să apară pop-up. Din acest meniu pop-up, alegeți pagina următoare opțiune, după cum se arată mai jos.

Urmați aceiași pași pentru a conecta cel de-al doilea controler de interfață la al treilea. Tabloul de bord ar trebui să afișeze acum segurile dintre primele trei controale de interfață. Rețineți că ordinea în care creați aceste segmente determină ordinea în care vor apărea interfețele în aplicația WatchKit.

Construiți și rulați aplicația dvs. și deschideți un Apple Watch ca afișaj extern în Simulatorul iOS. Veți vedea că aplicația afișează Prima pagina și are trei puncte în partea inferioară, reprezentând cele trei pagini disponibile. Puteți să glisați între cele trei pagini prin deplasarea spre stânga sau spre dreapta, la fel ca pe un dispozitiv iOS.

Când utilizați o interfață bazată pe pagină, puteți specifica ce controler de interfață doriți să apară la lansare. Acest lucru se face folosind becomeCurrentPage metodă. Deschis SecondPageInterfaceController.swift și adăugați următoarea linie la awakeWithContext (_ :) metodă:

override func awakeWithContext (context: AnyObject?) super.awakeWithContext (context) self.becomeCurrentPage ()

Construiți și rulați din nou aplicația dvs. și veți vedea că a doua pagină este prezentată la lansare.

În timpul rulării, puteți specifica și o ordine explicită în care să se afișeze paginile interfeței dvs. Acest lucru se face folosind reloadRootControllersWithNames (_: contexte :) clasă.

Primul parametru al acestei metode este o serie de șiruri de caractere care conțin identificatorii storyboard pentru controlorii de interfață pe care doriți să le încărcați. Ordinea identificatorilor din această matrice determină ordinea în care apar paginile.

Al doilea parametru este opțional AnyObject tipul de matrice care conține contextele fiecărei pagini. Veți învăța despre contexte mai târziu în acest tutorial. Pentru moment, veți lăsa acest parametru ca fiind zero. Înlocuiți linia pe care tocmai ați adăugat-o la dvs. awakeWithContext (_ :) cu următoarele metode:

override func awakeWithContext (context: AnyObject?) super.awakeWithContext (context) WKInterfaceController.reloadRootControllersWithNames (["Pagina a treia", prima pagină], contexte: nil)

Construiți și difuzați aplicația dvs. și veți vedea că după finalizarea încărcării aplicația va afișa cea de-a treia pagină urmată de prima pagină.

2. Interfețe ierarhice

În plus față de interfețele bazate pe pagină, puteți implementa, de asemenea, interfețe ierarhice într-o aplicație Apple Watch. Vorbim de interfețe ierarhice atunci când trecem între controlorii de interfață folosind a Apăsați tranziție.

Comportamentul unei interfețe ierarhice este similar cu cel al UINavigationController clasă într-o aplicație pentru iOS. Acest tip de interfață Apple Watch este cel mai potrivit pentru prezentarea mai multor interfețe una după alta într-un mod liniar.

Revedeți Interface.storyboard și trageți Punctul principal de intrare săgeată spre Transition controler de interfață, după cum se arată mai jos. Acest lucru va face ca controlerul de interfață specificat să apară mai întâi când aplicația este lansată.

În continuare, deschideți-vă TransitionInterfaceController.swift și adăugați următoarea linie în pushButtonPressed metodă:

@IBAction func pushButtonPressed () self.pushControllerWithName ("Interfață ierarhică", context: nil)

Similar cu reloadRootControllersWithNames (_: contexte :) metoda pe care ați folosit-o mai devreme, primul parametru din pushControllerWithName (_: context :) este identificatorul storyboard al controlerului de interfață pe care doriți să îl împingeți. Al doilea parametru este contextul pentru acest nou controller de interfață.

Construiți și executați aplicația. Ar trebui să vedeți următoarea interfață atunci când aplicația WatchKit a terminat de lansat.

Atingând butonul arhierească butonul trebuie să împingă următoarea interfață pe ecran, după cum se arată mai jos.

Veți observa că acum există o săgeată mică în colțul din stânga sus al ecranului. Apăsând pe săgeată veți reveni la interfața anterioară. De asemenea, este posibil să se afișeze codul curent al interfeței. În HierarchalInterfaceController clasa, actualizați popButtonPressed după cum urmează:

@IBAction func popButtonPressed () self.popController ()

Construiți și rulați din nou aplicația. Atingând butonul Pop butonul trebuie să aibă același efect ca și apăsarea săgeții înapoi din partea stângă sus.

Alternativ, dacă doriți să reveniți la prima interfață din ierarhie, invocați popToRootController mai degrabă decât metoda popController metodă. Pentru aplicația curentă, aceste metode ar produce același rezultat, deoarece în ierarhie există doar două interfețe în acest moment.

3. Interfețe modale

Interfețele modale funcționează în mod similar cu interfețele ierarhice. Diferența majoră dintre cele două este că interfețele modale sunt concepute să afișeze interfețele una peste alta, mai degrabă decât să treacă între ele într-un mod liniar.

Înapoi la TransitionInterfaceController.swift și adăugați următoarea linie de cod la modalButtonPressed metodă:

@IBAction func modalButtonPressed () self.presentControllerWithName ("Modal Interface", context: nil)

Pentru a elimina interfața modală, actualizați dismissButtonPressed după cum urmează în ModalInterfaceController:

@IBAction func dismissButtonPressed () auto.dismissController ()

Construiți și executați aplicația. Apasă pe Modal pentru a prezenta o interfață modală.

Un avantaj al interfețelor modale este acela că puteți prezenta în mod modal o interfață bazată pe pagină. Acest lucru se face folosind presentControllersWithNames (_: contexte :) metodă. Primul parametru este o serie de identificatori storyboard, iar al doilea parametru este o serie de obiecte context. În TransitionInterfaceController.swift, actualizarea punerii în aplicare a directivei modalButtonPressed după cum urmează:

@IBAction func modalButtonPressed () self.presentControllerWithNames (["Modal Interface", "Interfață ierarhică"], contexte: nil)

Rulați aplicația și atingeți Modal buton. O interfață bazată pe pagină ar trebui prezentată modal cu următoarele două interfețe:

4. Contextul interfeței

După cum ați văzut din diferitele metode utilizate în acest tutorial până acum, când treceți la o interfață nouă, puteți trece într-un context pentru a configura interfața care urmează să fie prezentată. Contextul pe care îl transmiteți la noua dvs. interfață este opțional și poate fi orice tip de date (AnyObject?).

Aceasta înseamnă că puteți transmite orice tip de date între interfețe, de la numere simple la structuri de date complexe. Contextul este înmânat noii interfețe în awakeWithContext (_ :) metodă. Avantajul transmiterii unui context unui controler de interfață este de a configura conținutul dinamic, adică în timpul rulării.

Deschis TransitionInterfaceController.swift și actualizarea punerii în aplicare a directivei modalButtonPressed după cum urmează:

@IBAction func modalButtonPressed () self.presentControllerWithName ("Modal Interface", context: "Text personalizat")

În ModalInterfaceController.swift, actualizarea punerii în aplicare a directivei awakeWithContext (_ :) după cum urmează:

override func awakeWithContext (context: AnyObject?) super.awakeWithContext (context) dacă permiteți text = context ca? String button.setTitle (text)

Utilizăm legarea opțională pentru a vedea dacă contextul furnizat poate fi exprimat într-o Şir. Dacă se poate, am setat butontitlul la această valoare.

Construiți și rulați aplicația dvs. și deschideți interfața modală. Titlul butonului ar fi trebuit să se schimbe Text personalizat.

Aflați mai multe în cursul nostru WatchKit

Dacă sunteți interesat să luați educația WatchKit la nivelul următor, puteți să vă uitați la cursul nostru complet privind dezvoltarea WatchKit.

Concluzie

În acest tutorial, ați învățat cum să configurați și să utilizați cele trei tipuri principale de interfețe disponibile pentru aplicațiile WatchKit, bazate pe pagină, ierarhice și modale. De asemenea, ați învățat cum să utilizați contextele de interfață pentru a configura controlerele de interfață în timpul rulării. De asemenea, acum știți când este mai bine să utilizați fiecare dintre aceste tipuri de interfețe în aplicațiile WatchKit. Puteți citi mai multe despre navigarea prin interfață în documentația Apple.

Cod