Uw eerste WatchKit-toepassing gebruikersinterface

Vorige week kondigde Apple de releasedatum voor Apple Watch aan. Het bedrijf bracht ook Xcode 6.2 uit, inclusief ondersteuning voor Apple Watch. Met Xcode 6.2 heb je alles wat je nodig hebt om je eerste app voor Apple Watch te maken.

Nu de releasedatum van Apple Watch is vastgesteld voor april, is het tijd om de ontwikkeling van Apple Watch te leren kennen. In deze zelfstudie maakt u uw eerste WatchKit-toepassing. Onderweg zul je bekend raken met de interne werking van een WatchKit-applicatie en ontdekken dat er veel overeenkomsten zijn met de ontwikkeling van iOS.

voorwaarden

Omdat deze tutorial zich richt op de ontwikkeling van Apple Watch, ga ik ervan uit dat je al bekend bent met de basisprincipes van iOS-ontwikkeling. Als je bijvoorbeeld niet weet welke acties en verkooppunten zijn, raad ik je aan eerst onze introductieles over iOS-ontwikkeling te volgen.

Om mee te gaan, moet je Xcode 6.2 of hoger op je ontwikkelmachine geïnstalleerd hebben. Je kunt Xcode downloaden van het iOS Dev Center of de Mac App Store. Zoals ik eerder al zei, bevat Xcode 6.2 ondersteuning voor Apple Watch. Zonder Xcode 6.2 kunt u niet meegaan.

In deze tutorial zal ik Swift gebruiken als de programmeertaal. Als u niet bekend bent met Swift, heeft u twee opties. Je eerste optie is om vast te houden aan Objective-C. U kunt Apple Watch-applicaties maken met zowel Swift als Objective-C, of ​​een combinatie van beide. Je tweede optie is om hier te stoppen en mijn serie over Swift te lezen of om de cursus van Derek Jensen over de ontwikkeling van Swift te bekijken.

1. Inleiding

U vraagt ​​zich misschien af ​​wat het verschil is tussen een Apple Watch-toepassing en een WatchKit-toepassing. Vorig jaar kondigde Apple aan dat er twee generaties Apple Watch-applicaties, WatchKit-applicaties en native Apple Watch-applicaties zullen zijn. De voorwaarde inheems is een beetje misleidend, omdat WatchKit-applicaties ook native applicaties zijn. Het grootste verschil is de applicatiearchitectuur. Laten we eerst naar native applicaties kijken.

Native applicaties

Apple heeft ons nog niet veel verteld over native applicaties. Het bedrijf kondigde alleen aan dat native applicaties in de herfst van dit jaar op Apple Watch zullen verschijnen. Het is onduidelijk hoe de SDK eruit zal zien en wat ontwikkelaars kunnen doen met een native Apple Watch-toepassing. Met andere woorden, we hebben voorlopig geen andere keuze dan ons te concentreren op WatchKit-applicaties.

Dat gezegd hebbende, gebaseerd op de informatie van Apple, zal het grootste verschil zijn dat native applicaties kunnen draaien zonder een extensie die op een gekoppelde iPhone draait. Vanuit een architectonisch oogpunt zal native applicatie lijken op native iOS-applicaties op iPhone en iPad.

WatchKit-toepassingen

Zoals de naam al aangeeft, vertrouwt een WatchKit-applicatie volledig op het WatchKit-framework om zijn werk te doen. Het WatchKit-framework is een handige oplossing die de kloof tussen de Apple Watch en een gekoppelde iPhone overbrugt.

Hoewel het idee eenvoudig is, is de implementatie minder. De WatchKit-applicatie draait op de Apple Watch en heeft de leiding over twee dingen:

  • presentatie van de gebruikersinterface
  • reageren op gebruikersinteractie

De bedrijfslogica en zwaar tillen worden verzorgd door een Apple Watch-extensie die op een gekoppelde iPhone draait. Het volgende diagram visualiseert de rol van het WatchKit-framework.

Eventuele gebeurtenissen die worden geactiveerd door de gebruiker die communiceert met de WatchKit-toepassing, worden doorgestuurd naar de extensie die op de gekoppelde iPhone wordt uitgevoerd. Dit impliceert dat de WatchKit-applicatie geen zin heeft zonder een gekoppelde iPhone. Het kan eenvoudigweg zijn werk niet doen zonder dat de extensie op een iPhone draait.

2. Projectinstellingen

