Your Først WatchKit Application: User Interface
30
Del
6
Del
Dette Cyber ​​mandag Envato Tuts + kurs vil bli redusert til bare $ 3. Ikke gå glipp av.

I forrige uke kunngjorde Apple lanseringsdatoen for Apple Watch. Selskapet har også gitt ut Xcode 6.2, som inkluderer støtte for Apple Watch. Med Xcode 6.2, har du alt du trenger for å lage din første applikasjon for Apple Watch.

Med Apple Watch utgivelsesdatoen satt for april, er det på tide å lære tauene av Apple Watch utvikling. I denne opplæringen, vil du opprette din første WatchKit søknaden. Underveis vil du bli kjent med den interne driften av en WatchKit søknad og finne ut at det er mange likhetstrekk med iOS utvikling.

Forutsetninger

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

Hvis du vil følge med, må du ha Xcode 6.2 eller nyere installert på utviklingsmaskinen . Du kan laste ned Xcode fra iOS Dev Center eller Mac App Store. Som jeg nevnte tidligere, Xcode 6.2 inkluderer støtte for Apple Watch. Uten Xcode 6.2, vil du ikke være i stand til å følge med.

I denne opplæringen, vil jeg være å bruke Swift som programmeringsspråk. Hvis du ikke er kjent med Swift, da har du to alternativer. Din første alternativet er å feste med Objective-C. Du kan opprette Apple Watch applikasjoner med både Swift og Objective-C, eller en kombinasjon av de to. Det andre alternativet er å stoppe her og leser min serie om Swift eller se Derek Jensen kurs på Swift utvikling.

1. Innledning

Du lurer kanskje på hva forskjellen er mellom en Apple Watch søknad og en WatchKit søknad. I fjor, Apple kunngjorde at det vil være to generasjoner av Apple Watch applikasjoner, WatchKit applikasjoner og innfødte Apple Watch applikasjoner. Begrepet innfødte
er litt misvisende siden WatchKit applikasjoner er også native applikasjoner. Den viktigste forskjellen er at søknaden arkitektur. La oss se på native applikasjoner først.

native applikasjoner

Apple har ikke fortalt oss mye om native applikasjoner ennå. Selskapet bare annonsert at native applikasjoner kommer på Apple Watch høsten i år. Det er uklart hva SDK vil se ut og hva utviklere vil være i stand til å gjøre med en innfødt Apple Watch søknad. Med andre ord, har vi ikke annet valg enn å fokusere på WatchKit søknader for tiden.

Når det er sagt, basert på Apples informasjon, den største forskjellen vil være at native applikasjoner vil kunne kjøre uten en forlengelse løping på en sammenkoblet iPhone. Fra et arkitektonisk synspunkt, vil opprinnelige programmet ligne innfødte iOS-applikasjoner på iPhone og iPad.

WatchKit Applications

Som navnet tilsier, en WatchKit søknad helt avhengig av WatchKit rammeverk for å gjøre sitt arbeid. Den WatchKit rammeverket er en kjekk løsning som bygger bro mellom Apple Watch og en sammenkoblet iPhone.

Selv om ideen er enkel, er gjennomføringen mindre grad. Den WatchKit applikasjonen kjører på Apple Watch og har ansvaret for to ting:

presentere brukergrensesnittet

reagerer på brukermedvirkning

Virksomheten logikk og tunge løft er tatt vare på av en Apple Watch forlengelse kjører på en sammenkoblet iPhone. Diagrammet nedenfor visualiserer rolle WatchKit rammeverket.

Eventuelle hendelser utløst av brukeren samspill med WatchKit søknaden blir videresendt til utvidelsen som kjører på den sammenkoblede iPhone. Dette innebærer at WatchKit søknaden er til ingen nytte uten en sammenkoblet iPhone. Det rett og slett ikke kan gjøre sitt arbeid uten forlengelsen kjører på en iPhone.

2. Prosjektet Setup

Med dette i tankene, er det på tide å lage din første WatchKit søknaden. Søknaden vi er i ferd med å skape vil vise brukeren værforholdene i ulike steder på kloden. Det er det samme som været programmet på iOS

Trinn 1:. Opprett prosjekt

Launch Xcode og velg Ny > Prosjekt ... fra Fil-menyen. Velg Enkel visning Application mal fra listen over iOS > Applikasjonsmaler. Du lurer kanskje på hvorfor vi ikke oppretter en WatchKit søknad. En WatchKit programmet er alltid en del av en iOS-applikasjon. Dette blir klarere når vi har lagt til WatchKit søknaden til prosjektet.

navn din søknad regndråpe, satt språk til Swift, og enheter til iPhone. Sørg for at Bruk kjernedata er avmerket.

Fortell Xcode hvor du ønsker å lagre prosjektfiler og traff Opprett. Merk at vi har opprettet en vanlig vanilje Xcode prosjekt for en enkelt visning iOS søknad. Hvis du bygge og drive den regndråpe målet i iOS Simulator, vil du se en hvit visning. Dette er hva vi kan forvente fra en iOS-applikasjon basert på Enkel visning Application mal.

