Creați o aplicație Nativ Apple Watch pentru watchOS 2

În acest tutorial, veți învăța cum să profitați de API-urile noi și de funcționalitatea în watchOS 2 pentru a crea o aplicație nativă Apple Watch. Acestea includ elemente de interfață de selectare, animații native și controale de alertă.

Introducere

La WWDC 2015, Apple a anunțat prima actualizare majoră a platformei Apple Watch, watchOS 2. Împreună cu multe caracteristici și îmbunătățiri noi, cel mai important aspect al acestei actualizări pentru dezvoltatori este capacitatea de a crea aplicații native Apple Watch. Aceste aplicații native funcționează mai bine și oferă dezvoltatorilor acces la funcții noi, inclusiv senzorii de coroană digitală, microfon și de sănătate.

În acest tutorial vă voi arăta cum să creați o aplicație Native WatchKit și să schițați pe scurt unele dintre noile API-uri disponibile în watchOS 2. De asemenea, vă voi arăta cum să faceți upgrade la o aplicație watchOS 1 non-nativă existentă la o aplicație nativă watchOS 2.

Acest tutorial necesită să executați Xcode 7 pe un Mac care rulează OS X Yosemite (10.10) sau mai târziu. Acest tutorial se bazează pe conceptele și API-urile WatchKit disponibile în watchOS 1. Dacă nu sunteți încă confortabil cu cadrul WatchKit, începeți cu unul dintre tutoriile noastre introductive pe WatchKit.

1. Configurarea proiectului

Deschideți Xcode și creați un nou proiect. În Xcode 7, noul expert de proiect include a watchOS secțiune din stânga. Alege aplicația iOS cu aplicația WatchKit șablon din watchOS> Aplicație secțiune. Clic Următor → a continua.

Completați informațiile așa cum arată imaginea de mai jos. Debifați casetele de selectare din partea de jos, deoarece nu vom avea nevoie de cele pentru acest tutorial.

Finalizați configurarea proiectului și aruncați o privire asupra folderelor create de Xcode pentru noi. Ar trebui să vedeți trei grupuri sau dosare în Project Navigator pe stanga:

  • Demo folder conține fișierele sursă și resursele aplicației iOS.
  • Demo WatchKit App folderul găzduiește tabloul de bord și resursele aplicației WatchKit.
  • Demo WatchKit Extension include fișierele sursă și resursele extensiei WatchKit, creierul aplicației WatchKit ca să spun așa.

Înainte de a putea începe să adăugăm ceva, trebuie să configuram Xcode pentru a construi și a executa ținta corectă. În partea stângă sus a ferestrei Xcode, lângă butonul de oprire în culoarea gri, faceți clic pe schema activă, Demo, și alegeți următoarea opțiune:

Faceți clic pe butonul de redare pentru a crea și a rula aplicația. În docul dvs., ar trebui să vedeți două pictograme de simulator. Unul dintre acestea este simulatorul iOS normal, în timp ce celălalt este Apple Watch Simulator.

Dacă ecranul gol al aplicației Apple Watch nu apare automat pe Apple Watch Simulator, parcurgeți următorii pași:

1. Navigați la Apple Watch app pe simulatorul iOS. Puteți găsi aplicația Apple Watch pe a doua pagină de ecran de pornire.

2. Faceți clic pe Demotabelul de vizualizare a celulei așa cum se arată mai jos.

3. Activați Arată App pe Apple Watch comutați așa cum se arată mai jos.

4. În Simulatorul Apple Watch, navigați la ecranul de pornire apăsând Command + Shift + H sau alegerea Acasă de la Hardware meniu a Apple Watch Simulator.

Dacă aceasta nu funcționează imediat, atunci activați și dezactivați comutatorul din Simulatorul iOS. De asemenea, aceasta poate ajuta să renunțe la Xcode și să executați din nou aplicația WatchKit.

Dacă totul funcționează corect, faceți clic pe pictograma aplicației Apple Watch din Apple Watch Simulator. Ar trebui să vedeți un ecran negru cu timpul afișat în partea dreaptă sus.

2. Crearea interfeței utilizator

