Înțelegerea sistemului WatchKit Layout

etichetă. Vă puteți gândi la un grup ca la un container pentru alte elemente de interfață. Un grup are multe proprietăți pe care le puteți personaliza direct în Interface Builder.

Pasul 1: Definiți aspectul aplicației dvs.

Este important să planificați aspectul în detaliu înainte de a începe dezvoltarea. Acest lucru vă va economisi ore și ore de dureri de cap dacă, într-un anumit moment, vă dați seama că caracteristica foarte interesantă pe care ați dorit să o construiți nu este posibilă sau nu arată bine pe un dispozitiv fizic. Asigurați-vă că ați citit Ghidul Apple Watch Human Interface.

Pentru acest exemplu, voi învăța cum să creați un aspect pentru o aplicație hotel în care puteți găsi hoteluri în apropierea locației dvs. curente. Am proiectat ecranul care va arăta detaliile pentru un anumit hotel. După cum am menționat în introducere, nu voi scrie nici un cod. În schimb, mă voi concentra pe înțelegerea mecanismului noului sistem de planificare.

Lăsându-mi abilitățile de desen, asta mă gândesc la aspectul meu. Numele hotelului va fi în partea de sus a ecranului și de mai jos va fi ceva stele icoane afișează ratingul hotelului. Vreau apoi să adaug un imagine împreună cu ei adresa si doi butoane.

Pasul 2: Adăugarea unui grup

Controlerul de interfață este gol în acest moment și nu există un grup de bază. Pentru a adăuga elemente noi, glisați și fixați-le din Biblioteca de obiecte în partea dreaptă în Controller de interfață. Scene Navigator în partea stângă este util să verificați dacă elementele sunt poziționate corect. Primul lucru pe care trebuie să-l faceți este să adăugați un grup, care ne va permite să derulam vertical dacă conținutul nu se potrivește ecranului. Trageți un grup de la Biblioteca de obiecte și lăsați-l în Controller de interfață așa cum se arată mai jos.

Acum, că aveți un grup în controlerul de interfață, puteți vedea atributele sale în Atribuții Inspector pe dreapta. Să ne uităm la unele dintre ele în detaliu.

• Aspect: Layout-ul determină dacă elementele grupului sunt așezate orizontal sau vertical. Atunci când adăugați un element, acesta va fi poziționat lângă sau sub cel anterior.
• Focare: Acest atribut determină inserția de sus, de jos, stânga și dreapta pentru grup.
• Spațiere: După cum sugerează și numele, aceasta determină distanța dintre elementele din grup.
• Fundal: Puteți seta o imagine ca fundal a grupului și o puteți anima numind imagini secvențial.
• Poziţie: Atributul de poziție determină poziția orizontală (stânga, centrul, dreapta) și verticală (de sus, de centru, de jos) a grupului.
• Mărimea: Atributul de mărime determină lățimea și înălțimea elementului. Există trei valori, Dimensiune pentru potrivirea conținutului (ajustată automat în funcție de conținut), În raport cu containerul (ia dimensiunea containerului și îl multiplică cu valoarea definită), Fix (valoare constantă).

Rețineți că Apple Watch vine în două dimensiuni. Ar trebui să utilizați același aspect în ambele cazuri, însă este posibil să întâmpinați mici diferențe. Dând clic pe pictograma plus din stânga unui atribut, puteți seta un atribut care va fi aplicat numai când aplicația rulează pe dispozitivul specificat.

Să continuăm să construim structura noastră. Schimba Group Layout la Vertical astfel încât conținutul să se rotească vertical atunci când adaugă mai multe elemente. Seteaza Orizontală poziția la Centru astfel încât conținutul să fie centrat. În cele din urmă, setați Lăţime atribuit lui Lățime în raport cu containerul cu multiplicatorul setat la 1. Aceasta va extinde grupul pentru a umple întreaga lățime a ecranului.

Pasul 3: Adăugarea unei etichete

Acum, când am creat principalele proprietăți pentru grupul nostru de containere, să adăugăm o etichetă grupului. De la Biblioteca de obiecte, adăugați o etichetă grupului pe care l-ați adăugat acum un moment. Dacă selectați eticheta, veți vedea cum lățimea acesteia nu ocupă tot spațiul disponibil. Să rezolvăm asta prin schimbarea atributului de lățime la În raport cu containerul. Pentru a centra eticheta, schimbați Orizontală atribuit lui Centru și stabilit Alinierea textului la Centru.

Ce se întâmplă dacă numele hotelului este prea lung? Vreau să se extindă și să crească vertical. Pentru a face acest lucru, schimbați Linii atributa etichetei la 0. Aceasta înseamnă că numele hotelului va cuprinde mai multe linii dacă este necesar. Modificați textul etichetei pentru a vedea rezultatul pentru dvs. Rezultatul ar trebui să arate ca imaginea de mai jos.

