Ditt første WatchKit-program Brukergrensesnitt

I forrige uke annonserte Apple utgivelsesdatoen for Apple Watch. Selskapet lanserte også Xcode 6.2, som inkluderer støtte for Apple Watch. Med Xcode 6.2 har du alt du trenger for å lage ditt første program for Apple Watch.

Med Apple Watch-utgivelsesdatoen satt for april, er det på tide å lære tauene i Apple Watch-utviklingen. I denne opplæringen vil du opprette ditt første WatchKit-program. Underveis vil du bli kjent med de indre arbeidene i et WatchKit-program og finne ut at det er mange likheter med iOS-utviklingen.

Forutsetninger

Fordi denne opplæringen fokuserer på Apple Watch-utvikling, antar jeg at du allerede er kjent med grunnleggende iOS-utvikling. Hvis du ikke vet hvilke handlinger og uttak som er, for eksempel, anbefaler jeg deg først, ta vår introduksjonskurs på IOS-utvikling.

For å følge med, må du ha Xcode 6.2 eller høyere installert på utviklingsmaskinen din. Du kan laste ned Xcode fra iOS Dev Center eller Mac App Store. Som nevnt tidligere inkluderer Xcode 6.2 støtte for Apple Watch. Uten Xcode 6.2, vil du ikke kunne følge med.

I denne opplæringen bruker jeg Swift som programmeringsspråk. Hvis du ikke er kjent med Swift, har du to alternativer. Ditt første alternativ er å holde fast med Objective-C. Du kan opprette Apple Watch-programmer med både Swift og Objective-C, eller en kombinasjon av de to. Ditt andre alternativ er å stoppe her og lese min serie på Swift eller se Derek Jensens kurs på Swift utvikling.

1. Introduksjon

Du lurer kanskje på hva forskjellen er mellom en Apple Watch-applikasjon og et WatchKit-program. I fjor annonserte Apple at det vil være to generasjoner av Apple Watch-applikasjoner, WatchKit-applikasjoner og native Apple Watch-applikasjoner. Begrepet innfødt er litt misvisende siden WatchKit-applikasjoner er også innfødte applikasjoner. Hovedforskjellen er applikasjonsarkitekturen. La oss se på innfødte programmer først.

Native Applications

Apple har ikke fortalt oss mye om innfødte applikasjoner ennå. Selskapet kun annonserte at innfødte applikasjoner kommer fram på Apple Watch i høst dette året. Det er uklart hva SDK vil se ut og hvilke utviklere som vil kunne gjøre med en innfødt Apple Watch-applikasjon. Med andre ord har vi ikke annet valg enn å fokusere på WatchKit-applikasjoner for tiden.

Når det er sagt, basert på Apples informasjon, vil hovedforskjellen være at innfødte applikasjoner vil kunne kjøre uten en utvidelse som kjører på en parret iPhone. Fra et arkitektonisk synspunkt, vil den opprinnelige applikasjonen lignes på native iOS-applikasjoner på iPhone og iPad.

WatchKit-applikasjoner

Som navnet antyder, er et WatchKit-program helt avhengig av WatchKit-rammeverket for å gjøre sitt arbeid. WatchKit-rammen er en fin løsning som brer gapet mellom Apple Watch og en parret iPhone.

Mens ideen er enkel, er implementeringen mindre. WatchKit-programmet kjører på Apple Watch og har ansvaret for to ting:

  • presenterer brukergrensesnittet
  • svare på brukerinteraksjon

Forretningslogikken og tung løft tas hånd om av en Apple Watch-utvidelse som kjører på en parret iPhone. Følgende diagram visualiserer rollen som WatchKit-rammeverket.

Eventuelle hendelser utløst av brukeren som interagerer med WatchKit-programmet, blir videresendt til utvidelsen som kjører på den parrede iPhone. Dette innebærer at WatchKit-programmet ikke er til bruk uten en parret iPhone. Det kan ganske enkelt ikke gjøre sitt arbeid uten at utvidelsen kjører på en iPhone.

2. Prosjektoppsett

