Din första WatchKit-applikation Användargränssnitt

Apple meddelade förra veckan releasedatumet för Apple Watch. Företaget släppte också Xcode 6.2, vilket inkluderar support för Apple Watch. Med Xcode 6.2 har du allt du behöver för att skapa din första applikation för Apple Watch.

Med Apple Watch release datum som fastställts för april är det dags att lära sig repen av Apple Watch-utvecklingen. I den här handledningen skapar du ditt första WatchKit-program. Under tiden kommer du att bli bekant med de inre funktionerna i en WatchKit-applikation och ta reda på att det finns många likheter med iOS-utveckling.

förutsättningar

Eftersom denna handledning fokuserar på Apple Watch-utveckling antar jag att du redan är bekant med grunderna för iOS-utveckling. Om du inte vet vilka åtgärder och butiker som till exempel, rekommenderar jag att du först tar vår introduktionskurs på IOS-utveckling.

För att följa med måste du ha Xcode 6.2 eller högre installerad på din utvecklingsmaskin. Du kan ladda ner Xcode från iOS Dev Center eller Mac App Store. Som jag nämnde tidigare innehåller Xcode 6.2 stöd för Apple Watch. Utan Xcode 6.2 kommer du inte att kunna följa med.

I denna handledning använder jag Swift som programmeringsspråk. Om du inte är bekant med Swift har du två alternativ. Ditt första alternativ är att hålla fast vid Objective-C. Du kan skapa Apple Watch-program med både Swift och Objective-C, eller en kombination av de två. Ditt andra alternativ är att stanna här och läsa min serie på Swift eller titta på Derek Jensens kurs om Swift utveckling.

1. Introduktion

Du kanske undrar vad skillnaden är mellan en Apple Watch-applikation och en WatchKit-applikation. Förra året meddelade Apple att det kommer att finnas två generationer av Apples Watch-applikationer, WatchKit-applikationer och inhemska Apple Watch-applikationer. Termen inföding är lite vilseledande eftersom WatchKit-applikationer också är inhemska applikationer. Huvudskillnaden är applikationsarkitekturen. Låt oss titta på inhemska applikationer först.

Native Applications

Apple har inte sagt oss mycket om inhemska applikationer än. Företaget meddelade bara att inhemska applikationer kommer fram till Apple Watch under hösten i år. Det är oklart hur SDK kommer att se ut och vilka utvecklare kommer att kunna göra med en inbyggd Apple Watch-applikation. Med andra ord har vi inget annat val än att fokusera på WatchKit-applikationer för tillfället.

Med detta sagt, baserat på Apples information, kommer den största skillnaden att inhemska applikationer kommer att kunna köras utan att en förlängning körs på en parad iPhone. Ur arkitektonisk synvinkel kommer inbyggd applikation att likna inbyggda iOS-applikationer på iPhone och iPad.

WatchKit Applications

Som namnet antyder, bygger en WatchKit-applikation helt på WatchKit-ramen för att utföra sitt arbete. WatchKit-ramen är en smidig lösning som överbryggar klyftan mellan Apple Watch och en parad iPhone.

Medan idén är enkel är genomförandet mindre. WatchKit-programmet körs på Apple Watch och ansvarar för två saker:

  • presentera användargränssnittet
  • svara på användarens interaktion

Affärslogiken och tunga lyft tas hand om med en Apple Watch-förlängning som körs på en parad iPhone. Följande diagram visualiserar rollen för WatchKit-ramen.

Eventuella händelser som utlöses av användaren som interagerar med WatchKit-applikationen vidarebefordras till tillägget som körs på den parade iPhone. Detta innebär att WatchKit-programmet inte går att använda utan en parad iPhone. Det kan helt enkelt inte göra sitt arbete utan att förlängningen körs på en iPhone.

2. Projektinställningar

