WatchKit navigasjon, overganger og sammenhenger
20
Del
to
Del
Dette Cyber ​​mandag Envato Tuts + kurs vil bli redusert til bare $ 3. Ikke gå glipp av.

Innledning

Apples WatchKit rammeverk for utvikling av Apple Watch programmer gir flere måter for deg, som utvikler, å presentere ulike typer grensesnitt for brukerne av appen. Dette inkluderer sidebasert, hierarkisk, og modal grensesnitt, som kan alle bruke sammenhenger for å lage dynamisk innhold.

I denne opplæringen jeg skal vise deg hvordan du setter opp og manipulere hvert grensesnitt type, og hva bruke saker de er hver designet for.

Krav

Denne opplæringen forutsetter at du kjører Xcode 6.2+ og er komfortabel med å skape en grunnleggende Apple Watch-applikasjonen. Hvis ikke, kan du lese noen av de andre WatchKit tutorials på Tuts + og deretter komme tilbake til denne. Du må også laste ned starter prosjektet fra GitHub.

1. Side-baserte grensesnitt

Den første typen grensesnitt du skal implementere i din Apple Watch applikasjonen vil være en side-basert en. Disse typer grensesnitt fungerer svært likt standard startskjermen på en iOS-enhet for å vise flere sider med informasjon i et sett rekkefølge. Side-basert grensesnitt er best egnet for når du trenger å vise flere skjermbilder av informasjon som er relatert til hverandre.

Åpne starter prosjektet i Xcode og naviger til Interface.storyboard. Dreieboken inneholder allerede seks grensesnittstyringene som deg en se nedenfor.

For å opprette en side-basert grensesnitt, må du opprette en neste side
forholdet naturlig overgang mellom grensesnittstyringene du vil koble . Trykk på Kontroll-tasten på tastaturet, og klikk og dra fra ett grensesnitt kontrolleren til en annen. Kontroll og dra fra den første grensesnittet styringen til andre, og hvis det gjøres riktig, bør et forhold Overgang pop-up vises. Fra denne menyen velger du den neste siden alternativet som vist nedenfor.

Følg de samme trinnene for å koble den andre grensesnitt kontrolleren til den tredje. Dreieboken skal nå vise segues mellom de tre beste grensesnittstyringene. Legg merke til at rekkefølgen du opprette disse segues bestemmer rekkefølgen grensesnittene vil vises i WatchKit app.

Bygg og kjøre programmet, og åpne en Apple Watch som en ekstern skjerm i iOS Simulator. Du vil se at app viser Første side interface controller og har tre prikker nederst, som representerer de tre tilgjengelige sider. Du kan sveipe mellom de tre sidene ved å sveipe til venstre eller høyre, akkurat som du ville gjort på en iOS-enhet.

Når du bruker en side-basert grensesnitt, kan du angi hvilket grensesnitt kontrolleren du vil skal vises ved lansering. Dette gjøres ved hjelp av becomeCurrentPage metoden. Åpne SecondPageInterfaceController.swift og legg til følgende linje til awakeWithContext (_ :) metode:
styre func awakeWithContext (kontekst:? AnyObject) {super.awakeWithContext (kontekst) self.becomeCurrentPage ()}

Bygg og drive din app igjen, og du vil se at den andre siden er nå presentert på lanseringen.

Under kjøring, kan du også angi en eksplisitt i hvilken rekkefølge for å vise sidene i grensesnittet. Dette gjøres ved hjelp av reloadRootControllersWithNames (_:. Sammenhenger :) klasse metode

Den første parameteren med denne metoden er en rekke strenger som inneholder storyboard identifikatorer av grensesnittstyringene du ønsker å laste. Rekkefølgen av identifikatorer i denne matrisen bestemmer rekkefølgen at sidene vises i.

Den andre parameteren er en valgfri AnyObject typen array som inneholder de sammenhenger for hver av sidene. Du vil lære om sammenhenger senere i denne opplæringen. For nå, vil du bare la denne parameteren som null. Erstatt den linjen du nettopp lagt til din awakeWithContext (_ :) metode med følgende:
styre func awakeWithContext (kontekst:? AnyObject) {super.awakeWithContext (kontekst) WKInterfaceController.reloadRootControllersWithNames (["Third Page", "First Page "], sammenhenger. nil)}

Bygg og kjøre programmet ditt, og du vil se at etter lasting er fullført, vil app vise den tredje siden, etterfulgt av den første siden

2. Hierarkisk grensesnitt

I tillegg til sidebaserte grensesnitt, kan du også gjennomføre hierarkiske grensesnitt i en Apple Watch-applikasjonen. Vi snakker om hierarkiske grensesnitt når overgangen mellom grensesnittstyringene bruker en push overgang.

Den oppførselen til en hierarkisk grensesnittet er lik som den UINavigationController klasse i en iOS-app. Denne typen Apple Watch grensesnittet er best egnet for å presentere flere grensesnitt en etter en i en lineær måte.

Revidere Interface.storyboard og dra Main Entry Point pil til Transition grensesnitt kontrolleren som vist nedenfor. Dette vil gjøre det angitte grensesnittet kontrolleren vises først når programmet er lansert

