Share
Crearea de aplicații cu layout-uri flexibile a devenit esențială, mai ales după lansarea iPhone-ului cu ecranul de 4 "și introducerea lui Dynamic Type în iOS 7, permițând utilizatorilor să schimbe dimensiunea textului în sistemul de operare. internaționalizare în minte.
Auto Layout, care a fost introdus în iOS 6, vă permite să creați astfel de layout-uri flexibile. Este o alternativă excelentă la mascarea autoresizării sau la stabilirea manuală a interfeței de utilizare a aplicației.
Aspectul automat vă permite să adăugați constrângeri la vizualizări și să definiți relațiile dintre vizualizări. Relația poate fi între o viziune și supravegherea ei, unul dintre frații săi sau chiar în relație cu ea însăși.
În loc să specificați în mod explicit cadrul unui ecran, Auto Layout vă permite să definiți spațierea dintre pozițiile relative și cele două vizualizări folosind constrângeri. Auto Layout utilizează aceste constrângeri pentru a calcula pozițiile de rulare ale elementelor interfeței utilizator.
Trebuie să setați suficiente constrângeri pentru a preveni ambiguitatea cu privire la aspect. Este, de asemenea, posibil să setați prea multe constrângeri, care pot provoca conflicte și pot provoca accidentarea aplicației.
În Xcode 4, ori de câte ori stabiliți constrângeri incomplete sau nevalide într-o vizualizare, Interface Builder le-ar înlocui cu noi constrângeri care, în cea mai mare parte, nu vă dau efectul pe care îl urmați. Acest lucru a dus la o frustrare semnificativă cu dezvoltatorii. În Xcode 5, cu toate acestea, este mult mai ușor de utilizat Auto Layout. Xcode nu mai forțează constrângerile pe o vizualizare, în schimb obțineți sugestii și avertismente atunci când constrângerile unei vizualizări sunt nevalide.
În timp ce este posibil să lucrați programabil cu programul Auto Layout, acest tutorial va analiza cum să utilizați Interface Builder pentru a crea planuri utilizând funcția Auto Layout.
Pentru o demonstrație simplă a ceea ce poate face Auto Layout pentru dvs., vom crea o aplicație simplă și vom stabili unele constrângeri asupra vederilor sale. Creați un nou proiect Xcode, alegeți Vizualizare individuală șablon și set Dispozitive la iPhone.
Storyboards și fișierele XIB create cu Xcode 4.5 sau o versiune ulterioară au Auto Layout activat implicit. Puteți să o dezactivați în Inspector de dosar în partea dreaptă, debifând caseta de selectare Utilizați Auto Layout.
Un motiv bun pentru dezactivarea funcției Auto Layout este suportul pentru iOS 5 sau mai mic. Aspectul automat este acceptat numai de iOS 6 și de mai sus. Dar, în afară de aceasta, Apple recomandă utilizarea funcției Auto Layout, deoarece facilitează crearea și crearea de interfețe utilizator flexibile.
Deschideți tabloul de bord principal al proiectului, Main.storyboard, adăugați o vizualizare text la Vizualizați scena controlerului, și poziționați-o după cum se arată mai jos.
Nu au fost stabilite constrângeri în vizualizarea textului și acest lucru are unele implicații. Când executați aplicația, vizualizarea textului este poziționată la fel ca în Interface Builder. Cu toate acestea, atunci când dispozitivul este rotit în modul peisaj, vizualizarea de text continuă să rămână pe marginea din stânga a ecranului și lățimea sa este fixată.
La construirea timpului, constrângerile sunt generate automat pentru vizualizări care nu au constrângeri, ceea ce explică comportamentul pe care îl vedem. Constrângerile adăugate la vizualizarea textului, de exemplu, reprezintă o constrângere de stânga și de sus care fixează vizualizarea textului din stânga sus și o constrângere în lățime și înălțime care fixează dimensiunea ecranului text.
Odată ce începeți să definiți constrângeri, totuși, depinde de dvs. să vă asigurați că constrângerile unei vizualizări nu cauzează conflicte. În secțiunea următoare, adăugăm câteva constrângeri la vizualizarea textului pentru a-și ajusta poziția și dimensiunea atunci când dispozitivul este rotit sau când rulați aplicația, de exemplu, un iPhone 5 care are un ecran mai mare.
Există mai multe moduri în care constrângerile de aspect pot fi adăugate la o vizualizare.
Țineți apăsată tasta Control și trageți din vizualizarea pe care doriți să adăugați constrângerea de aspect pentru o altă vizualizare. Când eliberați mouse-ul, ar trebui să apară un meniu cu opțiuni. Opțiunile depind de direcţie si vă vedeți târât.
Pentru a ilustra acest lucru, trageți din vizualizarea text în partea de sus a vizualizării controlerului de vizualizare. Xcode va evidenția ambele vederi pentru a indica constrângerea aspectului include ambele vederi. Când eliberați mouse-ul, meniul arată constrângerile de aspect care pot fi adăugate la vizualizarea sursă, vizualizarea textului. Pentru a centra vizualizarea textului pe orizontală în vizualizarea controlerului de vizualizare, selectați Centrul orizontal în container din meniu. O linie portocalie apare drept rezultat, ceea ce înseamnă constrângerea de aspect pe care tocmai ați adăugat-o.
De asemenea, puteți adăuga și modifica constrângerile de aspect folosind meniul Auto Layout din partea inferioară a spațiului de lucru Interface Builder.
Începând din stânga, meniul vă permite alinia și bolț vizualizari, rezolvați problemele legate de Auto Layout, și redimensionarea comportamentului pentru vizualizarea selectată. Permiteți-mi să explic ceea ce fac fiecare opțiune de meniu.
Fiecare dintre opțiunile de mențiuni menționate mai sus poate fi găsită și în Xcode Editor meniul.
Pentru a adăuga constrângeri de aspect în vizualizarea text, selectați vizualizarea în Xcode, țineți apăsată tasta Control și trageți din vizualizarea text în partea de sus a vizualizării controlerului de vizualizare. Selectați Centrul orizontal în container din meniul care apare. Aceasta adaugă o constrângere de aspect care asigură că vizualizarea textului este întotdeauna centrat în vizualizarea controlerului de vedere, indiferent de orientarea dispozitivului.
S-ar putea să fi observat că vizualizarea textului are un contur portocaliu. Xcode ne spune că constrângerile privind aspectul vizualizării textului sunt nevalide sau incomplete. Am specificat că vizualizarea textului trebuie centrat orizontal în vizualizarea părinte, însă sistemul Auto Layout nu știe ce mărime ar trebui să fie vizualizarea textului. Să adăugăm încă câteva constrângeri până când conturul vizualizării textului devine albastru pentru a indica constrângerile privind aspectul vizualizării textului sunt valide.
Rețineți că este posibil să ignorați avertismentele și să rulați o aplicație cu constrângeri incomplete de aspect. Cu toate acestea, nu ar trebui să expediați niciodată o aplicație cu constrângeri ambigue de aspect, deoarece nu știți sigur ce va arăta interfața de utilizator a aplicației pe diferite dispozitive în diferite orientări.
În ecranul de text selectat, Control-Drag din vizualizarea text în partea de sus a vizualizării controlerului de vizualizare și selectați Spațiu de sus pentru Ghid de aspect superior. Aceasta stabilește a constrângere spațială verticală de la ghidul de aspect superior al controlerului de vizualizare la partea de sus a textului.
Apoi, Control-Drag din vizualizarea text la vizualizarea controlerului de vizualizare și selectați Spațiul principal către container pentru a seta distanța de la vizualizarea părinte la stânga ecranului text. Control-Trageți din vizualizarea textului în vizualizarea controlerului de vizualizare și selectați Spațiul inferior până la ghidajul de planșament inferior pentru a seta o constrângere spațială verticală de la ghidul de planificare a planului inferior al controlerului vizual la partea inferioară a vederii text.
Conceptul de vizualizare a textului trebuie să fie albastru, indicând faptul că constrângerile de aspect ale afișării text sunt valide și complete. Rulați aplicația în Simulatorul iOS și schimbați orientarea pentru a inspecta rezultatul.
Rețineți că nu este necesar să adăugăm o constrângere spațială orizontală pentru a specifica distanța dintre marginea dreaptă a ecranului text și supervizare, deoarece am specificat spațiul principal de afișare a textului și am centrat vizualizarea textului pe orizontală în supervizare. Sistemul Auto Layout are suficiente informații pentru a stabili corect vizualizarea textului. Putem realiza același rezultat prin specificarea a patru constrângeri de spațiu și omiterea constrângerii de aliniere.
Acest exemplu v-a arătat cum să setați constrângerile de aspect între vizualizare și vizualizarea părintelui. Să aruncăm o privire la un alt exemplu în care am stabilit constrângeri de aspect între elementele sibling.
Începeți prin ștergerea vizualizării de text. Aceasta va șterge, de asemenea, constrângerile legate de aspectul vizualizării textului. Adăugați un câmp de text, un cursor și un control segmentat în vizualizarea controlerului vizual, după cum se arată mai jos.
Când rulați aplicația fără a stabili constrângeri, cele trei elemente se vor lipi la marginea din stânga a vederii părinte în peisaj.
Cu toate acestea, dorim ca elementele să umple lățimea completă a ecranului, după cum se arată mai jos. Câmpul de text trebuie să se extindă orizontal, iar glisorul trebuie extins pentru a profita de lățimea ecranului. Controlul segmentat, cu toate acestea, ar trebui să aibă o lățime fixă.
Selectați câmpul de text și faceți clic pe bolț din meniul Auto Layout din partea de jos. În secțiunea Spațiu spre cel mai apropiat vecin din partea de sus a meniului, faceți clic pe liniile de sus, dreapta și stânga care înconjoară pătratul. În consecință, liniile trebuie să devină roșii. Apoi, faceți clic pe butonul din partea de jos etichetat Adăugați 3 constrângeri pentru a adăuga constrângerile de spațiu specificate.
Selectați cursorul și repetați aceiași pași stabilind o constrângere de spațiu de sus, stânga și dreapta. Aceasta asigură distanța dintre cursor și câmpul text, iar glisorul și comanda segmentată sunt fixate.
Repetați aceiași pași pentru controlul segmentat, dar adăugați numai o constrângere de spațiu de sus și de dreapta (de sfârșit). În plus, verificați Lăţime și faceți clic pe Adăugați 3 constrângeri butonul din partea de jos. Nu vrem ca controlul segmentat să se extindă atunci când dimensiunea ecranului se modifică, de aceea îi dăm o lățime fixă.
Când Xcode ne dă erori sau avertismente cu privire la constrângerile dispuse sau neactualizate, este posibil să nu fie întotdeauna clar ce constrângeri trebuie adăugate sau actualizate. Xcode ne ajută să ne arătăm ce constrângeri lipsesc în Schița documentelor.
Atunci când un aspect este nevalid sau incomplet, o săgeată roșie este vizibilă în Schița documentelor. Când faceți clic pe săgeată, o fereastră se alunecă din dreapta care arată care constrângeri lipsesc sau sunt nevalide. Acest lucru vă oferă o idee despre cum să remediați aspectul.
În partea dreaptă a fiecărei erori sau avertismente se află un cerc roșu (eroare) sau un triunghi galben (avertisment). Când faceți clic pe eroare sau avertizare, apare un meniu cu sugestii pentru remedierea problemei.
De asemenea, puteți utiliza funcția Rezolvați problemele privind aspectul automat meniu pentru a adăuga constrângeri lipsă, pentru a restabili constrângerile unei vizualizări sau pentru a șterge constrângerile. Xcode va adăuga automat constrângeri la vizualizarea selectată pentru dvs. Acest lucru vă poate economisi timp, dar rețineți că este de asemenea posibil ca aspectul rezultat să nu fie ceea ce ați intenționat.
Dacă ați adăugat constrângeri de aspect într-o vizualizare și ați modificat dimensiunea sau poziția, Xcode evidențiază afișarea în portocaliu pentru a indica faptul că poziția și / sau dimensiunea curentă nu sunt în concordanță cu constrângerile de aspect.
Dacă executați aplicația, veți vedea că sistemul Auto Layout extinde constrângerile privind aspectul vizualizării și ignoră dimensiunea și poziția nouă a ecranului pe care ați setat-o. Aceasta este așa-numita vizionare greșită. Imaginea de mai jos arată un buton pe care l-am mutat după ce am specificat constrângerile de aspect.
Pentru a remedia acest lucru, puteți fie să ștergeți constrângerile de aspect și să le setați pe cele noi, fie puteți lăsa Xcode să o repare pentru dvs. Aveți două opțiuni pentru a repara o vizualizare greșită.
În exemplul de mai sus, selectăm Actualizați constrângerile pentru a actualiza constrângerile de aspect la noua dimensiune și poziție a butonului, deoarece dorim să păstrăm dimensiunea și poziția noului buton.
Sistemul Auto Layout face mult mai simplu și mai rapid interfețele utilizatorilor. Înainte de introducerea funcției Auto Layout, dezvoltatorii trebuiau să codifice greu interfața de utilizator a unei aplicații prin setarea unui cadru de vizualizare și a unei măști de autoreziere. Cu Auto Layout, acest lucru nu mai este necesar.
Prin setarea corectă a constrângerilor de aspect ale unei vizualizări, poziția sa este actualizată automat, indiferent de mărimea sau orientarea ecranului. O altă zonă în care Auto Layout este utilă este localizarea aplicației. Cuvintele și propozițiile au o lungime diferită în diferite limbi. Acest lucru poate fi rezolvat și cu Auto Layout.
Accentsconagua