Med detta i åtanke är det dags att skapa din första WatchKit-applikation. Den ansökan som vi ska skapa kommer att visa användaren väderförhållandena på olika platser på planeten. Det motsvarar väderapplikationen på IOS.

Steg 1: Skapa projekt

Starta Xcode och välj Nytt> Projekt ... från Fil meny. Välj Enkel visningsprogram mall från listan över iOS> Application mallar. Du kanske undrar varför vi inte skapar ett WatchKit-program. En WatchKit-applikation är alltid en del av ett iOS-program. Det blir tydligare när vi har lagt till WatchKit-programmet i projektet.

Namn på din ansökan Raindrop, uppsättning Språk till Snabb, och enheter till iPhone. Se till Använd kärndata är avmarkerad.

Berätta Xcode där du vill spara projektfilerna och slå Skapa. Observera att vi har skapat en vanlig vanilj Xcode-projekt för en enda visning av iOS-programmet. Om du bygger och kör Raindrop målet i iOS-simulatorn kommer du att se en vit vy. Det här är vad vi förväntar oss av en iOS-applikation baserad på Enkel visningsprogram mall.

Innan vi fortsätter, ta en bra titt på projektstrukturen i Project Navigator och listan över mål. Vi har för närvarande två mål, Raindrop, för iOS-programmet och RainDropTests, för testen av Raindrop mål. Låt oss lägga till ett WatchKit-program i mixen.

Steg 2: Skapa WatchKit-mål

Välj Ny> Mål ... från Xcode s Fil menyn och välj WatchKit App från iOS> Apple Watch avsnitt till vänster.

Avmarkera med tanke på denna handledning Inkludera anmälningsplats och Inkludera blickplats. Vi kommer inte att täcka anmälningar och blickar i denna handledning. Träffa Avsluta längst ner till höger om du vill lägga till WatchKit-programmet i ditt Xcode-projekt.

När du klickar Avsluta, Xcode skapar ett antal filer, grupper och mål. Xcode skapar också ett schema för att köra WatchKit-programmet i iOS-simulatorn och det kommer att fråga dig om det ska aktivera det här schemat. Klick Aktivera för att aktivera det.

3. Projektanatomi

Genom att lägga till ett WatchKit-program i vårt projekt har Xcode skapat två mål för oss, en för WatchKit-förlängningen, RainDrop WatchKit Extension, och en för WatchKit-applikationen, RainDrop WatchKit App.

WatchKit-tillägget kommer att köras på iPhone som är parat till Apple Watch. Den ansvarar för affärslogiken för WatchKit-applikationen. WatchKit-programmet körs på Apple Watch och ansvarar för att presentera användargränssnittet och hanteringshändelserna.

För att hålla allt gott och snyggt har Xcode skapat två grupper för oss i Project Navigator. Den första gruppen, RainDrop WatchKit Extension, innehåller källfiler och tillgångar för WatchKit-tillägget. Den andra gruppen, Raindrop WatchKit App, innehåller tillgångarna för WatchKit-programmet.

Den underliggande arkitekturen för en WatchKit-applikation är tydligt baserad på innehållet i dessa grupper. De Raindrop WatchKit App gruppen innehåller till exempel inga källfiler. Det innehåller bara en storyboard och tillgångar för användargränssnittet för WatchKit-programmet. De Raindrop WatchKit Extension innehåller en källfil, InterfaceController.swift, men det innehåller inte en storyboard. Det här är vettigt om du kommer ihåg att förlängningen är ansvarig för Business Logic för WatchKit-programmet medan WatchKit-programmet är ansvarigt för användargränssnittet.

Apple använder termen ansökan för flera begrepp. Det är viktigt att du förstår att ett WatchKit-program består av två delar, en WatchKit-förlängning som körs på en parad iPhone och ett WatchKit-program som körs på Apple Watch. En WatchKit-applikation kan inte göra sitt arbete utan dess förlängning. Det är nyckeln till att förstå arkitekturen i ett WatchKit-program.