Pasul 4: Adăugarea de stele

De asemenea, dorim să arătăm ratingul hotelului. Ideea este de a avea un grup chiar sub numele hotelului, cu numărul de stele ale hotelului. Adăugați un alt grup la grupul pe care îl avem deja. Cu alte cuvinte, noul grup este imbricat în primul grup. 

Vreau ca cele cinci stele să fie pe aceeași linie și centrate. Așa cum am menționat anterior, nu pot adăuga sau elimina obiecte în timpul rulării, dar pot să ascund și să arăt obiecte. Voi adăuga cinci imagini la grup. Dacă hotelul are mai puține stele, le voi ascunde în timpul execuției.

Trageți cinci imagini în grupul imbricat și setați lățimea fiecărei stele În raport cu containerul. Modificați multiplicatorul de la 1 la 0.2. Motivul alegerii 0.2 deoarece multiplicatorul este simplu. Dacă vreau să se încadreze cinci imagini în spațiul disponibil pe aceeași linie, vreau ca fiecare imagine să fie de 20% din lățimea grupului. Schimba Orizontală poziția la Centru astfel încât acestea să fie mereu centrate, indiferent câte stele există.

Apoi, să atribuim o imagine grozavă fiecărei imagini. Puteți găsi imaginile pe care le folosesc în fișierele sursă ale acestui tutorial. Seteaza Imagine atribuit lui star.png și schimbați modul la Aspect Fit pentru a asigura respectarea raportului de aspect.

Rezultatul ar trebui să arate similar cu imaginea animată de mai jos. Puteți încerca chiar să verificați Ascuns proprietatea uneia dintre imaginile din Atribuții Inspector și vedeți cum stelele sunt întotdeauna centrate.

Pasul 5: Adăugarea imaginii hotelului

Începeți prin a descărca imaginea de exemplu a unui hotel de la imagini gratuite. Vreau să adaug o imagine a hotelului pentru a arăta utilizatorului cum arată hotelul. Adăugați o nouă imagine din Biblioteca de obiecte așa cum ați făcut mai devreme pentru stele. Schimba Imagine atribuiți imaginii pe care ați descărcat-o și setați-o mod la Aspect Fit.

Schimba Orizontală poziția la Centru si Lăţime la În raport cu containerul. Asigurați-vă că adăugați imaginea ca element imbricat al grupului principal, verificând ierarhia stratului din Scene Navigator pe stanga. A stabilit Înălţime fi Dimensiune pentru potrivirea conținutului pentru a redimensiona automat imaginea pe baza dimensiunilor imaginii.

Pasul 6: Adăugarea adresei

Sub imagine, aș dori să adaug o etichetă de adresă. De asemenea, am putea adăuga o hartă, dar să folosim o etichetă pentru acest exemplu. Trageți o etichetă din Biblioteca de obiecte și poziționați-l sub imaginea hotelului. A stabilit Linii la 0 și Lăţime la În raport cu containerul. Schimbați textul ca adresă aleatorie la alegere.

După cum probabil ați observat, controlerul de interfață este acum mai înalt. Se redimensionează automat în tabloul de bord, astfel încât să puteți vedea conținutul său.

Pasul 7: Adăugarea butoanelor

Controlorul de interfață trebuie să aibă două butoane în partea inferioară. Vreau ca butoanele să fie jumătate din lățimea ecranului și poziționate una lângă alta. Deoarece grupul nostru principal are un aspect vertical, trebuie să adăugăm un grup imbricat, astfel încât butoanele să fie poziționate orizontal în loc de vertical.

Adăugați un grup nou, după cum se arată mai jos, și adăugați două butoane. Setați-le Lăţime atribuit lui În raport cu containerul și setați multiplicatorul la 0.5. Seteaza Vertical poziția celor două butoane Centru pentru a le centra vertical.

Setați textul primului buton la "De la 99 $" și culoarea de fundal la un roșu frumos. Setați textul celui de-al doilea buton la "Vezi mai mult" iar culoarea de fundal albastru. Controlorul de interfață ar trebui să pară acum:

Asigurați-vă că ați selectat schema corectă și apăsați Command-R pentru a rula aplicația WatchKit.

Când se deschide Simulatorul iOS, mai este ceva ce trebuie să faceți. Selectați Simulatorul iOS și alegeți Hardware> Monitoare externe> Watch Apple 42 mm. Simulatorul Apple Watch va apărea lângă simulatorul dvs. iPhone. Acum puteți vedea aspectul dvs. de lucru în acțiune. Vedeți rezultatul din videoclipul de mai jos.

Concluzie

În acest tutorial, v-am prezentat principalele caracteristici și concepte pentru a construi aspecte complexe în WatchKit. Am explorat adăugarea și poziționarea elementelor interfeței utilizator și câteva bune practici. Acum puteți transforma ideile de aplicații Apple Watch în realitate. Sper că ți-a plăcut acest tutorial.