Prima aplicație WatchKit Interfața utilizatorului

Săptămâna trecută, Apple a anunțat data lansării pentru Apple Watch. Compania a lansat, de asemenea, Xcode 6.2, care include suport pentru Apple Watch. Cu Xcode 6.2, aveți tot ce aveți nevoie pentru a crea prima aplicație pentru Apple Watch.

Cu data de lansare a Apple Watch, stabilită pentru luna aprilie, este timpul să înveți corzile dezvoltării Apple Watch. În acest tutorial, veți crea prima aplicație WatchKit. Pe parcurs, vă veți familiariza cu funcționarea interioară a unei aplicații WatchKit și veți afla că există multe asemănări cu dezvoltarea iOS.

Cerințe preliminare

Deoarece acest tutorial se concentrează asupra dezvoltării Apple Watch, presupun că deja cunoașteți noțiunile de bază ale dezvoltării iOS. Dacă nu știți ce acțiuni și puncte de desfacere sunt, de exemplu, vă recomandăm să vă luați primul curs introductiv pe dezvoltarea iOS-ului.

Pentru a urmări de-a lungul timpului, trebuie să aveți Xcode 6.2 sau o versiune superioară instalată pe mașina dvs. de dezvoltare. Puteți descărca Xcode din iOS Dev Center sau din Mac App Store. După cum am menționat mai devreme, Xcode 6.2 include suport pentru Apple Watch. Fără Xcode 6.2, nu veți putea să urmăriți.

În acest tutorial, voi folosi Swift ca limbaj de programare. Dacă nu sunteți familiarizat cu Swift, atunci aveți două opțiuni. Prima opțiune este să rămâi cu obiectivul C. Puteți crea aplicații Apple Watch cu Swift și Obiectiv-C sau o combinație a celor două. A doua opțiune este să vă opriți aici și să citiți seria mea despre Swift sau să urmăriți cursul lui Derek Jensen în privința dezvoltării Swift.

1. Introducere

S-ar putea să te întrebi ce diferă între o aplicație Apple Watch și o aplicație WatchKit. Anul trecut, Apple a anunțat că vor exista două generații de aplicații Apple Watch, aplicații WatchKit și aplicații native Apple Watch. Termenul nativ este puțin înșelătoare, deoarece aplicațiile WatchKit sunt, de asemenea, aplicații native. Principala diferență este arhitectura aplicației. Să analizăm mai întâi aplicațiile native.

Aplicații native

Apple nu ne-a spus încă multe despre aplicațiile native. Compania a anunțat că aplicațiile native vor sosi pe Apple Watch în toamna acestui an. Nu este clar ce va arăta SDK-ul și ce dezvoltatori vor putea să facă cu o aplicație nativă Apple Watch. Cu alte cuvinte, nu avem de ales decât să ne concentrăm în prezent pe aplicațiile WatchKit.

Acestea fiind spuse, pe baza informațiilor Apple, principala diferență va fi faptul că aplicațiile native vor putea să ruleze fără o extensie care rulează pe un iPhone asociat. Din punct de vedere arhitectural, aplicația nativă se va asemăna cu aplicațiile native iOS de pe iPhone și iPad.

Aplicații WatchKit

După cum sugerează și numele, o aplicație WatchKit se bazează complet pe cadrul WatchKit pentru a-și face munca. Cadrul WatchKit este o soluție minunată care acoperă decalajul dintre Apple Watch și un iPhone asociat.

În timp ce ideea este simplă, implementarea este mai puțin. Aplicația WatchKit rulează pe Apple Watch și se ocupă de două lucruri:

  • prezentarea interfeței cu utilizatorul
  • răspunzând interacțiunii utilizatorilor

Logica de afaceri și lifting-ul greu se ocupă de o extensie Apple Watch care rulează pe o pereche de iPhone. Următoarea diagramă vizualizează rolul cadrului WatchKit.

Orice evenimente declanșate de utilizator care interacționează cu aplicația WatchKit sunt redirecționate către extensia care rulează pe iPhone-ul asociat. Aceasta implică faptul că aplicația WatchKit nu are nici un folos fără un iPhone asociat. Pur și simplu nu-și poate face munca fără ca extensia să ruleze pe un iPhone.

2. Configurarea proiectului