Este timpul să începeți să utilizați unele dintre noile API introduse în watchOS 2. În Xcode, deschideți Interface.storyboard în Demo WatchKit App folder și adăugați următoarele componente la Scena controlerului de interfață:

  • cursor
  • târnăcop
  • buton

Selectați cursorul și setați-l Maxim și paşi proprietăți pentru în Atribuții Inspector.

Faceți dublu clic pe buton și modificați titlul acestuia la "Afișați alerta". Deschide Editor asistent astfel încât să aveți tabloul de bord din stânga și conținutul lui InterfaceController.swift pe dreapta. Creați o priză pentru glisor prin glisarea de la glisor din panoul de scripturi la InterfaceController clasă. Denumiți priza cursor. Faceți același lucru pentru picker și denumiți priza târnăcop.

Control-trageți de la buton la InterfaceController pe dreptul de a crea o acțiune. Denumiți acțiunea showAlertPressed. Această acțiune va fi executată atunci când utilizatorul fixează butonul.

Inchide Editor asistent pe dreapta și deschisă InterfaceController.swift în editorul de cod Xcode.

Glisorul și butonul pe care l-ați adăugat la InterfaceController clasa ar trebui să fie familiar dacă ați lucrat cu cadrul WatchKit. Selectorul este totuși unul dintre elementele de interfață noi disponibile în watchOS 2.

Un picker pentru Apple Watch este reprezentat de WKInterfacePicker clasă. Funcționează similar cu omologul său iOS, UIPickerView. Utilizatorii interacționează cu a WKInterfacePicker de exemplu, atingând-o, derulând WKPickerItem obiecte cu coroana digitală, apoi atingând din nou pentru a selecta un element. A WKInterfacePicker pot afișa articole în unul din trei stiluri diferite:

  • Listă: Acest stil afișează elementele selectate într-o listă verticală stivuită pentru ca utilizatorul să se poată derula. Aceste elemente au un titlu și o imagine de acces opțională. Acesta este singurul WKInterfacePicker stil care acceptă elemente bazate pe text și poate afișa mai multe elemente simultan.
  • grupată: Acest stil de selectare prezintă o serie de imagini ca cărți animate pe verticală. Pe măsură ce utilizatorul transformă coroana digitală, vechea carte animă off-screen și noul card animă pe ecran din partea inferioară a picker-ului. Elementele pentru acest stil pot conține numai imagini.
  • Secvența de imagini: Acest stil prezintă o secvență de imagini fără ca tranzițiile să fie animate. Rotirea coroanei afișează imediat imaginea următoare sau anterioară în secvență. Elementele pentru acest stil de selectare pot conține, de asemenea, numai imagini.

Pentru acest tutorial, veți crea un simplu selector de stil de listă cu elemente bazate pe text. Adăugați următorul cod la awakeWithContext (_ :) metodă a InterfaceController clasă:

override func awakeWithContext (context: AnyObject?) super.awakeWithContext (context) var pickerItems: [WKPickerItem] = [] pentru i în 1 ... 10 let item = WKPickerItem () item.title = pickerItems.append (element) self.picker.setItems (pickerItems)

Construiți și executați aplicația. Veți vedea că primele trei elemente de selectare sunt vizibile.

Pentru a interacționa cu elementul interfeței de selectare, faceți clic pe acesta o dată și apoi derulați pe mouse-ul sau trackpad-ul Mac-ului așa cum ați proceda în mod normal. Aceasta va simula coroana digitală a ceasului. Apoi veți putea naviga prin elementele selectate.

3. Animație

Împreună cu noi elemente de interfață și noi modalități prin care utilizatorii pot interacționa cu aplicațiile Apple Watch, watchOS 2 acceptă animații native pentru obiectele de interfață WatchKit. Următoarele atribute ale elementelor de interfață pot fi animate în aplicațiile watchOS 2:

  • alfa (opacitate)
  • latime si inaltime
  • orizontală și verticală
  • culoarea de fundal și culoarea nuanței
  • conținutul de conținut pentru grupuri

Animația se face printr-un singur WKInterfaceController exemplu, animateWithDuration (_: animatii :). Ca un exemplu simplu, veți anima cursorul făcându-l să se estompeze și să se micsoreze spre partea de sus a ecranului. Adăugați următorul cod la willActivate metodă a InterfaceController clasă:

suprascrie func willActivate () super.willActivate () self.animateWithDuration (5) () -> Void în self.slider.setHeight (0) self.slider.setAlpha (0)

Construiți și difuzați aplicația și, odată ce aplicația dvs. a terminat de lansat, ar trebui să vedeți că glisorul se micșorează lent și se estompează.

În închiderea animației, puteți anima oricare dintre proprietățile enumerate mai sus. Acest lucru se aplică oricăror elemente de interfață din aplicația dvs. Acest lucru permite un alt nivel de personalizare în interfața aplicației dvs. și oferă, de asemenea, o modalitate mai ușoară de a ascunde și de a arăta elemente.

4. Alerte

watchOS 2 permite, de asemenea, aplicațiilor prezenta o interfață de alertă foarte asemănătoare cu cea a unui a UIAlertView sau UIAlertController pe iOS. Aceste alerte sunt afișate prin apelarea presentAlertControllerWithTitle (_: Mesaj: preferredStyle: Acțiuni :) metoda pe WKInterfaceController instanță.

Parametrii titlurilor și mesajelor acestei metode sunt șiruri de afișat pe interfața de alertă. Al treilea parametru este a WKAlertControllerStyle enum:

  • Alerta afișează o foaie de alertă cu butoane stivuite și o valoare implicită Anulare butonul din partea de jos.
  • SideBySideButtonsAlert afișează două butoane unul lângă altul.
  • ActionSheet afișează unul sau două butoane personalizate cu a Anulare în colțul din stânga sus.

Al patrulea parametru este o matrice de WKAlertAction obiecte, care oferă detalii pentru butoanele de alertă. Această matrice trebuie să conțină cel puțin un obiect și pentru SideBySideButtonsAlert trebuie să conțină două.

WKAlertAction obiect este creat cu un titlu, stil (WKAlertActionStyle.DefaultWKAlertActionStyle.Cancel, sau WKAlertActionStyle.Destructive) și un bloc care trebuie executat atunci când acțiunea este selectată. Adăugați următorul cod pe butoanele showAlertPressed acțiune:

@IBAction func showAlertPressed () let cancel = WKAlertAction (titlu: "Anulare", stil: WKAlertActionStyle.Cancel, handler: () -> Void in) actiune = WKAlertAction (titlu: WKAlertActionStyle. Implicit, manipulator: () -> Void in) auto.presentAlertControllerWithTitle ("Alert", mesaj: "Exemplu watchOS 2 interface alert", preferatStyle: WKAlertControllerStyle.SideBySideButtonsAlert, actions: [cancel, action]

Construiți și executați aplicația. Când apăsați pe Afișați alerta , veți vedea o interfață de alertă care va anima și afișa cele două acțiuni pe care le-ați creat.

5. Actualizarea pentru a viziona OS 2

Când deschideți un proiect Xcode existent cu o aplicație WatchKit în Xcode 7, următorul avertisment va apărea în Eliberați navigatorul pe stanga:

Dacă faceți clic pe avertizare, va apărea o listă cu setările care trebuie modificate în aplicația dvs. pentru a trece la o aplicație WatchKit existentă pentru a viziona OS 2. În partea de jos veți vedea următorul articol:

Dacă faceți clic pe Efectuați modificări, Xcode vă va actualiza aplicația WatchKit existentă pentru dvs. Odată ce actualizarea sa terminat, sunteți gata să construiți, să testați și să expediați o aplicație nativă pentru watchOS 2.

Concluzie

Noile API-uri și caracteristici pe care le-ați învățat în acest tutorial sunt doar vârful aisbergului. Elementele de interfață Picker, controlorii de alertă și animațiile native sunt doar câteva dintre noile caracteristici pe care le puteți profita în aplicațiile Apple Watch pe watchOS 2.

Vom posta mai multe tutoriale pe Tuts + în lunile următoare, acoperind noile caracteristici și API-urile disponibile pe watchOS 2. Asigurați-vă că ați căutat pe aceștia și nu ezitați să lăsați orice comentarii sau întrebări pe care le aveți în comentariile de mai jos.

Cod