Med dette i tankene er det på tide å lage ditt første WatchKit-program. Programmet vi skal lage vil vise brukeren værforholdene på forskjellige steder på planeten. Det er det samme som værmeldingen på iOS.

Trinn 1: Opprett prosjekt

Start Xcode og velg Nytt> Prosjekt ... fra Fil Meny. Velg Enkeltvisningsprogram mal fra listen over iOS> Søknad maler. Du lurer kanskje på hvorfor vi ikke lager et WatchKit-program. Et WatchKit-program er alltid en del av et iOS-program. Dette blir tydeligere når vi har lagt WatchKit-programmet til prosjektet.

Navn søknaden din Raindrop, sett Språk til Fort, og enheter til iPhone. Forsikre Bruk Core Data er ukontrollert.

Fortell Xcode hvor du vil lagre prosjektfilene og trykke Skape. Vær oppmerksom på at vi har opprettet et vanlig vanilje-Xcode-prosjekt for en enkelt visning av iOS-programmet. Hvis du bygger og kjører Raindrop målet i iOS-simulatoren, vil du se en hvit visning. Dette er hva vi forventer av et iOS-program basert på Enkeltvisningsprogram mal.

Før vi fortsetter, ta en god titt på prosjektstrukturen i Prosjektnavigator og listen over mål. Vi har for tiden to mål, Raindrop, for iOS-programmet og RainDropTests, for testene av Raindrop mål. La oss legge til et WatchKit-program på mixen.

Trinn 2: Lag WatchKit Mål

Å velge Nytt> Mål ... fra Xcode er Fil menyen og velg WatchKit App fra iOS> Apple Watch delen til venstre.

For formålet med denne opplæringen, fjern markeringen Inkluder varslingsscene og Inkluder glans scene. Vi vil ikke dekke varsler og blikk i denne opplæringen. Truffet Bli ferdig nederst til høyre for å legge til WatchKit-programmet i ditt Xcode-prosjekt.

Når du klikker Bli ferdig, Xcode vil opprette en rekke filer, grupper og mål. Xcode vil også lage et program for å kjøre WatchKit-programmet i iOS-simulatoren, og det vil spørre deg om det skal aktivere den ordningen. Klikk Aktiver for å aktivere den.

3. Prosjektanatomi

Ved å legge til et WatchKit-program i prosjektet, har Xcode opprettet to mål for oss, en for WatchKit-utvidelsen, RainDrop WatchKit Extension, og en for WatchKit-applikasjonen, RainDrop WatchKit App.

WatchKit-utvidelsen vil kjøre på iPhone som er parret til Apple Watch. Den har ansvaret for forretningslogikken i WatchKit-applikasjonen. WatchKit-programmet kjører på Apple Watch og vil være ansvarlig for å presentere brukergrensesnittet og håndteringshendelser.

For å holde alt fint og ryddig, har Xcode opprettet to grupper for oss i Prosjektnavigator. Den første gruppen, RainDrop WatchKit Extension, inneholder kildefilene og eiendelene for WatchKit-utvidelsen. Den andre gruppen, Raindrop WatchKit App, inneholder eiendelene for WatchKit-programmet.

Den underliggende arkitekturen til et WatchKit-program er tydelig basert på innholdet i disse gruppene. De Raindrop WatchKit App gruppe, for eksempel, inneholder ikke noen kildefiler. Den inneholder bare et storyboard og eiendeler for brukergrensesnittet til WatchKit-programmet. De Raindrop WatchKit Extension inneholder en kildefil, InterfaceController.swift, men det inkluderer ikke et storyboard. Dette er fornuftig hvis du husker at utvidelsen er ansvarlig for forretningslogikken til WatchKit-programmet mens WatchKit-applikasjonen er ansvarlig for brukergrensesnittet.

Apple bruker begrepet søknad for flere konsepter. Det er viktig at du forstår at et WatchKit-program består av to deler, en WatchKit-utvidelse som kjører på en parret iPhone og et WatchKit-program som kjører på Apple Watch. En WatchKit-applikasjon kan ikke gjøre sitt arbeid uten forlengelse. Det er nøkkelen til å forstå arkitekturen i et WatchKit-program.

