iOS 9 Starea organizată cu referințe de pe Storyboard

Chiar dacă storyboards au fost în jur de la iOS 5, mulți dezvoltatori sunt reticenți în a le folosi în proiectele lor. O remarcă tipică este că storyboard-urile sunt minunate pentru proiecte mici, dar sunt scurte pentru proiecte mai mari.

Apple a luat acest feedback la inimă și a rezolvat multe probleme comune prin introducerea referințelor storyboard. În acest tutorial, vă voi arăta care sunt referințele pe panou și cum vă pot ajuta să descompuneți interfețele utilizatorilor din proiect în piese ușor de gestionat.

1. Problema

Din perspectiva designerului, storyboard-urile sunt minunate. Ele reprezintă o reprezentare vizuală a interfeței utilizator a unui proiect. Interface Builder face ca adăugarea și conectarea scenei să fie o briză. Din păcate, storyboard-urile au, de asemenea, o serie de dezavantaje.

Complexitate

Cele mai multe proiecte au un scenariu care conține interfața de utilizare a aplicației. Acesta este obiectivul storyboard-urilor. Dreapta? Da și nu. Este adevărat că obiectivul storyboard-urilor este de a vizualiza interfața cu utilizatorul. Problema este că storyboard-urile pot deveni rapid dificile și complexe pentru proiecte mai mari.

Controlul surselor

Un alt obstacol în colaborarea cu storyboard-urile este colaborarea. Storyboards pot face o colaborare cu membrii echipei o adevărată provocare. Un storyboard este stocat ca un singur fișier. Aceasta înseamnă că orice schimbare pe care dvs. sau un membru al echipei o faceți într-un scenariu afectează același fișier. La un moment dat, acest lucru va duce în mod inevitabil la conflicte de fuziune. Acest lucru este mai puțin o problemă atunci când lucrați cu fișiere XIB, deoarece fiecare fișier XIB reprezintă o scenă a interfeței cu utilizatorul.

2. Soluția

Înainte de iOS 9

Soluția este simplă, spargerea storyboard-urilor într-un set de storyboard-uri mai mici. Dar cum conectați storyboard-urile? Înainte de iOS 9, dezvoltatorii ar conecta storyboard-urile în cod prin încărcarea storyboard-ului și invocarea instantiateInitialViewController () pe tabloul de bord. Următorul fragment de cod arată cum funcționează acest lucru.