Având în vedere acest lucru, este timpul să vă creați prima aplicație WatchKit. Aplicația pe care urmează să o creați va arăta utilizatorului condițiile meteorologice din diverse locuri de pe planetă. Este echivalentul aplicației meteo pe iOS.

Pasul 1: Creați un proiect

Lansați Xcode și selectați Nou> Proiect ... de la Fişier meniul. Selectează Vizualizare individuală șablon din lista de iOS> aplicație template-uri. S-ar putea să te întrebi de ce nu creăm o aplicație WatchKit. O aplicație WatchKit este întotdeauna o parte a unei aplicații iOS. Acest lucru va deveni mai clar după ce am adăugat aplicația WatchKit la proiect.

Denumiți aplicația Picătură de ploaie, a stabilit Limba la Rapid, și Dispozitive la iPhone. Asigura-te Utilizați datele de bază este necontrolat.

Spuneți Xcode unde doriți să salvați fișierele proiectului și să le loviți Crea. Rețineți că am creat un proiect Xcode simplu pentru o aplicație iOS cu o singură vizualizare. Dacă construiți și rulați Picătură de ploaie țintă în Simulatorul iOS, veți vedea o vizualizare albă. Aceasta este ceea ce așteptăm de la o aplicație iOS bazată pe Vizualizare individuală șablon.

Înainte de a continua, examinați bine structura proiectului în Project Navigator și lista obiectivelor. În prezent, avem două obiective, Picătură de ploaie, pentru aplicația iOS și RainDropTests, pentru testele Picătură de ploaie ţintă. Să adăugăm o aplicație WatchKit la mix.

Pasul 2: Creați obiectivele WatchKit

Selectați Nou> Țintă ... din Xcode Fişier meniu și alegeți Aplicația WatchKit de la iOS> Apple Watch secțiune din stânga.

În scopul acestui tutorial, debifați Includeți scenariul de notificare și Includeți Scene de Glance. Nu vom acoperi notificări și priviri în acest tutorial. Lovit finalizarea în partea dreaptă jos pentru a adăuga aplicația WatchKit la proiectul dvs. Xcode.

Când faceți clic pe finalizarea, Xcode va crea un număr de fișiere, grupuri și ținte. Xcode va crea, de asemenea, o schemă pentru a rula aplicația WatchKit în Simulatorul iOS și vă va întreba dacă ar trebui să activeze acea schemă. Clic Activati pentru ao activa.

3. Anatomia proiectului

Prin adăugarea unei aplicații WatchKit în proiectul nostru, Xcode a creat două obiective pentru noi, unul pentru extensia WatchKit, RainDrop WatchKit Extension, și una pentru aplicația WatchKit, Aplicația RainDrop WatchKit.

Extensia WatchKit va rula pe iPhone asociat cu Apple Watch. Acesta se ocupă de logica de afaceri a aplicației WatchKit. Aplicația WatchKit va rula pe Apple Watch și va fi responsabilă pentru prezentarea interfeței cu utilizatorul și gestionarea evenimentelor.

Pentru a păstra totul frumos și ordonat, Xcode a creat două grupuri pentru noi în Project Navigator. Primul grup, RainDrop WatchKit Extension, conține fișierele sursă și activele pentru extensia WatchKit. Al doilea grup, Picătură de ploaie Aplicația WatchKit, conține activele pentru aplicația WatchKit.

Arhitectura care stau la baza unei aplicații WatchKit este evidentă pe baza conținutului acestor grupuri. Picătură de ploaie Aplicația WatchKit grupul, de exemplu, nu conține fișiere sursă. Acesta include doar un tablou de scripturi și active pentru interfața cu utilizatorul aplicației WatchKit. Picătură de ploaie WatchKit Extension conține un fișier sursă, InterfaceController.swift, dar nu include o scenă. Acest lucru are sens dacă vă amintiți că extensia este responsabilă de logica de afaceri a aplicației WatchKit în timp ce aplicația WatchKit este responsabilă de interfața cu utilizatorul.

Apple utilizează termenul aplicație pentru mai multe concepte. Este important să înțelegeți că o aplicație WatchKit este compusă din două părți, o extensie WatchKit care rulează pe un iPhone asociat și o aplicație WatchKit care rulează pe Apple Watch. O aplicație WatchKit nu își poate face munca fără extensia sa. Aceasta este cheia pentru a înțelege arhitectura unei aplicații WatchKit.