Met dit in gedachten is het tijd om uw eerste WatchKit-toepassing te maken. De applicatie die we gaan maken, zal de gebruiker de weersomstandigheden van verschillende plaatsen op de planeet laten zien. Het is het equivalent van de weerapplicatie op iOS.

Stap 1: Maak een project

Start Xcode en selecteer Nieuw> Project ... van de het dossier menu. Selecteer de Toepassing enkele weergave sjabloon uit de lijst van iOS> Applicatie sjablonen. U vraagt ​​zich misschien af ​​waarom we geen WatchKit-applicatie maken. Een WatchKit-applicatie maakt altijd deel uit van een iOS-applicatie. Dit wordt duidelijker als we de WatchKit-applicatie aan het project hebben toegevoegd.

Geef je sollicitatie een naam Regendruppel, reeks Taal naar Snel, en apparaten naar iPhone. Zorg ervoor dat Gebruik kerngegevens is uitgeschakeld.

Vertel Xcode waar u de projectbestanden wilt opslaan en klik creëren. Merk op dat we een plain vanilla Xcode-project hebben gemaakt voor een iOS-applicatie met één weergave. Als u de. Bouwt en uitvoert Regendruppel doel in de iOS Simulator, ziet u een witte weergave. Dit is wat we verwachten van een iOS-applicatie op basis van de Toepassing enkele weergave sjabloon.

Voordat we verder gaan, bekijk de projectstructuur in de Project Navigator en de lijst met doelen. We hebben momenteel twee doelen, Regendruppel, voor de iOS-applicatie en RainDropTests, voor de tests van de Regendruppel doelwit. Laten we een WatchKit-toepassing aan de mix toevoegen.

Stap 2: Maak WatchKit-doelen

kiezen Nieuw> Doel ... van Xcode's het dossier menu en kies WatchKit-app van de iOS> Apple Watch sectie aan de linkerkant.

Voor het doel van deze zelfstudie schakelt u het vinkje uit Inclusief meldingencene en Neem Glance Scene op. In deze zelfstudie behandelen we geen meldingen en blikken. Raken Af hebben in de rechterbenedenhoek om de WatchKit-toepassing aan uw Xcode-project toe te voegen.

Wanneer u klikt Af hebben, Xcode maakt een aantal bestanden, groepen en doelen. Xcode maakt ook een schema om de WatchKit-applicatie in de iOS Simulator uit te voeren en zal je vragen of het dat schema moet activeren. Klik Activeren om het te activeren.

3. Projectanatomie

Door een WatchKit-toepassing aan ons project toe te voegen, heeft Xcode twee doelen voor ons gemaakt, een voor de WatchKit-extensie, RainDrop WatchKit-extensie, en één voor de WatchKit-applicatie, RainDrop WatchKit-app.

De WatchKit-extensie wordt uitgevoerd op de iPhone die is gekoppeld aan de Apple Watch. Het is verantwoordelijk voor de bedrijfslogica van de WatchKit-applicatie. De WatchKit-applicatie wordt uitgevoerd op de Apple Watch en is verantwoordelijk voor de presentatie van de gebruikersinterface en de afhandeling van evenementen.

Om alles netjes en opgeruimd te houden, heeft Xcode voor ons twee groepen gemaakt in de Project Navigator. De eerste groep, RainDrop WatchKit-extensie, bevat de bronbestanden en items voor de WatchKit-extensie. De tweede groep, Regendruppel WatchKit-app, bevat de items voor de WatchKit-applicatie.

De onderliggende architectuur van een WatchKit-toepassing is duidelijk op basis van de inhoud van deze groepen. De Regendruppel WatchKit-app groep bevat bijvoorbeeld geen bronbestanden. Het bevat alleen een storyboard en items voor de gebruikersinterface van de WatchKit-toepassing. De Regendruppel WatchKit-extensie bevat één bronbestand, InterfaceController.swift, maar het bevat geen storyboard. Dit is logisch als u bedenkt dat de extensie verantwoordelijk is voor de bedrijfslogica van de WatchKit-applicatie terwijl de WatchKit-applicatie verantwoordelijk is voor de gebruikersinterface..

Apple gebruikt de term applicatie voor verschillende concepten. Het is belangrijk dat u begrijpt dat een WatchKit-applicatie uit twee delen bestaat, een WatchKit-extensie die wordt uitgevoerd op een gekoppelde iPhone en een WatchKit-toepassing die wordt uitgevoerd op de Apple Watch. Een WatchKit-applicatie kan zijn werk niet doen zonder zijn extensie. Dat is de sleutel om de architectuur van een WatchKit-toepassing te begrijpen.

