Share
Ca orice iterație de iOS, iOS 9 aduce multe caracteristici noi. Modificările UIKit cu fiecare versiune de iOS, dar o adăugare specială în iOS 9 va schimba modul în care dezvoltatorii se gândesc fundamental la crearea interfețelor utilizator pe iOS, UIStackView. În acest tutorial, veți învăța cum să utilizați UIStackView pentru a crea interfețe utilizator.
Acest articol presupune că sunteți familiarizați cu elementele de bază ale layoutului automat. Dacă acest subiect este nou pentru dvs., atunci tutorialul introductiv despre Auto Layout este un loc bun pentru a începe. Pentru a înțelege motivele pentru care vizibilitatea stivei este atât de utilă și cum funcționează, este necesară o înțelegere solidă a aspectului automat.
Utilizarea UIStackView, vom construi un ecran machet care îi cere utilizatorului să lase un rating pentru aplicația lor. Utilizatorul poate adăuga sau elimina stele în interfața de utilizator pentru a-și indica ratingul. Va arăta astfel când vom termina.
Descărcați proiectul inițial de la GitHub și deschideți-l. Veți vedea că există două vederi în interiorul stivei Main.Storyboard.
Vom folosi cele două vizualizări pentru a stabili interfața cu utilizatorul. Înainte de a începe codarea, să aruncăm mai întâi o scurtă privire asupra modului în care funcționează o vizualizare de stivă.
Accentsconagua
UIStackView Prezentare generalăÎn centrul său, vizualizarea stivei este o interfață pentru a stabili mai multe subdiviziuni, fie pe verticală, fie pe orizontală. Dacă aveți experiență de dezvoltare Android, este similară cu LinearLayout Control.
Unul dintre principalele avantaje ale vizualizării stivei este că va crea în mod automat constrângeri Auto Layout pentru fiecare subview care se adaugă la acesta. Aveți, de asemenea, un control finit asupra modului în care aceste subdiviziuni sunt dimensionate și poziționate. Există opțiuni pentru a configura dimensiunea ecranelor, unde ar trebui să fie aranjate, precum și cât de mult ar trebui să fie umplutura între subdiviziuni.
Pentru a vedea opțiunile unei vizualizări stack, deschideți Main.Storyboard și selectați unul dintre vizualizările stack-ului. În Atribuții Inspector, observați opțiunile listate la Vizualizare stivă.
Axădetermină dacă vizualizarea stivei își aranjează subdivizările sale orizontal sau vertical. Aliniere controlează modul în care subdiviziunile reale trebuie aliniate. distribuire definește modul în care sunt dimensionate subdiviziuni și Spațiere controlează distanța minimă dintre subdiviziuni din vizualizarea stiva.
Pentru a simplifica acești termeni, gândiți-vă la acest lucru. Alignment controlează X și Y în timp ce distribuire controale înălţime și lăţime. Celelalte două valori pot afecta și alinierea. Origine relativă, dacă este bifată, va deriva distanța verticală a fiecărui subview de la linia de bază. Margini de dispunere Relativ plasează subview-urile relative la marginea standard a aspectului dacă este selectată.
Un alt lucru important pe care trebuie să-l amintiți atunci când lucrați cu o vizualizare de stivă este acela că este construit pentru a fi un vizualizator de containere. Din cauza asta, e a nonrendering subclasa de UIView. Nu este atrasă de panza ca de altfel UIView subclase. Aceasta înseamnă că setarea proprietăților cum ar fi culoare de fundal sau suprascrierea drawRect: metoda nu va avea niciun efect asupra vizualizării stivei.
subviews și arrangedSubviews Înainte de a începe să lucrăm cu vizualizări de stivă, aș dori să mă concentrez asupra diferenței dintre vizualizarea unei stive subViews și arrangedSubviews proprietăți. Dacă doriți să adăugați un subview pentru gestionarea vizualizării stack-ului, faceți acest lucru sunând addArrangedSubview: sau insertArrangedSubview: atIndex:. arrangedSubViews array este un subset al său subViews proprietate.
Pentru a elimina o subrevisă care gestionează vizualizarea stack-urilor, trebuie să apelați ambii removeArrangedSubview: și removeFromSuperview. Îndepărtarea unei subrevisări aranjate asigură că vizualizarea stivei nu va mai gestiona constrângerile acestei vizualizări. Nu o scoate din ierarhia de vedere. Este foarte important să vă amintiți.
Acum, că avem o înțelegere solidă a modului în care funcționează vizualizarea stack-urilor, să începem să folosim o vizualizare de stivă.
Deschis Main.Storyboard și selectați vizualizarea top stack. În Atribuții Inspector, efectuați următoarele modificări:
Aceasta va determina vizualizarea stivei pentru a încerca să adauge constrângeri care centralizează vertical toate subdivizările și le diminuează astfel încât să umple în mod egal axa vizualizării stivei. În plus, va adăuga 30 de puncte de umplutură la subviews.
Dacă subview-urile nu sunt capabile să se potrivească în interiorul vizualizării stack-ului, acestea se vor micșora pe baza priorităților lor de rezistență la compresie. Acest lucru s-ar putea întâmpla dacă ați adăuga subview-uri la vizualizarea stack-ului la timpul de execuție așa cum vom vedea mai târziu.
Dacă există vreo ambiguitate, vizualizarea stivei va cădea înapoi la micșorarea subview-urilor pe baza indexului lor în arrangedSubviews până când se potrivesc limitele vizualizării stivei.
Adăugați o etichetă, o afișare de imagini și un buton în vizualizarea top stack trăgându-le în schița documentului. Asigurați-vă că eticheta se află în partea de sus, afișarea imaginii în mijloc și butonul din partea de jos. Schița de document a panoului de bord ar trebui să arate astfel după ce ați adăugat aceste subrevisări:
Apoi, va trebui să editați câteva dintre proprietățile subreviselor pe care tocmai le-am adăugat, utilizând Atribuții Inspector. Pentru etichetă, schimbați-l Text la "Cum îți place aplicația noastră?" și selectați Centru pentru Alinierea textului. În ceea ce privește imaginea, introduceți "logo" pentru Imagine și AFit pentru Modul de conținut. Pentru buton, setați-l Text la "Adăugați stea!".
Continuați și rulați aplicația. Veți vedea că, cu foarte puține lucruri, ați adăugat trei subview-uri care răspund la orice schimbare în orientare, clasă de mărime etc. De fapt, nici măcar nu a trebuit să adăugați manual constrângeri.
În timp ce aplicația se execută, faceți clic pe Debug View Ierarchy din partea de jos a ferestrei Xcode pentru a iniția depanarea vizualizării live.
Selectați oricare dintre cele trei sub-viziuni pe care le-ați adăugat anterior. Uitați-vă la inspectorul de mărime și observați constrângerile care au fost adăugate de vizualizarea stivei. Imaginea de mai jos arată constrângerile adăugate pentru buton.
Butonul pentru a adăuga stele pentru aplicația noastră mock nu este încă cuplat. Să rezolvăm asta acum. Opriți aplicația și deschideți tabloul de bord. Creaza un IBAction cu numele addStar pentru Touch Up Inside eveniment.
Adăugați următorul cod în interiorul addStar (_ :) metodă:
@IBAction func addStar (expeditor: AnyObject) lăsați starImgVw: UIImageView = UIImageView (imagine: UIImage (numit: "star")) self.horizontalStackView.addArrangedSubview (starImgVw) UIView.animateWithDuration (0.25, animations: self.horizontalStackView.layoutIfNeeded ())
Adăugăm o imagine stea în vizualizarea stack orizontal cu o animație. Rețineți că, deoarece vizualizările stack-urilor gestionează constrângerile pentru Auto Layout pentru noi, trebuie doar să sunăm layoutIfNeeded pentru a crea o animație.
Creați și rulați aplicația din nou și adăugați o stea. Veți vedea că rezultatul final nu este ceea ce sperăm.
Dacă te uiți la Atribuții Inspector cu vizualizarea stiva de jos selectată, problema ar trebui să fie clară. Din moment ce ambele Aliniere și distribuire sunt setate la Completati, viziunea stivei este întinderea stelei pentru a-și umple limitele.
Acest lucru va cauza, de asemenea, mai multe probleme când se adaugă mai multe stele. Vrem ca stelele să fie centrate, nu întinse pentru a se potrivi lățimii vederii teancului. Schimbare Aliniere la Centru și distribuire la Umpleți în mod egal. În cele din urmă, actualizați addStar (_ :) metodă prin setarea vizualizării imaginilor Modul de conținut la Aspect Fit.
@IBAction func addstar (expeditor: AnyObject) lăsăm starImgVw: UIImageView = UIImageView (imagine: UIImage (numit: "star")) starImgVw.contentMode = .ScaleAspectFit self.horizontalStackView.addArrangedSubview (starImgVw) UIView.animateWithDuration (0.25, self.horizontalStackView.layoutIfNeeded ())
Construiți și rulați aplicația încă o dată. Adăugați câteva stele și observați modul în care vizualizarea stivei le corectează corect de-a lungul axei.
Aplicația noastră nu ar fi foarte utilă fără posibilitatea de a elimina stelele. Deschideți tabloul de bord și adăugați a orizontală vizualizarea stivei în ierarhia de vizualizare a stivei de sus. Asigurați-vă că este poziționat sub vizualizarea imaginii pentru logo și deasupra butonului.
Trageți "Adăugați stea!" butonul din interiorul noii stiluri adăugate și adăugați butonul secund la vizualizarea noului stack. Schimbați titlul butonului în "Remove Star" și selectați roșu pentru culoarea textului. Schița documentului ar trebui să arate astfel:
Modificați atributele din noua vizualizare stack în Atribuții Inspector, făcând următoarele modificări:
Creaza un IBAction pentru butonul "Eliminați steaua" cu un nume de removeStar pentru Touch Up Inside eveniment.
Adăugați următorul cod la removeAction (_ :) metodă:
@IBAction func removeStar (expeditor: AnyObject) lăsați stea: UIView? = self.horizontalStackView.arrangedSubviews.last dacă permiteți aStar = stea self.horizontalStackView.removeArrangedSubview (aStar) aStar.removeFromSuperview () UIView.animateWithDuration (0.25, animații: self.horizontalStackView.layoutIfNeeded ())
Construiți și rulați aplicația. Acum ar trebui să puteți adăuga și elimina stele. Modificați orientarea Simulatorului iOS sau rotiți dispozitivul de testare pentru a vedea cum se comportă aplicația prin ajustarea interfeței de utilizator. Rețineți că am construit interfața de utilizare a acestei aplicații fără a fi nevoie să adăugați manual o singură constrângere.
Rețineți că removeFromSuperview apel în removeStar (_ :) este esențială pentru a elimina subiecția din ierarhia de vizualizare. Amintiți-vă că removeArrangedSubview (_ :) numai spune povestea stivei că nu mai are nevoie să gestioneze constrângerile subview-ului. Subiecția, totuși, rămâne în ierarhia vizuală până când o eliminăm din supravegherea ei prin apel removeFromSuperview pe el.
UIStackView clasa simplifică foarte mult dezvoltarea interfețelor utilizator. Acesta este un lucru bun, mai ales când hardware-ul pe care rulează aplicația poate varia foarte mult. Cu UIStackView, dezvoltatorii pot petrece mai puțin timp în crearea unor constrângeri dificile pentru scenarii simple, trecerea ridicării grele la UIKit.
Dacă ați fost blocat în orice moment în timpul acestui tutorial, nu ezitați să descărcați proiectul finalizat de la GitHub.