4. Bygg och kör

Innan vi bygger och kör WatchKit-programmet är det användbart att förstå vad som händer när du träffar Kommando-R. När Xcode har slutfört byggandet av iOS-programmet, WatchKit-tillägget och WatchKit-programmet installeras det iOS-programmet, WatchKit-tillägget och WatchKit-programmet på iOS-simulatorn. Den kör sedan WatchKit-förlängningen och WatchKit-programmet i iOS-simulatorn.

Om du inte är bekant med tillägg, kanske du undrar varför det installerar iOS-programmet på iOS-simulatorn. En förlängning är alltid associerad med ett iOS-program, så iOS-programmet krävs för att WatchKit-tillägget ska kunna köras. På samma sätt kan en WatchKit-applikation bara köras på en Apple Watch om dess motpart, WatchKit-förlängningen, körs på en iPhone som är kopplad till Apple Watch. Det är en ganska komplex arkitektur om du är van att utveckla fristående iOS-applikationer.

När du trycker på Kommando-R på ditt tangentbord eller klicka på Springa knappen längst upp till vänster, kommer Xcode att bygga och köra ditt WatchKit-program i iOS-simulatorn. Om WatchKit-programmet inte startas, dubbelklicka sedan på att du använder rätt ordning.

Att köra WatchKit-programmet är inte särskilt spektakulärt eftersom du bara ser en svart skärm med den aktuella tiden längst upp till höger. Låt oss göra användargränssnittet för vårt WatchKit-program lite mer intressant.

5. Skapa användargränssnittet

Sedan du läser den här handledningen antar du att du är bekant med iOS-utveckling. Som du vet, innebär modern iOS-utveckling Auto Layout och storyboards. Detta är endast delvis sannolikt för WatchKit-utveckling. Vi har redan upptäckt att en WatchKit-applikation använder en storyboard för sitt användargränssnitt. Automatisk layout är emellertid frånvarande.

Öppna Interface.storyboardRainDrop WatchKit App grupp för att ta reda på hur man bygger ett användargränssnitt för vår WatchKit-applikation.

Berättelsen innehåller en enda scen, Interface Controller Scene. I Scene Navigator, på höger om Project Navigator, du kan se att Interface Controller Scene innehåller en Gränssnittskontroller och en indikation på att den här scenen är huvudpunkten för vår WatchKit-applikation.

Vad är en gränssnittscontroller?

De två frågorna du förmodligen frågar dig själv är "Vad är en gränssnittsstyrenhet?" och "Hur skiljer det sig från en kontroller?" En gränssnittskontroller är en förekomst av WKInterfaceController klass eller en underklass därav. De WKInterfaceController klassen definieras i WatchKit-ramen.

Namnet på den här klassen visar på skillnaderna med UIViewController. Som du vet, kontrollerar en vykontrollant en vy eller visa hierarkin. En gränssnittskontroll kontrollerar emellertid inte en vy, utan styr en gränssnitt, det vill säga en skärmdump av innehåll. Vad detta betyder kommer att bli tydligare när vi börjar implementera gränssnittskontrollen.

En gränssnittsstyrenhet är fortfarande en sann kontroller genom att den styr användargränssnittets beteende. Med en gränssnittskontroll kan du konfigurera användargränssnittet för ditt WatchKit-program och svara på händelserna som WatchKit-programmet vidarebefordrar till WatchKit-tillägget. Hur detta fungerar kommer att bli tydligare senare i denna handledning.

Skapa en layout

Layoutsystemet WatchKit ger oss med är primitivt jämfört med kraften och flexibiliteten hos Auto Layout. Layoutsystemet påminner om hur webbsidor läggs ut med HTML och CSS.

Ett av byggnadsblocken i WatchKit layoutsystemet är WKInterfaceGroup klass. En förekomst av den här klassen är inget annat än en behållare som kan hålla andra gränssnittselement, t.ex. etiketter, tabeller etc. Du kan jämföra det med en