Før vi fortsetter, ta en god titt på prosjektet struktur i prosjekt Navigator og listen over mål. Vi har for tiden to mål, regndråpe, for iOS søknad og RainDropTests, for testene av den regndråpe målet. La oss legge til en WatchKit søknad til mix

Trinn 2:. Lag WatchKit Targets

Velg Ny > Målrette ... fra Xcode Fil-menyen og velg WatchKit App fra iOS > Apple Watch seksjonen til venstre.

For hensikten med denne opplæringen, fjerner du merket for Inkluder Notification Scene og Inkluder Glance Scene. Vi vil ikke bli dekket meldinger og blikk i denne opplæringen. Hit Finish i nedre høyre for å legge til WatchKit programmet til Xcode prosjekt.

Når du klikker Fullfør, vil Xcode skape en rekke filer, grupper og mål. Xcode vil også opprette en ordning for å kjøre WatchKit applikasjonen i iOS Simulator, og det vil spørre deg om den skal aktivere at ordningen. Klikk Aktiver for å aktivere den.

3. Prosjektet Anatomy

Ved å legge en WatchKit søknad til vårt prosjekt, Xcode har laget to mål for oss, en for den WatchKit forlengelse, regndråpe WatchKit Extension, og ett for WatchKit søknad, regndråpe WatchKit App.
< p> WatchKit utvidelsen vil kjøre på iPhone koblet til Apple Watch. Det er ansvarlig for forretningslogikk av WatchKit søknaden. Den WatchKit søknad vil kjøre på Apple Watch og vil være ansvarlig for å presentere brukergrensesnittet og håndtere hendelser.

For å holde alt rent og ryddig, Xcode har opprettet to grupper for oss i prosjekt Navigator. Den første gruppen, regndråpe WatchKit Extension, inneholder kildefilene og eiendeler for WatchKit forlengelse. Den andre gruppen, regndråpe WatchKit App, inneholder midler for WatchKit søknaden.

Den underliggende arkitekturen av et WatchKit søknaden er tydelig basert på innholdet i disse gruppene. The Raindrop WatchKit App gruppe, for eksempel, inneholder ingen kildefilene. Det inkluderer bare et storyboard og eiendeler for brukergrensesnittet til WatchKit søknaden. The Raindrop WatchKit Extension inneholder en kilde fil, InterfaceController.swift, men det inkluderer ikke en storyboard. Dette er fornuftig hvis du husker at utvidelsen er ansvarlig for forretningslogikk av WatchKit søknaden mens WatchKit programmet er ansvarlig for brukergrensesnittet.

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

4. Bygg og Kjør

Før vi bygge og drive den WatchKit søknaden, er det nyttig å forstå hva som skal skje når du treffer Kommando-R. Når Xcode er ferdig å bygge iOS søknaden, WatchKit forlengelse, og WatchKit programmet, vil det installere iOS søknaden, WatchKit forlengelse, og WatchKit programmet på iOS Simulator. Det vil da kjøre WatchKit forlengelse og WatchKit programmet i iOS Simulator.

Hvis du ikke er kjent med extensions, så du kan lure på hvorfor det installerer iOS-applikasjonen på iOS Simulator. En utvidelse er alltid forbundet med en iOS-applikasjonen slik at iOS applikasjonen er nødvendig for WatchKit forlengelse for å kjøre. Langs de samme linjene, kan en WatchKit programmet kun kjøres på en Apple Watch om sin kollega, WatchKit forlengelse, kjører på en iPhone sammenkoblet med Apple Watch. Det er en ganske kompleks arkitektur hvis du er vant til å utvikle frittstående iOS-applikasjoner.

Når du trykker på Kommando-R på tastaturet eller klikk på Kjør-knappen øverst til venstre, vil Xcode bygge og drive din WatchKit programmet i iOS Simulator. Hvis WatchKit søknaden ikke er lansert, og dobbeltsjekke at du bruker riktig ordningen.

Kjøre WatchKit programmet er ikke veldig spektakulære siden du bare se en svart skjerm med gjeldende tid i øverst til høyre. La oss gjøre brukergrensesnittet til vår WatchKit søknad litt mer interessant.

5. Opprett brukergrensesnittet

Siden du leser denne opplæringen, jeg antar du er kjent med iOS utvikling. Som du vet, innebærer Auto Layout og storyboards moderne iOS utvikling. Dette er bare delvis sant for WatchKit utvikling. Vi har allerede oppdaget at en WatchKit programmet bruker en dreiebok for sitt brukergrensesnitt. Auto Layout, derimot, er fraværende.

Åpne Interface.storyboard i regndråpe WatchKit App gruppe for å finne ut hvordan du kan bygge et brukergrensesnitt for vår WatchKit søknad.

Dreieboken inneholder en enkelt scene , Interface Controller Scene. I Scene Navigator, på høyre side av Project Navigator, kan du se at den Interface Controller Scene inkluderer en Interface Controller og en indikasjon på at denne scenen er det viktigste inngangspunkt for vår WatchKit søknad.

Hva er en Interface Controller?