lasa storyboard = UIStoryboard (nume: "DetailView", bundle: NSBundle.mainBundle ()) lasa viewController = storyboard.instantiateInitialViewController () daca viewController = viewController self.presentViewController (viewController, animated: true;

Îi obligă pe dezvoltatori să facă conexiunea în cod, făcându-l neclar modul în care sunt conectate mai multe storyboard-uri. Nu este evident cum o poveste este legată de un alt scenariu. Să vedem cum se rezolvă aceste probleme în iOS 9.

iOS 9

Recomandările de pe panoul de bord sunt o mare plus față de setul de instrumente storyboard. În Interface Builder, destinația unui segue poate fi acum și un alt scenariu. Mai mult decât atât, un storyboard poate fi referit de mai multe ori, ceea ce ușurează reutilizarea storyboard-urilor în mai multe locuri. Să creați un proiect simplu pentru a vă arăta cât de ușor este să începeți cu referințe la storyboard.

3. Configurarea proiectului

În loc să începeți cu un proiect de probă, vă voi arăta cum să utilizați referințele storyboard de la zero. Înainte de a continua, asigurați-vă că aveți Xcode 7 instalat. Recomandările de referințe sunt disponibile numai în iOS 9, care necesită Xcode 7.

Deschideți Xcode 7 și creați un nou proiect alegând Nou> Proiect ... din Xcode Fişier meniul. Selectează Aplicație cu file șablon din iOS> aplicație secțiune din stânga.

Configurați proiectul oferindu-i un nume și o setare Dispozitive la iPhone. Pentru acest tutorial, nu contează dacă ați setat Limba la Swift sau Obiectiv-C. Spuneți Xcode unde ar trebui să stocheze proiectul și să îl lovească Crea.

Dacă sunteți nou în scenă, atunci s-ar putea să fiți surprinși de faptul că Xcode a creat două scenografii pentru noi. Main.storyboard este graficul principal al proiectului și conține interfața de utilizare a aplicației. LaunchScreen.storyboard este un scenariu pe care Xcode îl utilizează pentru a crea dinamic un ecran de lansare pentru aplicație. Nu vom folosi LaunchScreen.storyboard în acest tutorial.

4. Crearea interfeței cu utilizatorul

Tabloul nostru de distribuție conține în prezent un controler de bare de tab și două controale de vizualizare. Să facem un pic mai interesant prin încorporarea controlorilor de vizualizare într-un controler de navigație. Selectați controlerul de vizualizare de sus și selectați Încorporați în> Controller de navigare din Xcode Editor meniul. Faceți același lucru pentru cel de-al doilea controler de vizualizare. Acesta ar trebui să arate acum scenariul dvs. de scenă.

Cu toate că tabloul de bord nu este complicat, acesta conține o complexitate suficientă pentru a vă arăta cum funcționează referințele din storyboard și cum pot beneficia proiectele dvs. E timpul pentru unele refactorizări.

5. Storyboard-uri de refactorizare

Când baza de cod a unui proiect devine dificilă sau prea complexă pentru a fi menținută, este timpul pentru refactorizare. Refactorizarea înseamnă pur și simplu reorganizarea sau restructurarea bazei de cod pentru a ușura menținerea acesteia. Aceasta include adesea ruperea bucăților mari de cod în biți mai mici, modularizarea bazei de coduri.

În timp ce storyboard-urile sunt un instrument excelent pentru a crea interfețe de utilizator, storyboard-urile pot deveni prea complexe sau prea mari pentru a le menține. În iOS 9, un storyboard poate fi împărțit în mai multe storyboard-uri mai mici. Apple se referă la acest proces ca refactoring.

Deoarece fiecare controler de vizualizare al controlerului de bara de tab-uri poate fi văzut ca o interfață de utilizator separată, este logic să se pună fiecare tabă a controlerului bara de tab-uri într-un tablou de bord separat. Acest lucru este foarte ușor în Xcode 7.

Începeți prin selectarea controlerului de vizualizare de sus și a controlerului său de navigare. Din Xcode's Editor meniu, alegeți Refactor la Storyboard. Xcode vă va cere să denumiți tabloul de bord pe care urmează să-l creați pentru selecția pe care ați făcut-o. Denumiți tabloul de bord FirstTab.storyboard și faceți clic pe Salvați.

Xcode va crea un nou tablou de bord care include controlerul de navigație și controlerul său de vizualizare rădăcină. În acest scenariu, controlerul de navigație devine automat controlerul de vizualizare inițial al storyboard-ului, după cum puteți vedea în screenshot-ul de mai jos.

Rețineți că Main.storyboard a devenit mult mai simplu. Controlerul de navigație și controlerul de vizualizare rădăcină au fost înlocuite de o referință de tip storyboard numită FirstTab. Dacă faceți dublu clic pe referința storyboard, Xcode se va deschide automat FirstTab.storyboard, tabloul de bord pe care îl face referire.

6. Explorarea referințelor de pe Storyboard

Recomandările despre povestiri sunt destul de puternice. O referință de tip storyboard va implica, în mod implicit, controlerul de vizualizare inițial al storyboard-ului referat, dar este posibil să se facă legătura cu orice scenă din storyboard-ul care are Storyboard ID.

Creaza un nou UIViewController subclasa și denumiți-o ThirdViewController. Deschis FirstTab.storyboard și trageți un nou controler de vizualizare din Biblioteca de obiecte pe dreapta. De la Biblioteca de obiecte, adăugați o etichetă în vizualizarea noului controller de vizualizare și setați textul acestuia A treia vedere. Cu noul controler de vizualizare selectat în storyboard, setați Clasă la ThirdViewController și Storyboard ID la ThirdView în Inspectorul de identitate pe dreapta.

Înapoi la Main.storyboard și selectați referința de pe panourile de creație create mai devreme. Deschide Atribuții Inspector pe dreapta pentru a vedea atributele referinței de pe panourile scrierilor. Atribuții Inspector ne arată că referința de pe panoul de referință FirstTab storyboard. ID referință este gol momentan.

A stabilit ID referință la ThirdView și veți vedea că referința panoului de știri își actualizează eticheta pentru a reflecta modificarea. Rulați aplicația în Simulatorul iOS pentru a vedea rezultatul. Acest lucru ilustrează faptul că puteți folosi referințele storyboard pentru a vă conecta la orice scenă dintr-un scenariu, chiar dacă scena nu este conectată printr-un segue cu alte scene din storyboard.

Rețineți că putem specifica, de asemenea, pachetul din storyboard-ul referitor. Acest lucru este util în special dacă trebuie să vă conectați la o scenă dintr-un scenariu al unui cadru extern.

Înainte de a continua explorarea referințelor de storyboard, aș dori să subliniez că tabloul de bord al unei referințe de tip storyboard poate fi același tablou de bord al cărui referință aparține. Acest lucru poate părea ciudat, dar poate fi foarte util dacă doriți să reutilizați anumite scene într-un scenariu sau dacă lucrați cu un scenariu foarte complex.

7. Adăugarea referințelor de pe Storyboard

Am creat FirstTab.storyboard prin alegerea Refactor la Storyboard din Xcode Editor meniul. Recomandările de pe panourile de bord sunt, de asemenea, disponibile de la Biblioteca de obiecte. Deschide Biblioteca de obiecte din dreapta și adăugați o referință la storyboard Main.storyboard.

Selectați controlerul bara de tab-uri din storyboard și creați un segue la referința storyboard deținând Control și trageți la noua referință de scenariu.

Din meniul care apare, alegeți vizualizați controlerele de la Relația Segue secțiune.

Selectați noua referință și setați storyboard-ul Storyboard ID la FirstTab. Rulați aplicația în Simulatorul iOS pentru a vedea rezultatul. Rețineți că cea de-a doua filă a controlerului de bara de tab-uri prezintă cel de-al treilea controler de vizualizare în timp ce a treia filă arată primul controller de vizualizare încorporat într-un controler de navigare.

Concluzie

Recomandările de referințe sunt puternice. Nu numai că fac scenografile ușor de manevrat și modular, ele fac foarte ușor să reutilizeze storyboards și chiar să creeze în storyboard-uri în locuri arbitrare.

Cred cu tărie că referirile la storyboard vor avea ca rezultat o rată de adoptare mult mai mare a storyboard-urilor de către dezvoltatori. Recomandările despre povestiri sunt exact ceea ce au cerut dezvoltatorii.

Cod