4. Construiți și executați

Înainte de a construi și a rula aplicația WatchKit, este util să înțelegeți ce se va întâmpla când ați lovit Command-R. Când Xcode a terminat construirea aplicației iOS, a extensiei WatchKit și a aplicației WatchKit, va instala aplicația iOS, extensia WatchKit și aplicația WatchKit în Simulatorul iOS. Apoi va rula extensia WatchKit și aplicația WatchKit în Simulatorul iOS.

Dacă nu sunteți familiarizat cu extensiile, atunci vă puteți întreba de ce instalează aplicația iOS pe Simulatorul iOS. O extensie este asociată întotdeauna cu o aplicație iOS, astfel încât aplicația iOS este necesară pentru executarea extensiei WatchKit. Pe aceleași linii, o aplicație WatchKit poate funcționa doar pe un Apple Watch dacă omologul său, extensia WatchKit, rulează pe un iPhone asociat cu Apple Watch. Este o arhitectură destul de complexă dacă sunteți obișnuit să dezvoltați aplicații stand-alone iOS.

Când apăsați Command-R pe tastatură sau faceți clic pe Alerga în partea stângă sus, Xcode va construi și va executa aplicația WatchKit în Simulatorul iOS. Dacă aplicația WatchKit nu este lansată, verificați din nou că utilizați schema corectă.

Rularea aplicației WatchKit nu este foarte spectaculoasă, deoarece vedeți doar un ecran negru cu ora curentă din partea dreaptă sus. Să facem interfața utilizator a aplicației noastre WatchKit puțin mai interesantă.

5. Creați interfața de utilizator

Deoarece citiți acest tutorial, presupun că sunteți familiarizat cu dezvoltarea iOS. După cum știți, dezvoltarea iOS modernă implică Auto Layout și storyboard-uri. Acest lucru este doar parțial adevărat pentru dezvoltarea WatchKit. Am descoperit deja că o aplicație WatchKit folosește o placă storyboard pentru interfața sa de utilizator. Aspectul Auto este totuși absent.

Deschis Interface.storyboard în Aplicația RainDrop WatchKit grup pentru a afla cum să construiți o interfață de utilizator pentru aplicația noastră WatchKit.

Tabloul de bord conține o singură scenă Scena controlerului de interfață. În Scene Navigator, în partea dreaptă a Project Navigator, puteți vedea că Scena controlerului de interfață include un Controller de interfață și o indicație că această scenă este punctul principal de intrare al aplicației noastre WatchKit.

Ce este un controler de interfață?

Cele două întrebări pe care le întrebați probabil sunt: ​​"Ce este un controler de interfață?" și "Cum diferă de la un controler vizual?" Un controler de interfață este o instanță a WKInterfaceController clasa sau o subclasă a acesteia. WKInterfaceController clasa este definită în cadrul WatchKit.

Numele acestei clase indică diferențele cu UIViewController. După cum știți, un controler de vizualizare controlează o vizualizare sau o ierarhie de vizualizare. Un controler de interfață, cu toate acestea, nu controlează o vizualizare, ci controlează o interfață, adică un ecran de conținut. Ce înseamnă acest lucru va deveni mai clară odată ce vom începe implementarea controlerului de interfață.

Un controler de interfață este încă un controler adevărat prin faptul că controlează comportamentul interfeței cu utilizatorul. Cu un controler de interfață, puteți configura interfața utilizator a aplicației WatchKit și puteți răspunde la evenimentele pe care aplicația WatchKit le transmite la extensia WatchKit. Cum funcționează acest lucru va deveni mai clară mai târziu în acest tutorial.

Crearea unui aspect

Sistemul de aspect pe care WatchKit ne oferă este primitiv în comparație cu puterea și flexibilitatea funcției Auto Layout. Sistemul de dispunere amintește de modul în care sunt prezentate paginile web cu HTML și CSS.

Unul dintre elementele de bază ale sistemului de monitorizare WatchKit este WKInterfaceGroup clasă. O instanță a acestei clase nu este altceva decât un container care poate conține alte elemente de interfață, cum ar fi etichete, tabele etc. Puteți să o comparați cu

element pe o pagină web. Oferă structură și determină aspectul împreună cu alte grupuri ale aspectului.