De to spørsmålene er du sannsynligvis spørre deg selv er "Hva er et grensesnitt kontrolleren?" og "Hva skiller den fra en visning kontrolleren?" Et grensesnitt kontrolleren er en forekomst av WKInterfaceController klasse eller en underklasse av disse. Den WKInterfaceController klassen er definert i WatchKit rammeverket.

Navnet på denne klassen hint på forskjellene med UIViewController. Som du vet, kontrollerer en visning controller utsikt eller utsikt hierarki. Et grensesnitt kontrolleren, men kontrollerer ikke en visning, i stedet den styrer et grensesnitt, det vil si en skjerm av innhold. Hva dette betyr vil bli klarere når vi begynner å implementere grensesnittet kontrolleren.

Et grensesnitt kontrolleren er fortsatt et sant kontroller ved at den styrer oppførselen til brukergrensesnittet. Med et grensesnitt kontrolleren, kan du konfigurere brukergrensesnittet til din WatchKit søknad og svare på hendelsene de WatchKit applikasjons fremover til WatchKit forlengelse. Hvordan dette fungerer vil bli klarere senere i denne opplæringen.

Opprette en layout

Oppsettet system WatchKit gir oss er primitive i forhold til kraften og fleksibiliteten til Auto Layout. Oppsettet systemet minner om hvordan websider er lagt ut med HTML og CSS.

En av byggesteinene i WatchKit layout system er WKInterfaceGroup klasse. En forekomst av denne klassen er noe mer enn en beholder som kan inneholde andre elementer grensesnitt, for eksempel etiketter, tabeller, etc. Du kan sammenligne det med en < div > element på en nettside. Det gir struktur og bestemmer layout sammen med andre grupper av oppsettet.

Fra objektbiblioteket på høyre, legger to grupper til grensesnittet kontrolleren som vist nedenfor.

La du merke til at gruppene automatisk klikker på plass? Oppsettet system oppfører seg veldig forskjellig fra Auto Layout. En annen viktig detalj er at beholderen i henhold til grensesnittstyring er også en gruppe, ikke en visning. Dette betyr at du har lagt gruppene til en annen gruppe. Dette er greit siden grupper kan nestes, slik at utviklere å lage ganske kompliserte oppsett for sine WatchKit applikasjoner.

Legge Interface Elements

Legg til en etikett fra objektbiblioteket til toppen gruppen og se hva skjer. Størrelsen på gruppen reduseres til å passe størrelsen på etiketten. Omrisset av en tom gruppen er noe mer enn en plassholder. En gruppe vil alltid justere størrelsen som for innholdet.

Velg etiketten og åpne Identity Inspector til høyre. Merk at etiketten du har lagt er av typen WKInterfaceLabel, ikke UILabel. Selv om WatchKit programmer kan ha mange elementer i brukergrensesnittet som ligner de som finnes i iOS-applikasjoner, de er forskjellige. Den WKInterfaceLabel klasse, for eksempel arver fra WKInterfaceObject stedet for UIView og UIResponder.

Med etiketten valgt, åpner attributter Inspector til høyre. Under Size, for å sette bredde forhold til Container gjøre det så bredt som skjermen på Apple Watch. Endre skriften til overskrift for å gjøre det skiller seg ut litt mer og endre etiketten tekst til Cupertino. Legg merke til at du ikke kan endre skrift familien heller kan du manuelt justere skriftstørrelsen.

Siden vår WatchKit søknaden skal vise værforholdene i forskjellige steder på planeten, trenger vi også å legge til en etikett for temperaturen . Det ville også være fint å vite lokal dato og klokkeslett for plasseringen.

Legg til en annen etikett til toppen gruppen ved å dra en etikett i scene Navigator. Vente. Det er ikke riktig. Du har lagt til en etikett til riktig gruppe, men det er ikke å dukke opp i grensesnittet.

Som standard gruppe har en horisontal layout. Du kan kontrollere dette ved å åpne attributter Inspector og inspisere sin Layout eiendom. Dette betyr at det inneholder grensesnittelementer er lagt ut horisontalt. Temperaturen etiketten er til stede i gruppen, men det er ikke synlig i øyeblikket. Endre konsernets Layout eiendom til Vertical for å løse problemet.

Legg til en dato grensesnitt element til den andre gruppen. Dato grensesnittelementer er forekomster av WKInterfaceDate klassen. Dette grensesnittet element inneholder en etikett og er perfekt for å vise og formatering datoer. Start med å endre elementets bredde forhold til Container og etikettens tekstjustering til høyrejustert

. Det er ikke nødvendig å bruke NSDateFormatter klassen til å formatere datoer. Den WKInterfaceDate klassen håndterer dato formatering for oss. Endre formatet på WKInterfaceDate forekomsten til Custom og angi formatet til M /d, h: mm a. Brukergrensesnittet skal nå se slik ut.

Bygg og kjøre WatchKit programmet i iOS Simulator for å se hva vi har fått så langt. Søknaden er ikke veldig nyttig i øyeblikket siden vi jobber med statisk innhold. Vi skal fikse dette i neste tutorial.

Konklusjon

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