4. Build and Run

Voordat we de WatchKit-applicatie bouwen en uitvoeren, is het handig om te begrijpen wat er gaat gebeuren als je raakt Command-R. Wanneer Xcode klaar is met het bouwen van de iOS-applicatie, de WatchKit-extensie en de WatchKit-applicatie, zal het de iOS-applicatie, de WatchKit-extensie en de WatchKit-applicatie op de iOS Simulator installeren. Vervolgens worden de WatchKit-extensie en de WatchKit-app uitgevoerd in de iOS-simulator.

Als u niet bekend bent met extensies, vraagt ​​u zich misschien af ​​waarom het de iOS-toepassing op de iOS-simulator installeert. Een extensie is altijd gekoppeld aan een iOS-applicatie, dus de iOS-applicatie is vereist om de WatchKit-extensie uit te voeren. Op dezelfde manier kan een WatchKit-applicatie alleen op een Apple Watch draaien als zijn tegenhanger, de WatchKit-extensie, wordt uitgevoerd op een iPhone die is gekoppeld aan de Apple Watch. Het is een redelijk complexe architectuur als je gewend bent om standalone iOS-applicaties te ontwikkelen.

Wanneer u op drukt Command-R op uw toetsenbord of klik op de Rennen knop in de linkerbovenhoek, Xcode zal uw WatchKit-applicatie bouwen en uitvoeren in de iOS Simulator. Als de WatchKit-toepassing niet wordt gestart, controleert u of u het juiste schema gebruikt.

Het uitvoeren van de WatchKit-applicatie is niet erg spectaculair aangezien je alleen een zwart scherm ziet met de huidige tijd in de rechterbovenhoek. Laten we de gebruikersinterface van onze WatchKit-applicatie een beetje interessanter maken.

5. Maak de gebruikersinterface

Omdat je deze tutorial aan het lezen bent, neem ik aan dat je bekend bent met de ontwikkeling van iOS. Zoals je weet, omvat de moderne iOS-ontwikkeling automatische lay-out en storyboards. Dit is maar gedeeltelijk waar voor WatchKit-ontwikkeling. We hebben al ontdekt dat een WatchKit-applicatie een storyboard gebruikt voor zijn gebruikersinterface. Auto-indeling is echter afwezig.

Open Interface.storyboard in de RainDrop WatchKit-app groep om uit te vinden hoe een gebruikersinterface te bouwen voor onze WatchKit-applicatie.

Het storyboard bevat een enkele scène, de Scène van interfacecontroller. In de Scene Navigator, rechts van de Project Navigator, je kunt zien dat het Scène van interfacecontroller bevat een Interface Controller en een indicatie dat deze scène het belangrijkste toegangspunt is van onze WatchKit-applicatie.

Wat is een interfacecontroller??

De twee vragen die u zichzelf waarschijnlijk stelt, zijn "Wat is een interfacecontroller?" en "Hoe verschilt dit van een weergavecontroller?" Een interfacecontroller is een instantie van de WKInterfaceController klasse of een subklasse daarvan. De WKInterfaceController klasse wordt gedefinieerd in het WatchKit-framework.

De naam van deze klasse verwijst naar de verschillen met UIViewController. Zoals u weet, bestuurt een weergavecontroller een weergave of een weergavehiërarchie. Een interface-controller heeft echter geen controle over een weergave, maar bestuurt een interface, dat wil zeggen een scherm met inhoud. Wat dit betekent, zal duidelijker worden zodra we beginnen met de implementatie van de interface-controller.

Een interfacecontroller is nog steeds een echte controller omdat deze het gedrag van de gebruikersinterface bestuurt. Met een interfacecontroller kunt u de gebruikersinterface van uw WatchKit-toepassing configureren en reageren op de gebeurtenissen die de WatchKit-toepassing doorstuurt naar de WatchKit-extensie. Hoe dit werkt zal later in deze tutorial duidelijker worden.

Een lay-out maken

Het lay-outsysteem dat WatchKit ons biedt, is primitief in vergelijking met de kracht en flexibiliteit van Auto Layout. Het lay-outsysteem doet denken aan hoe webpagina's worden opgemaakt met HTML en CSS.

Een van de bouwstenen van het WatchKit-lay-outsysteem is de WKInterfaceGroup klasse. Een exemplaar van deze klasse is niets meer dan een container die andere interface-elementen kan bevatten, zoals labels, tabellen, enz. Je kunt het vergelijken met een