4. Bygg og kjøre

Før vi bygger og kjører WatchKit-programmet, er det nyttig å forstå hva som skal skje når du treffer Kommando-R. Når Xcode er ferdig med å bygge iOS-programmet, WatchKit-utvidelsen og WatchKit-programmet, installeres det iOS-programmet, WatchKit-utvidelsen og WatchKit-programmet på iOS-simulatoren. Den vil deretter kjøre WatchKit-utvidelsen og WatchKit-applikasjonen i iOS-simulatoren.

Hvis du ikke er kjent med utvidelser, kan du kanskje lure på hvorfor det installerer iOS-programmet på iOS-simulatoren. En utvidelse er alltid knyttet til et iOS-program, slik at iOS-programmet kreves for at WatchKit-utvidelsen skal kunne kjøre. På samme måte kan et WatchKit-program bare kjøre på en Apple Watch hvis motparten, WatchKit-utvidelsen, kjører på en iPhone sammenkoblet med Apple Watch. Det er en ganske komplisert arkitektur hvis du er vant til å utvikle frittstående iOS-applikasjoner.

Når du trykker på Kommando-R på tastaturet eller klikk på Løpe knappen øverst til venstre, vil Xcode bygge og kjøre WatchKit-programmet i iOS-simulatoren. Hvis WatchKit-programmet ikke blir lansert, kontroller du at du bruker riktig ordning.

Å kjøre WatchKit-programmet er ikke veldig spektakulært siden du bare ser en svart skjerm med gjeldende tid øverst til høyre. La oss gjøre brukergrensesnittet til vårt WatchKit-program litt mer interessant.

5. Opprett brukergrensesnittet

Siden du leser denne opplæringen antar jeg at du er kjent med iOS-utviklingen. Som du vet, innebærer moderne iOS-utvikling Auto Layout og storyboards. Dette er bare delvis sant for WatchKit-utvikling. Vi har allerede oppdaget at et WatchKit-program bruker et storyboard for brukergrensesnittet. Automatisk oppsett er imidlertid fraværende.

Åpen Interface.storyboardRainDrop WatchKit App gruppe for å finne ut hvordan du bygger et brukergrensesnitt for vårt WatchKit-program.

Historien inneholder en enkelt scene, den Interface Controller Scene. I Scene Navigator, på høyre side av Prosjektnavigator, du kan se at Interface Controller Scene inkluderer en Grensesnittkontroll og en indikasjon på at denne scenen er hovedinngangen til WatchKit-programmet.

Hva er en grensesnittkontroller?

De to spørsmålene du sannsynligvis spør deg selv er "Hva er en grensesnittkontroll?" og "Hvordan er det forskjellig fra en visningskontroller?" En grensesnittkontroll er en forekomst av WKInterfaceController klasse eller en underklasse derav. De WKInterfaceController klassen er definert i WatchKit-rammen.

Navnet på denne klassen antyder forskjellene med UIViewController. Som du vet, kontrollerer en visningscontroller en visning eller ser hierarkiet. En grensesnittkontroller styrer imidlertid ikke en visning, i stedet styrer det et grensesnitt, det vil si en skjerm av innhold. Hva dette betyr vil bli tydeligere når vi begynner å implementere grensesnittkontrolleren.

En grensesnittkontroller er fortsatt en sann kontroller ved at den styrer oppførselen til brukergrensesnittet. Med en grensesnittkontroller kan du konfigurere brukergrensesnittet til WatchKit-programmet og svare på hendelsene WatchKit-programmet videreføres til WatchKit-utvidelsen. Hvordan dette virker, blir tydeligere senere i denne opplæringen.

Opprette en layout

Layoutsystemet WatchKit gir oss med er primitivt i forhold til kraften og fleksibiliteten til Auto Layout. Layoutsystemet minner om hvordan websider legges ut med HTML og CSS.

En av byggeklossene i WatchKit-layoutsystemet er WKInterfaceGroup klasse. En forekomst av denne klassen er ikke noe mer enn en beholder som kan holde andre grensesnittelementer, for eksempel etiketter, tabeller, etc. Du kan sammenligne det med en