element på en webbsida. Det ger struktur och bestämmer layouten tillsammans med andra grupper i layouten.

Från Objektbibliotek till höger, lägg till två grupper till gränssnittskontrollen enligt nedan.

Har du märkt att grupperna automatiskt sitter på plats? Layoutsystemet beter sig väldigt annorlunda än Auto Layout. En annan viktig detalj är att behållaren i gränssnittskontrollen också är en grupp, inte en vy. Det betyder att du har lagt till grupperna i en annan grupp. Det här är bra eftersom grupper kan nästas, så att utvecklare kan skapa ganska komplexa layouter för sina WatchKit-applikationer.

Lägga till gränssnittselement

Lägg till en etikett från Objektbibliotek till den övre gruppen och se vad som händer. Gruppens storlek minskar för att passa märkets storlek. Översikten av en tom grupp är inget mer än en platshållare. En grupp anpassar alltid sin storlek till innehållets innehåll.

Markera etiketten och öppna Identitetsinspektör till höger. Observera att etiketten du lagt till är av typen WKInterfaceLabel, inte UILabel. Även om WatchKit-applikationer kan ha många användargränssnitt som liknar dem som finns i iOS-applikationer, är de olika. De WKInterfaceLabel klass, till exempel ärver från WKInterfaceObject istället för UIView och UIResponder.

Med etiketten markerad, öppna Attribut Inspector till höger. Under Storlek, ställa in bredd till Relativt till behållaren för att göra den så bred som skärmen på Apple Watch. Ändra teckensnittet till Rubrik för att få det att stå ut lite mer och ändra etikettens text till Cupertino. Observera att du inte kan ändra teckensnittsfamiljen eller kan du manuellt justera typstorleken.

Eftersom vår WatchKit-applikation kommer att visa väderförhållandena på olika platser på planeten, måste vi också lägga till en etikett för temperaturen. Det skulle också vara trevligt att känna till lokalplatsens datum och tidpunkt.

Lägg till en andra etikett i den övre gruppen genom att dra en etikett i Scene Navigator. Vänta. Det är inte rätt. Du har lagt till en etikett i rätt grupp, men den visas inte i gränssnittet.

Som standard har en grupp en horisontell layout. Du kan verifiera detta genom att öppna Attribut Inspector och inspekterar dess Layout fast egendom. Det innebär att gränssnittselementen innehåller den horisontella. Temperaturmärket är närvarande i gruppen, men det är inte synligt just nu. Ändra gruppens Layout egendom till Vertikal för att lösa problemet.

Lägg till en Datum gränssnittselement till den andra gruppen. Datumgränssnittselement är instanser av WKInterfaceDate klass. Detta gränssnittselement innehåller en etikett och är perfekt för visning och formatering. Börja med att ändra elementets bredd till Relativt till behållaren och etikettens textjustering till högerinriktad.

Det finns ingen anledning att använda NSDateFormatter klass för att formatera datum. De WKInterfaceDate klass hanterar datumformatering för oss. Ändra Formatera av WKInterfaceDate till exempel Beställnings och ställa in formatet till M / d, h: mm a. Användargränssnittet ska nu se ut så här.

Bygg och kör WatchKit-programmet i iOS-simulatorn för att se vad vi har hittills. Applikationen är inte särskilt användbar just nu eftersom vi arbetar med statiskt innehåll. Vi fixar det här i nästa handledning.

Slutsats

Vi har täckt de grundläggande grunderna i WatchKit applikationsutveckling i denna handledning. Jag är säker på att du håller med om att utveckla WatchKit-applikationer känns både välkända och utländska. Vi kan använda verktygen vi är vana vid, men det finns ett antal viktiga skillnader som tar tid att bli bekväma med. I den andra delen av denna handledning kommer vi att fokusera på WatchKit-förlängningen för att hämta väderinformation och visa den data i WatchKit-programmet.