De la Biblioteca de obiecte în partea dreaptă, adăugați două grupuri la controlerul de interfață, după cum se arată mai jos.

Ați observat că grupurile se fixează automat? Sistemul de dispunere se comportă foarte diferit de Auto Layout. Un alt detaliu important este faptul că containerul controlerului de interfață este, de asemenea, un grup, nu un punct de vedere. Aceasta înseamnă că ați adăugat grupurile la alt grup. Acest lucru este bine deoarece grupurile pot fi imbricate, permițând dezvoltatorilor să creeze aspecte destul de complexe pentru aplicațiile lor WatchKit.

Adăugarea elementelor de interfață

Adăugați o etichetă din Biblioteca de obiecte la grupul de vârf și pentru a vedea ce se întâmplă. Dimensiunea grupului scade pentru a se potrivi dimensiunii etichetei. Schița unui grup gol nu este altceva decât un substituent. Un grup va ajusta întotdeauna dimensiunea sa la cea a conținutului său.

Selectați eticheta și deschideți Inspectorul de identitate pe dreapta. Rețineți că eticheta pe care ați adăugat-o este de tip WKInterfaceLabel, nu UILabel. Chiar dacă aplicațiile WatchKit pot avea multe elemente de interfață cu utilizatorul care seamănă cu cele găsite în aplicațiile iOS, ele sunt diferite. WKInterfaceLabel clasa, de exemplu, moștenește de la WKInterfaceObject in loc de UIView și UIResponder.

Cu eticheta selectată, deschideți Atribuții Inspector pe dreapta. Sub mărimea, setați lățimea la În raport cu containerul pentru al face la fel de larg ca ecranul Apple Watch. Schimbați fontul la Titlu pentru ao face să iasă mai mult și să schimbe textul etichetei Cupertino. Observați că nu puteți schimba familia de fonturi și nici nu puteți ajusta manual dimensiunea fontului.

Deoarece aplicația noastră WatchKit va afișa condițiile meteorologice din diferite locuri de pe planetă, trebuie să adăugăm și o etichetă pentru temperatură. De asemenea, ar fi frumos să cunoașteți data și ora locală a locației.

Adăugați oa doua etichetă în grupul de sus glisând o etichetă în Scene Navigator. Aștepta. Nu este in regula. Ați adăugat o etichetă grupului corect, dar nu se afișează în interfață.

În mod prestabilit, un grup are a orizontală aspect. Puteți verifica acest lucru deschizând Atribuții Inspector și inspectarea lui schemă proprietate. Aceasta înseamnă că elementele de interfață pe care le conține sunt prezentate orizontal. Eticheta de temperatură este prezentă în grup, dar nu este vizibilă în acest moment. Modificați grupurile schemă proprietate la Vertical pentru a rezolva problema.

Adauga o Data element de interfață pentru cel de-al doilea grup. Elementele de interfață de date sunt instanțe ale WKInterfaceDate clasă. Acest element de interfață conține o etichetă și este perfect pentru afișarea și formatarea datelor. Începeți prin a schimba lățimea elementului la În raport cu containerul și alinierea textului etichetei la dreapta aliniată.

Nu este nevoie să utilizați NSDateFormatter pentru a forma date. WKInterfaceDate clasa se ocupă de formatarea datei pentru noi. Schimba Format din WKInterfaceDate exemplu la Personalizat și setați formatul la M / d, h: mm a. Interfața cu utilizatorul ar trebui să arate astfel.

Construiți și rulați aplicația WatchKit în Simulatorul iOS pentru a vedea ce avem până acum. Aplicația nu este foarte utilă în momentul în care lucrăm cu conținut static. Vom remedia acest lucru în tutorialul următor.

Concluzie

Am descoperit foarte multe lucruri de bază ale dezvoltării aplicației WatchKit în acest tutorial. Sunt sigur că sunteți de acord că dezvoltarea aplicațiilor WatchKit se simte atât familiare, cât și străine. Putem folosi instrumentele la care suntem obișnuiți, dar există o serie de diferențe cheie care vor dura mult timp pentru a vă ajuta. În partea a doua a acestui tutorial, ne vom concentra pe extensia WatchKit pentru a prelua datele despre vreme și pentru a afișa datele din aplicația WatchKit.

Cod