06 Introducere pe mare în storyboards
1. Introducere
Apple a introdus storyboard-urile la lansarea iOS 5.
face o mulțime de ani de acest …
Totuși am primit 2 e-mailuri de citire efectapple Comentariu Au găsit unele dificultăți de a urma tutoriale, deoarece nu domină povestea.
Deci, în această săptămână acest lucru va fi subiectul despre care ne vom concentra tutorialul nostru.
înainte de lansare Din tablourile de story, dezvoltatorii iOS au avut doar opțiunea de a crea interfețele aplicațiilor noastre prin intermediul fișierelor cu extensia .xib sau să le programezi direct prin cod.
Fiecare dintre aceste fișiere a reprezentat un ecran al aplicației noastre.
Acest mod de lucru a avut avantajele sale (adesea .xib sunt încă mai bune decât storyboards) și, bineînțeles, de asemenea, dezavantajele lor.
Prin urmare, aveți astăzi trei opțiuni pentru a vă crea interfețele :
- progresează direct prin codul
- utilizați fișierele .xib
- Utilizați storyboards
În tutorialul din această săptămână, să vedem tot ce trebuie să știți pentru a vă simți confortabil folosind storyboards și nu aveți nici o problemă ori de câte ori doriți să creați o nouă aplicație iOS .xib.
În această săptămână ne vom concentra pe storyboards, să vedem unele dintre avantajele pe care le oferă.
- sunt perfecte pentru a vedea navigația completă Fluxul unei aplicații.
- vă permite să creați o aplicație multiview fără a fi nevoie să scrieți practic cod.
- sunt foarte utile pentru evoluțiile mici.
ca orice opțiune, au, de asemenea, dezavantaje.
Vreau doar să comentez pe a.
deoarece toată interfața noastră este concentrată într-un \ Fișierul Nico, există multe conflicte care complică dezvoltarea echipei unei aplicații.
Cu toate acestea, în multe echipe de dezvoltare sunt opțiunea preferată atunci când creați orice interfață, deci este important să puteți lucra cu ei.
3. Ce vom vedea în acest tutorial despre storyboards?
Cele mai importante puncte pe care le vom vedea sunt următoarele:
- avantaje ale utilizării storyboards în evoluțiile dvs.
- Cunoașterea interfeței constructorului
- ceea ce este docul?
- Specificarea interfeței principale a aplicației noastre
- Secvență de pornire a unui
- Cum se selectează controlerul inițial de vizualizare
- Setați modurile de portret și peisajele aplicației noastre
- Cum se adaugă un tablouVontroller, un sistem de navigare și un tabbbarcontroller?
Să începem să aruncăm o privire la fundațiile de bază ale storyboard-ului.
Crearea proiectului nostru în Xcode
pentru a începe să creați un nou proiect în Xcode, accesând meniul Fișier ivid id = „1807510745” nou iv id = „1807510745” Proiect … și alegeți un singur model de aplicație:
apoi faceți clic pe următorul și dați-i nu Vrei. În cazul meu îl voi numi Storyboards_demo. Lăsați restul opțiunilor, așa cum le vedeți în imagine:
Faceți clic pe următorul, salvați proiectul Oriunde doriți și ați terminat apăsând butonul Creare / Div>
Cu acest proiect demonstrativ, vom vedea tot ce este necesar pentru a stăpâni povestirile.
5. Storyboards ‘Basics
Faceți clic pe fișierul principal.Storyboard și să vedeți câteva concepte pe care trebuie să le cunoașteți:
Builder de interfață
ecranul care a fost deschis la accesarea Placa principală este cunoscută sub numele de interfața constructorului și are următorul aspect:
în primele versiuni din iOS, Interfață Builder a fost o aplicație independentă de xcode și la fel ca acum, a fost folosit pentru a crea interfețele aplicațiilor noastre.
partea stângă a interfeței constructorului este cunoscută sub numele de contur de document și ne arată a Lista tuturor scenelor care alcătuiesc interfața noastră.
O scenă reprezintă fiecare dintre ecranele aplicației noastre
în interiorul fiecărei scene, toate obiectele care adaugă la interfață, în plus față de constrângeri și alte elemente.
Pentru a afișa sau ascunde conturul de documente Puteți utiliza butonul următor, situat în partea stângă jos:
După cum vedeți, în proiectul nostru nou creat, avem doar un ecran. Acest ecran este reprezentat de controlerul nostru de vizualizare.
În partea dreaptă superioară a constructorului de interfață Avem inspector de atribut. Prin opțiunile pe care le oferiți, putem face modificări ale proprietăților oricărui obiect care face parte din interfața noastră.
în interiorul inspectorului de atribute Aveți 6 meniuri diferite, unde toată lumea controlează un alt aspect al oricărui obiect:
Pe de altă parte, în partea dreaptă mai jos, aruncați biblioteca de obiect:
De aici puteți adăuga orice element la interfața aplicației dvs.
Testați de exemplu Pentru a trage o etichetă, un buton, un câmp text și un cursor la vizualizarea dvs.:
te uiți la Tu, pe lângă adăugarea lor la interfața noastră, Xcode le-a adăugat la lista elementelor care apar în schița documentului:
da alecu TAS Aplicația, făcând CMD + R, veți vedea că elementele pe care le-am adăugat la interfața noastră sunt afișate în simulator.
Dock
Mai presus deasupra fiecărui vizualizat Puteți vedea docul.
Dockul arată obiectele la nivel înalt ale fiecărei scene. Fiecare scenă va avea cel puțin un obiect de vizualizare, un obiect de răspuns primul răspuns și un obiect de ieșire, dar poate avea și alte elemente. Dockul este pur și simplu un document de schiță miniatural.
Vizualizatorul de vizualizare reprezintă în mod evident singurul nostru vizualizare.
Primul răspuns gestionează concentrarea aplicației noastre. Cel mai probabil, practic nu o folosesc.
Ieșire poate fi utilizat pentru a adăuga opțiuni de navigare la interfețele noastre.
Interfață principală
înainte, atunci când executați proiectul nostru , aplicația pe care am creat-o deja știa perfect ceea ce s-ar fi trebuit să le conectăm la aplicarea aplicației.
Acest lucru nu are nici un mister, avem doar un fișier principal.Storyboard, deci ce este normal că proiectul nostru știe că acesta este fișierul care conține interfața noastră.
Cu toate acestea, într-un alt proiect puteți utiliza mai multe povestiri diferite, deci este important să înțelegeți, unde specificăm ceea ce este principalul tablotaj .
Simplificarea multor aplicații iOS, în mod implicit, începe execuția sa în clasa AppDelegate.Swift.
Faceți clic pe această clasă și verificați partea inițială din acesta:
TD>
Atributul @uiapplicationMain Situat în partea de sus determină faptul că clasa noastră AppDelegate este punctul de intrare al aplicației noastre.
Este obligatoriu ca appdelectorul nostru Moșteniți de la Uirespon și aveți o proprietate de tip Uiwindow, astfel încât aplicația să funcționeze.
Dacă vă uitați la metodele care apar în această clasă, toate sunt practic goale. Doar DidfinishLeschingWithTonthopții () are un cod și singurul lucru pe care îl face este returnat adevărat.
Odată ce clasa inițială a aplicației noastre este revizuită, este probabil să vă urmeze. Unde se face cererea noastră la storyboard?
File Info.plist
Pentru a răspunde la acest lucru va trebui să deschideți fișierul Info.plist și să localizați intrarea principală de bază a fișierului de bază.
Când executăm aplicația, obiectul UIAPPlicare încarcă tabloul de story specificat în această cheie, inițializează Viewcontroller care este marcat ca controler de vizualizare inițială (acum vom vedea unde se face) și apoi plasează vizualizarea acelui viewcontroller pe obiectul Uiwindow.
Există un alt punct în care trebuie să specificăm ceea ce este principalul Interfața aplicației noastre. Dacă faceți clic pe numele proiectului, în partea stângă sus și vă dați derulați până la secțiunea Info Deployment, veți vedea cum apare o altă opțiune interfață principală, unde apare numele tabloului nostru de story.
Aceste 2 opțiuni sunt fundamentale pentru ca aplicația dvs. să înceapă corect.
Controller Vizualizare inițială
Am analizat la punctul anterior, care, odată ce am specificat, care va fi principalul nostru storyboard, trebuie să determinăm, de asemenea, care va fi vizualizarea că cererea noastră trebuie să se încarce mai întâi.
Pentru a selecta acest lucru, accesați acest lucru Main.Storyboard, faceți clic pe singurul nostru vizualizator și pe cea de-a patra opțiune a inspectorului de proprietate, veți vedea opțiunea este inițială de vizualizare inițială.
Această opțiune specifică faptul că atunci când storyboard-ul este încărcat, primul ecran care cel mai mult Rárá Aplicația noastră va fi cea selectată ca un controler de vizualizare inițial.
De fapt, dacă vă uitați, veți vedea că la interfața Builder, doar în partea stângă a ecranului de vizualizare apare o săgeată indicând La dreapta. Dacă trageți săgeata acea săgeată și plasați-o spre un alt viewcontroller, acesta din urmă ar deveni controlerul de vizualizare inițial.
ca o concluzie, dacă la un moment dat aveți probleme cu aplicația dvs., pentru că veți vedea că faceți acest lucru nu încărcați storyboardul pe care ar trebui sau pentru că primul ecran care arată nu este cel pe care îl doriți, este convenabil că verificați aceste 3 cele mai recente opțiuni pe care tocmai le-am văzut, deoarece este cel mai probabil că ați modificat oricare dintre ele și Nu-mi amintiți.
Portret / Peisaj
La dezvoltarea unei aplicații, aveți mai multe opțiuni.
Este posibil să doriți ca cererea dvs. să funcționeze singur în portret ( Când dispozitivul este în poziție verticală) sau, de asemenea, în peisaj (când dispozitivul este într-o poziție orizontală).
Aceste opțiuni și mai mult le puteți controla din meniul pe care l-am mai văzut înainte: Informații privind implementarea.
În secțiunea de orientare a dispozitivului puteți vedea ce E Aveți 4 opțiuni pentru a alege.
Dacă executăm aplicația, cu opțiunile pe care le vedeți în imagine, aplicația noastră vă va roti interfața ori de câte ori am folosit iPhone într-o poziție verticală cu butonul de acasă de mai jos și, de asemenea, în poziție orizontală, ambele cu butonul de pornire spre dreapta și spre stânga.
Cu toate acestea, dacă dispozitivul nostru se află într-o poziție verticală cu butonul Acasă, aplicația noastră nu ar fi adaptată la Această poziție, deoarece opțiunea de sus în jos este dezactivată.
Prin urmare, aceasta este ceea ce reprezintă fiecare dintre opțiuni:
- portret: poziție verticală cu butonul de locuit sub
- cu susul în jos: Poziția verticală cu butonul de acasă în sus
- Peisaj stânga: Poziția orizontală cu butonul de pornire spre stânga
- Peisaj dreapta: Poziția orizontală cu butonul Acasă spre dreapta
Când vine vorba de dezvoltarea proiectului dvs., trebuie să luați în considerare toate acestea.
Adăugarea a TableviewController
Implicit, atunci când creăm o aplicație de vizualizare unică, proiectul XCODE creează un vizualizator în storyboard-ul nostru.
Uneori, probabil că doriți să lucrați direct cu un tablouroller.
În aceste cazuri, să se înlocuiască unul pe celălalt, la fel de repede ca urmați acești pași:
- Selectați Vizualizatorul nostru la Main.Storyboard
- Scoateți-l apăsând ștergerea Key
- Adăugați o tablelizareControler din biblioteca obiectelor
- Alegeți această tabletă de vizualizareControler ca controler inițial
Mai jos puteți vedea această secvență de acțiuni:
Dacă executați în prezent aplicația, veți vedea cum vizualizarea inițială este cea a unui tabelView goale.
Adăugarea unui NavigatController
NavigariuController este opțiunea perfectă AT Pentru a adăuga navigarea între ecrane atunci când creăm aplicații multiviste.
Un sistem de navigare trebuie să fie întotdeauna asociat cu un alt controler. Acest controler poate fi de orice tip: ViewController, TableviewController, COLECTIONviewController.
Acest controler asociat cu navigatiacontrolerul devine principal controlerul său principal, adică în rădăcină VizualizăController.
Pentru a adăuga un sistem de navigare la aplicația dvs. puteți urma câțiva pași asemănători cu cele pe care le-am văzut În secțiunea anterioară:
- Selectați tabelul nostruControler la Main.Storyboard
- Șterge-l apăsând tasta DELETE
- Adăugați un NavigatController de la obiect Biblioteca
- Alegeți acest navigațieController ca controler inițial
Aici aveți acești pași pe Video:
Așa cum ați reușit să observați, navigareaControlerul a fost asociat implicit O tableviewController.
Dacă executați în prezent proiectul, veți vedea cum veți vedea cum veți vedea cum Aplicația noastră arată tablealaControler împreună cu o bara de navigare în partea de sus cu titlul de controler de vedere rădăcină, ceea ce indică faptul că aplicația noastră are un Naveiga Tioncontroler Pentru a crea aplicații multiviste.
Cu toate acestea, în cazul în care în navigațiecontrolerele stabilim o navigație ierarhică, de la părinți la copii, în tabbbarcontroler diferitele vizualizări pe care le folosim vor fi la același nivel de navigație.
>
Pentru a adăuga un tabbrcontroler printr-un storyboard, vom urma câțiva pași asemănători cu cele observate în secțiunile anterioare:
- Selectați NavigațiController-ul nostru la Main.Storyboard
- Șterge-l apăsând tasta de ștergere
- Selectați controlerul de navigare Rădăcină Vizualizare
- Scoateți-o, de asemenea, cu tasta DELETE
- Adăugați un tabbrcontroller din biblioteca Obiecte
- Alegeți acest tabbbarcontroller ca un controler inițial de vizualizare
acestea sunt pasul urmate:
Dacă executați aplicația, veți vedea cum ecranul nostru principal este acum un tabbbarcontroller care contează cu 2 Viewcontrollers, identificate ca elementul 1 și elementul 2.
9. Rezumat final
Am făcut o revizuire rapidă a aspectelor fundamentale ale storyboardurilor. Am văzut cum să adăugăm elemente de bază care ne vor permite să creăm interfețe complexe.
Cu toate acestea, nu am tratat unul dintre cele mai importante subiecte ale povestirilor: membrii.
Acest concept îl vom vedea în a doua parte a acestui tutorial. Accesați acum la a doua parte de aici.
10. Ați terminat tutorialul
Ați terminat tutorialul din această săptămână în EFECTPLE. Ca întotdeauna, aici este răsplata ta. Video Chorra în această săptămână:
11. Unde să mergeți acum?
accesează a doua parte a tutorialului pe storyboards, unde vom vedea concepte mai avansate care vor fi foarte utile, de aici,
Puteți accesa mai multe tutoriale Disponibil în EFECTIONAPLE de aici.
Dacă acest articol a părut util, mi-ai face o mare favoare prin împărtășirea în rețelele dvs. sociale.