element på en nettside. Den gir struktur og bestemmer utformingen sammen med andre grupper av oppsettet.

Fra Objektbibliotek til høyre, legg til to grupper til grensesnittkontrolleren som vist nedenfor.

Har du lagt merke til at gruppene automatisk klikker på plass? Layoutsystemet oppfører seg veldig forskjellig fra Auto Layout. En annen viktig detalj er at beholderen til grensesnittkontrolleren også er en gruppe, ikke en visning. Dette betyr at du har lagt til gruppene i en annen gruppe. Dette er greit siden grupper kan nestes, slik at utviklere kan lage relativt kompliserte layouter for sine WatchKit-applikasjoner.

Legge til grensesnittelementer

Legg til en etikett fra Objektbibliotek til toppgruppen og se hva som skjer. Størrelsen på gruppen minsker for å passe på størrelsen på etiketten. Utsikten over en tom gruppe er ikke noe mer enn en plassholder. En gruppe vil alltid tilpasse størrelsen til innholdet.

Velg etiketten og åpne Identitetsinspektør til høyre. Merk at etiketten du har lagt til er av typen WKInterfaceLabel, ikke UILabel. Selv om WatchKit-applikasjoner kan ha mange brukergrensesnittelementer som ligner de som finnes i iOS-applikasjoner, er de forskjellige. De WKInterfaceLabel klassen, for eksempel arver fra WKInterfaceObject i stedet for UIView og UIResponder.

Når etiketten er valgt, åpner du Attributtsinspektør til høyre. Under Størrelse, sett bredde til I forhold til container for å gjøre det så bredt som skjermen på Apple Watch. Endre skrift til Overskrift for å få det til å skille seg ut litt mer og endre etikettens tekst til Cupertino. Legg merke til at du ikke kan endre skriftfamilien, og du kan heller ikke justere skriftstørrelsen manuelt.

Siden vår WatchKit-applikasjon vil vise værforholdene på forskjellige steder på planeten, må vi også legge til en etikett for temperaturen. Det vil også være fint å vite lokal dato og klokkeslett for lokasjonen.

Legg til en andre etikett i toppgruppen ved å dra en etikett i Scene Navigator. Vente. Det er ikke riktig. Du har lagt til en etikett i den riktige gruppen, men det vises ikke i grensesnittet.

Som standard har en gruppe en horisontal oppsett. Du kan bekrefte dette ved å åpne Attributtsinspektør og inspisere dens Oppsett eiendom. Dette betyr at grensesnittelementene den inneholder, er lagt ut horisontalt. Temperaturetiketten er tilstede i gruppen, men det er ikke synlig for øyeblikket. Endre gruppens Oppsett eiendom til vertikal for å løse problemet.

Legg til en Dato grensesnittelement til den andre gruppen. Datogrensesnittelementer er forekomster av WKInterfaceDate klasse. Dette grensesnittelementet inneholder en etikett og er perfekt for visning og formatering av data. Begynn med å endre elementets bredde til I forhold til container og etikettets tekstjustering til høyrejustert.

Det er ikke nødvendig å bruke NSDateFormatter klasse for å formatere datoer. De WKInterfaceDate klasse håndterer datoformatering for oss. Endre Format av WKInterfaceDate tilfelle til Tilpasset og sett formatet til M / d, h: mm a. Brukergrensesnittet skal nå se slik ut.

Bygg og kjør WatchKit-programmet i iOS-simulatoren for å se hva vi har hittil. Søknaden er ikke særlig nyttig for øyeblikket siden vi jobber med statisk innhold. Vi løser dette i neste opplæring.

Konklusjon

Vi har dekket det grunnleggende om WatchKit applikasjonsutvikling i denne opplæringen. Jeg er sikker på at du er enig i at utviklingen av WatchKit-applikasjoner føles både kjent og utenlandsk. Vi kan bruke verktøyene vi er vant til, men det er en rekke viktige forskjeller som vil ta tid å bli komfortabel med. I den andre delen av denne opplæringen vil vi fokusere på WatchKit-utvidelsen for å hente værdata og vise dataene i WatchKit-programmet.