element op een webpagina. Het biedt structuur en bepaalt de lay-out samen met andere groepen van de lay-out.

Van de Objectbibliotheek Voeg aan de rechterkant twee groepen toe aan de interface-controller, zoals hieronder weergegeven.

Is het je opgevallen dat de groepen automatisch op hun plaats klikken? Het lay-outsysteem gedraagt ​​zich heel anders dan Auto Layout. Een ander belangrijk detail is dat de container van de interfacecontroller ook een groep is, geen zicht. Dit betekent dat je de groepen aan een andere groep hebt toegevoegd. Dit is goed, omdat groepen kunnen worden genest, waardoor ontwikkelaars vrij complexe lay-outs kunnen maken voor hun WatchKit-toepassingen.

Interface-elementen toevoegen

Voeg een label toe vanuit de Objectbibliotheek naar de topgroep en kijk wat er gebeurt. De grootte van de groep neemt af naargelang het formaat van het label. De omtrek van een lege groep is niets meer dan een tijdelijke aanduiding. Een groep past de grootte altijd aan aan de inhoud.

Selecteer het label en open de Identiteitsinspecteur aan de rechterkant. Merk op dat het label dat je hebt toegevoegd van het type is WKInterfaceLabel, niet UILabel. Hoewel WatchKit-toepassingen veel elementen van de gebruikersinterface kunnen hebben die lijken op die in iOS-toepassingen, zijn ze verschillend. De WKInterfaceLabel klasse, bijvoorbeeld, erft van WKInterfaceObject in plaats van UIView en UIResponder.

Open het label met het label geselecteerd Kenmerken Inspector aan de rechterkant. Onder Grootte, breedte instellen op Ten opzichte van Container om het zo breed te maken als het scherm van de Apple Watch. Verander het lettertype in opschrift om het een beetje meer op te laten vallen en de tekst van het label te veranderen in Cupertino. U ziet dat u de lettertypefamilie niet kunt wijzigen en dat u de lettergrootte niet handmatig kunt aanpassen.

Omdat onze WatchKit-applicatie de weersomstandigheden van verschillende plaatsen op aarde weergeeft, moeten we ook een label voor de temperatuur toevoegen. Het zou ook leuk zijn om de lokale datum en tijd van de locatie te weten.

Voeg een tweede label toe aan de bovenste groep door een label te slepen in de Scene Navigator. Wacht. Dat klopt niet. U hebt een label aan de juiste groep toegevoegd, maar het wordt niet weergegeven in de interface.

Standaard heeft een groep een horizontaal lay-out. U kunt dit controleren door de Kenmerken Inspector en het inspecteren van zijn lay-out eigendom. Dit betekent dat de interface-elementen die het bevat horizontaal zijn opgemaakt. Het temperatuurlabel is aanwezig in de groep, maar is op dit moment niet zichtbaar. Wijzig de groep lay-out eigendom aan Verticaal om het probleem op te lossen.

Voeg een ... toe Datum interface-element naar de tweede groep. Datuminterface-elementen zijn instanties van de WKInterfaceDate klasse. Dit interface-element bevat een label en is perfect voor het weergeven en opmaken van datums. Begin met het veranderen van de breedte van het element in Ten opzichte van Container en de tekstuitlijning van het label naar rechts uitgelijnd.

Het is niet nodig om het te gebruiken NSDateFormatter class om datums op te maken. De WKInterfaceDate class verwerkt de datumopmaak voor ons. Verander de Formaat van de WKInterfaceDate bijvoorbeeld naar gewoonte en stel het formaat in M / d, h: mm a. De gebruikersinterface zou er nu zo uit moeten zien.

Bouw en run de WatchKit-applicatie in de iOS Simulator om te zien wat we tot nu toe hebben gekregen. De applicatie is momenteel niet erg nuttig, omdat we met statische inhoud werken. We zullen dit in de volgende tutorial oplossen.

Conclusie

In deze zelfstudie hebben we de basisprincipes van de ontwikkeling van de WatchKit-applicatie besproken. Ik ben er zeker van dat u het ermee eens bent dat het ontwikkelen van WatchKit-applicaties zowel bekend als buitenlands is. We kunnen de tools gebruiken die we gewend zijn, maar er zijn een aantal belangrijke verschillen die tijd vergen om zich comfortabel te voelen. In het tweede deel van deze tutorial zullen we ons concentreren op de WatchKit-extensie om weergegevens op te halen en die gegevens weer te geven in de WatchKit-applicatie.