Share
Auto Layout a fost disponibil de câțiva ani, dar cu iPhone 6 și 6 Plus a devenit o necesitate pentru proiecte. Deși nu a fost întotdeauna foarte ușor de folosit, Xcode a văzut în mod constant îmbunătățiri în Interface Builder pentru a simplifica integrarea Auto Layout. În acest tutorial, veți învăța cum să utilizați Visual Format Language folosind Swift pentru a crea constrângeri Auto Layout în cod.
Acest tutorial presupune că aveți cunoștințe despre Auto Layout. Dacă sunteți noul Auto Layout, vă recomand să citiți mai întâi introducerea de către Joyce Echessa.
Visual Format Language este un limbaj declarativ care este utilizat pentru a defini constrângerile Auto Layout pentru vizualizări. Sintaxa sa este expresivă și ușor de înțeles când scanezi prin cod. Constrângerile intenționate ar trebui să fie imediat limpezi la citirea unei instrucțiuni de limbă Visual Format și acestea curg mult ca o propoziție.
Constrângerile de auto-dispunere cu priorități diferite, layout-uri verticale, spațiere și dimensiuni pot fi create folosind sintaxa Visual Format Language. Este definit în interiorul unei variabile de șir și apoi trecut la metodele de nivel de clasă constraintsWithVisualFormat: opțiuni: valori: puncte de vedere: și
constraintWithItem: atribut: relatedBy: toItem: atribut: multiplicator: constanta: din NSLayoutConstraint clasă.
Limba Visual Format poate fi utilă în mod special atunci când Interface Builder nu este o opțiune pentru a adăuga constrângeri Auto Layout, de exemplu când o parte din interfața de utilizator a aplicației trebuie să fie creată programabil.
Să creați un nou proiect în Xcode pentru a vedea cum se utilizează Visual Format Language și cum pot beneficia proiectele dvs..
Deschideți Xcode și selectați Nou> Proiect ... de la Fişier meniul. Alege Vizualizare individuală din lista de Aplicația iOS șabloane și faceți clic pe Următor →.
Apoi denumiți proiectul și introduceți numele și identificatorul organizației. Alege universal de la Dispozitive listă, faceți clic pe Următor →, și alegeți o locație pentru a salva proiectul. Selectați Rapid ca limbaj de programare.
Pentru a începe, creați trei variabile de tip UIView. Deschis ViewController.swift și adăugați următorul cod deasupra viewDidLoad metodă:
var vwBlue: UIView! var vwRed: UIView! var vwGreen: UIView!
Creați o funcție numită initViews în partea inferioară a controlerului de vizualizare vid ca tip de retur. Această funcție va inițializa vizualizările și le va adăuga în ierarhia de vizualizare. Asigurați-vă că ați apelat la această funcție viewDidLoad după ce a sunat la superclass viewDidLoad metodă.
() vwGreen = UIView () vwGreen = UIView () // Prep auto layout vwRed.setTranslatesAutoresizingMaskIntoConstraints (false) vwBlue.setTranslatesAutoresizingMaskIntoConstraints (false) vwGreen.setTranslatesAutoresizingMaskIntoConstraints (false) / / Colorarea vwRed.backgroundColor = UIColor.redColor () vwBlue.backgroundColor = UIColor.blueColor () vwGreen.backgroundColor = UIColor.greenColor () // Adăugați-i la vizualizare self.view.addSubview (vwRed) self.view.addSubview ( vwBlue) self.view.addSubview (vwGreen)
Când utilizați Auto Layout pentru vizualizările create în cod, există câteva avertismente care trebuie să fie cunoscute. Primul este legat de valoarea proprietății translatesAutoresizingMaskIntoConstraints. Această proprietate este Adevărat în mod implicit, ceea ce înseamnă că constrângerile Auto Layout vor fi create pe baza vizualizărilor masca de autorezonare. Vrem ca vizualizarea să respecte constrângerile Auto Layout pe care le vom adăuga, astfel încât această proprietate să fie setată la fals.
Al doilea lucru pe care trebuie să-l țineți cont este ciclul de viață al vederii. Înainte de a putea fi adăugate constrângeri Auto Layout la o vizualizare, acestea trebuie adăugate la superview. În caz contrar, este aruncată o excepție de rulare. Amintiți-vă că Auto Layout definește unde sunt afișate vederile pe baza relațiilor. Dacă o vizualizare nu are supervizare, sistemul de operare nu are niciun punct de referință pentru a lega constrângerile Auto Layout la.
Să începem cu un exemplu simplu al limbajului Visual Format. Pentru vizualizarea roșie, vwRed, vom adăuga constrângeri Auto Layout care o fac la aceeași dimensiune ca și supravegherea. Acest lucru este util într-un scenariu în care adăugați o imagine de fundal.
Înainte de a putea fi utilizat limbajul Visual Format, toate punctele de vedere de care avem nevoie trebuie să fie menționate în interiorul unui dicționar. Acesta este modul în care vizualizările vor fi identificate de Visual Language Format.
Creați o funcție numită createConstraints cu vid retur în partea inferioară a clasei controlerului de vizualizare. Nu vă faceți griji cu privire la sintaxa. Vom revizui implementarea createConstraints funcționează într-un moment.
Accentsconagua
()), () () () () () () () (), pentru a adăuga constrângeri pentru a permite vizualizărilor = Dicționar (dicționarLiteral: "roșu", vwRed) permiteți verticalConstraints = NSLayoutConstraint.constraintsWithVisualFormat ("H: | [red] |", opțiuni: nil, metrics: nil, vizualizări: vizualizări) self.view.addConstraints (horizontalConstraints) // constrângeri verticale let verticalConstraints = NSLayoutConstraint.constraintsWithVisualFormat : | [red] | ", opțiuni: nil, valori: nil, vizualizări: vizualizări) self.view.addConstraints (verticalConstraints)Apelați această funcție la sfârșitul secțiunii initViews pe care am creat-o mai devreme. Construiți și executați proiectul apăsând Command + R sau făcând clic pe butonul de redare din partea stângă sus. Simulatorul iOS va rula să afișeze imaginea roșie, preluând tot ecranul conform destinației dorite.
Când utilizați limbajul Visual Format, constrângerile Auto Layout sunt definite fie orizontal, fie vertical. De asemenea, puteți defini înălțimea sau lățimea unei vizualizări atunci când declarați o constrângere verticală și orizontală. Să aruncăm o privire mai atentă la primul șir pe care l-am folosit pentru a crea constrângerea orizontală.
"H: | [red] |"
În primul rând, identificăm că aceasta va fi o constrângere orizontală prin începerea șirului cu litera H. Orizontul este implicit, dar este o practică bună să o includeți pentru ao face mai evidentă. Direcția constrângerii este urmată de un colon.
| sau simbolul conductei simbolizează supravegherea vizualizării. Pentru a adăuga spațiu între două elemente, - sau simbolul dash și valorile întregi pot fi plasate între ele pentru a crea un spațiu fix sau variabil. Viziunile sunt menționate de către tastele din dicționarul transmis constraintsWithVisualFormat. Fiecare vizualizare este înfășurată în paranteze pătrate.
Observați cum șirul întreg se potrivește vizibil cu imaginea din simulator. Este scris ca o propoziție care ar citi ceva de genul "Orizontal, vizualizarea roșie ar trebui să extindă întreaga lățime a supraveghierii sale fără umplutură".
Acum că aveți o înțelegere de bază a sintaxei, o vom edita createConstraints funcția de adăugare a constrângerilor de tip Auto Layout la două vizualizări.
În createConstraints funcția, editați horizontalConstraints variabilă după cum se arată mai jos.
// Constrângerile orizontale permit horizontalConstraints = NSLayoutConstraint.constraintsWithVisualFormat ("H: | -10- [roșu (> = 100,<=200)]-0-[blue(==red)]-10-|", options: nil, metrics: nil, views: views) self.view.addConstraints(horizontalConstraints)Acest fragment de cod arată cu adevărat flexibilitatea limbajului Visual Format. Instrucțiunea de mai sus creează pentru noi un număr de constrângeri Auto Layout. Lângă numele vizualizării, dimensiunile orizontale sunt definite în paranteze. Pentru vizualizarea roșie, dimensiunea trebuie să fie mai mare sau egală cu 100 de puncte, dar mai mică sau egală cu 200 de puncte.
Vederea albastră specifică faptul că ar trebui să aibă aceeași dimensiune orizontală ca și imaginea roșie prin utilizarea == roșu în paranteze. Acesta este un mod convenabil de a specifica că mai multe vizualizări ar trebui să aibă aceeași dimensiune. Construiți și rulați aplicația în Simulatorul iOS. Rezultatul ar trebui să arate imaginea de mai jos.
Cu aplicația care rulează în Simulatorul iOS, apăsați Comandă + Săgeată stânga pentru a modifica orientarea simulatorului iOS pe peisaj. În timp ce aplicația continuă să funcționeze bine, a apărut un avertisment în consola Xcode. Avertismentul ne spune că anumite constrângeri privind aspectul automat nu pot fi satisfăcute. Deși acest lucru nu vă va afecta aplicația, aceasta poate duce la rezultate neașteptate în interfața de utilizare a aplicației.
Acest lucru se întâmplă deoarece cele două vederi pe care le-am creat nu pot avea o lățime de 200 de puncte și nu au distanțe între ele atunci când dispozitivul sau simulatorul iOS se află în peisaj. Aspectul automat rezolvă aceste tipuri de scenarii utilizând prioritățile. Limba Visual Format vă permite să definiți prioritățile utilizând @ simbol. Editați horizontalConstraints variabilă pentru a citi astfel:
// Constrângerile orizontale permit horizontalConstraints = NSLayoutConstraint.constraintsWithVisualFormat ("H: | -10- [roșu (> = 100,<=200@20)]-0-[blue(==red)]-10-|", options: nil, metrics: nil, views: views)Deoarece vederile roșu și albastru au acum o prioritate scăzută asupra constrângerii lor de lățime, indicată prin @ 20, sistemul Auto Layout va întrerupe aceste constrângeri și le va furniza valoarea corectă la timpul de execuție. Rulați din nou aplicația și modificați orientarea pe peisaj. Vizualizările acum umple spațiul suplimentar și Xcode nu produce nici o avertizare.
Apoi, vom crea constrângeri pentru vizualizarea verde. Actualizați punerea în aplicare a createConstraints după cum se arată mai jos.
()), () () () () () () () (), pentru a adăuga constrângeri pentru a permite vizualizărilor = Dicționar (dicționarLiteral: "roșu", vwRed) permiteți horizontalConstraintsRedBlue = NSLayoutConstraint.constraintsWithVisualFormat ("H: | -10- [roșu (> = 100,<=200@20)]-0-[blue(==red)]-10-|", options: nil, metrics: nil, views: views) self.view.addConstraints(horizontalConstraintsRedBlue) let horizontalConstraintsGreen = NSLayoutConstraint.constraintsWithVisualFormat("H:|[green]|", options: nil, metrics: nil, views: views) self.view.addConstraints(horizontalConstraintsGreen) //Vertical constraints let verticalConstraintsRed = NSLayoutConstraint.constraintsWithVisualFormat("V:|[red]-10-[green(40)]|", options: nil, metrics: nil, views: views) self.view.addConstraints(verticalConstraintsRed) let verticalConstraintsBlue = NSLayoutConstraint.constraintsWithVisualFormat("V:|[blue]-10-[green(40)]|", options: nil, metrics: nil, views: views) self.view.addConstraints(verticalConstraintsBlue) Deoarece horizontalConstraintsGreen constrângerea nu definește o anumită lățime sau distanțe față de supravegherea sa, va acoperi întreaga lungime. Constrângerea verticală asigură o înălțime de 40 de puncte cu 10 puncte de spațiu între vizualizările roșu și albastru.
Dacă rulați aplicația încă o dată, vizualizarea verde se întinde pe toată lățimea ecranului, iar vizualizările roșu și albastru rămân deasupra acestuia, așa cum au fost înainte. Când simulatorul iOS este rotit pe peisaj, vizualizările își păstrează poziția și se redimensionează corespunzător.
Pentru a face totul mai ușor de citit, vom folosi un dicționar de valori în declarațiile de constrângeri. Creați un dicționar după cum se arată mai jos, imediat după ce ați declarat vizualizari dicţionar.
permiteți metricilor = dicționar (dicționarLiteral: ("spațiere", 10), "lowWidth", 100), "highwidth", 200) “, 40))Acum, în loc să folosim valorile codate greu, putem folosi valorile valori dicționar, ceea ce face declarațiile constrângerilor mult mai ușor de citit. Editați createConstraints funcționați ultima dată utilizând noua funcție valori dicţionar.
func createConstraints () -> Void // Vizualizări pentru a adăuga constrângeri pentru a permite vizualizări = Dicționar (dicționarLiteral: ("roșu", vwRed), ("albastru", vwGreen) Fișierul Visual Format permite metrics = dicționar (dicționarLiteral: ("spațiere", 10), "lowwidth", 100), "highwidth", 200), "redBlueSpacing" ("greenHeight", 40)) // Constrângerile orizontale permit horizontalConstraintsRedBlue = NSLayoutConstraint.constraintsWithVisualFormat ("H: | -spacing- [red (> = lowWidth,<=highWidth@priority)]-redBlueSpacing-[blue(==red)]-spacing-|", options: nil, metrics: metrics, views: views) self.view.addConstraints(horizontalConstraintsRedBlue) let horizontalConstraintsGreen = NSLayoutConstraint.constraintsWithVisualFormat("H:|[green]|", options: nil, metrics: nil, views: views) self.view.addConstraints(horizontalConstraintsGreen) //Vertical constraints let verticalConstraintsRed = NSLayoutConstraint.constraintsWithVisualFormat("V:|[red]-spacing-[green(greenHeight)]|", options: nil, metrics: metrics, views: views) self.view.addConstraints(verticalConstraintsRed) let verticalConstraintsBlue = NSLayoutConstraint.constraintsWithVisualFormat("V:|[blue]-spacing-[green(greenHeight)]|", options: nil, metrics: metrics, views: views) self.view.addConstraints(verticalConstraintsBlue) S-ar putea să te întrebi de ce înălțimea vederii verde a fost definită de două ori. Acest lucru se datorează faptului că Visual Format Language funcționează în rânduri și coloane. Când utilizați Visual Format Language, gândiți-vă la adăugarea constrângerilor de la stânga la dreapta pe un "rând" al vizualizării pentru constrângeri orizontale. Pentru constrângerile verticale, trebuie să gândiți în termeni de coloane.
Majoritatea constrângerilor de auto dispunere pe care le veți folosi pot fi exprimate cu Visual Language Format. Există însă câteva care nu pot. De exemplu, o constrângere a raportului de aspect fix nu poate fi creată utilizând Visual Language Format. Acest lucru nu poate fi realizat cu sintaxa Visual Format Language, deoarece șirul următor nu poate fi analizat:
H: | imagineView.width = 2 * imagineView.height |
Puteți utiliza în continuare Auto Layout în codul dvs. pentru a realiza aceste tipuri de constrângeri utilizând metoda tradițională constraintWithItem metodă.
Limba Visual Format poate fi foarte utilă atunci când trebuie să creați constrângeri Auto Layout în cod. În loc să creați constrângeri unul câte unul, Visual Language Language vă permite să creați un număr de constrângeri cu o singură linie de cod.
Înainte ca dezvoltatorii să fie disponibili pentru Auto Layout, urmărirea modului de redimensionare a vederilor pentru diferite categorii de dispozitive a fost o mulțime de lucruri. Cu Auto Layout și Visual Format Language, acest lucru este acum mai intuitiv, făcând interfețele utilizatorilor mai ușor de întreținut pe toate dispozitivele.