Deretter åpner TransitionInterfaceController.swift og legg til følgende linje i pushButtonPressed metode.
IBAction Func pushButtonPressed () {self.pushControllerWithName ("Hierarkisk Interface", kontekst: null)}

I likhet med reloadRootControllersWithNames (_: sammenhenger :) metoden som du tidligere brukte, den første parameteren for pushControllerWithName (_: kontekst :) er dreieboken identifikator av grensesnittet kontrolleren du ønsker å presse. Den andre parameteren er konteksten for dette nye grensesnittet kontrolleren.

Bygg og kjøre programmet ditt. Du bør se følgende grensesnitt når WatchKit app er ferdig lansering.

Tapping Hierarkisk knappen skal presse neste grensesnitt på skjermen som vist nedenfor.

Du vil merke at det nå er et lille pilen øverst i venstre hjørne av skjermen. Trykk på pilen vil ta deg tilbake til det forrige grensesnittet. Det er også mulig å pop gjeldende grensesnittkontroller i kode. I HierarchalInterfaceController klassen, oppdatere popButtonPressed metode som følger:
IBAction func popButtonPressed () {self.popController ()}

Bygg og kjøre programmet på nytt. Trykke på Pop-knappen skal nå ha samme effekt som å trykke på tilbakepilen øverst til venstre.

Alternativt, hvis du ønsker å gå tilbake til den aller første grensesnittet i hierarkiet, påberope deg popToRootController metoden heller enn popController metoden. For din nåværende app, vil disse metodene både produsere samme resultat som det bare er to grensesnitt i hierarkiet i øyeblikket.

3. Modal grensesnitt

Modal grensesnitt fungere på samme måte som hierarkiske grensesnitt. Den største forskjellen mellom de to er at modale grensesnittene er laget for å vise grensesnitt på toppen av hverandre i stedet for overgangen mellom dem i en lineær måte.

Leder tilbake til TransitionInterfaceController.swift og legge til følgende linje med kode for å den modalButtonPressed metode:
IBAction func modalButtonPressed () {self.presentControllerWithName ("Modal Interface", kontekst: null)}

For å avvise modal grensesnitt, oppdatere dismissButtonPressed metoden som følger i ModalInterfaceController:
IBAction func dismissButtonPressed () {self.dismissController ()}

Bygg og kjøre programmet ditt. Trykk på Modal knappen for å presentere en modal grensesnitt.

En fordel med modale grensesnitt er at du kan modally presentere en side-basert grensesnitt. Dette gjøres ved hjelp av presentControllersWithNames (_: sammenhenger :) metode. Den første parameteren er en rekke storyboard identifikatorer og den andre parameteren er en rekke kontekst stedene. I TransitionInterfaceController.swift, oppdatere gjennomføringen av modalButtonPressed metode som følger:
IBAction func modalButtonPressed () {self.presentControllerWithNames (["Modal Interface", "Hierarkisk Interface"], sammenhenger: nil)}

Run din app og trykk på Modal knappen. En side-basert grensesnitt bør presenteres modally med følgende to grensesnitt:

4. Grensesnitt sammenhenger

Som du har sett fra de ulike metodene som brukes i denne opplæringen så langt, når overgangen til et nytt grensesnitt du kan passere i en sammenheng for å konfigurere grensesnittet som er i ferd med å bli presentert. Konteksten du sender til din nye grensesnittet er valgfri og kan være hvilken som helst datatype (AnyObject?).

Dette betyr at du kan passere alle typer data mellom grensesnitt, fra enkle tall til komplekse datastrukturer . Konteksten er overlevert til det nye grensesnittet i awakeWithContext (_ :) metoden. Fordelen ved å føre en kontekst for en grensesnittkontroller er å konfigurere dens innhold dynamisk, det vil si under kjøring

Åpne TransitionInterfaceController.swift og oppdatere gjennomføring av modalButtonPressed metode som følger:.
IBAction Funk modalButtonPressed () {self.presentControllerWithName ("Modal Interface", kontekst: "Custom Text")}

I ModalInterfaceController.swift, oppdatere gjennomføringen av awakeWithContext (_ :) som følger:
styre func awakeWithContext (kontekst :? AnyObject) {super.awakeWithContext (konteksten) hvis la text = sammenheng? String {button.setTitle (tekst)}}

Vi bruker valgfri binding for å se om den sammenheng inn bli kastet inn i en streng. Hvis den kan, satt vi på knappen tittel til denne verdien.

Bygg og kjøre programmet, og åpne modal grensesnitt. Tittelen på knappen skal ha endret til Custom Text.

Les mer i vår WatchKit Course

Hvis du er interessert i å ta din WatchKit utdanning til neste nivå, kan du ta en titt på vår fulle kurs på WatchKit utvikling.

Konklusjon

I denne opplæringen, lært deg hvordan du setter opp og utnytte de tre hovedtyper grensesnitt tilgjengelig for WatchKit applikasjoner, side -basert, hierarkisk, og modal. Du har også lært å bruke grensesnitt sammenhenger å konfigurere grensesnittstyringene under kjøring. Du nå også vet når det er best å bruke hver av disse typene grensesnitt i dine WatchKit applikasjoner. Du kan lese mer om grensesnittet navigasjon i Apples dokumentasjon.