Introducció als Storyboards [Part 1]

06 Mar Introducció als Storyboards

1. Introducció

Apple va introduir els Storyboards en el llançament de iOS 5.

Fa bastants anys d’això …

No obstant això he rebut 2 correus electrònics de lectors de EfectoApple comentant que han trobat algunes dificultats per seguir els Tutorials perquè no dominen de l’sobretot els Storyboards.

Així que aquesta setmana aquest serà el tema sobre el qual centrarem el nostre tutorial.

Abans de l’llançament de els Storyboards, els Desenvolupadors iOS només teníem l’opció de crear les interfícies de la nostra aplicacions a través de fitxers amb extensió .xib o directament programar a través de codi.

Cada un d’aquests fitxers representava una pantalla de la nostra aplicació.

Aquesta forma de treballar tenia els seus avantatges (En moltes ocasions els .xib segueixen sent millor opció que els storyboards) i per descomptat, també els seus inconvenients.

per tant, a dia d’avui tens tres opcions per crear els teus interfícies:

1. programar-directament a través de codi
2. Utilitzar fitxers .xib
3. Utilitza Storyboards

En el Tutorial d’aquesta setmana, veurem tot el que cal saber per sentir-te còmode utilitzant Storyboards i no tenir cap problema sempre que vulguis crear una nova aplicació iOS.

Avantatges d’utilitzar Storyboards en els teus desenvolupaments

Potser més endavant desenvolupi un Tutorial sobre com crear les interfícies a través de codi o directament utilitzant .xib.

Com que aquesta setmana ens centrarem en els Storyboards, anem a veure alguns dels avantatges que ens ofereixen.

1. Són perfectes per veure el flux de navegació complet d’una aplicació.
2. Et permeten crear una aplicació multivista sense haver d’escriure pràcticament codi.
3. Són molt útils per a desenvolupaments petits-mitjans.

Com qualsevol opció, també tenen desavantatges.

Només comentaré un.

Com que tota la nostra interfície es concentra en un ú nic fitxer, solen generar bastants conflictes que compliquen el desenvolupament en equip d’una aplicació.

No obstant això, en molts equips de desenvolupament són l’opció preferent a l’hora de crear qualsevol interfície, pel que és important que siguis capaç de treballar amb ells.

3. Què veurem en aquest Tutorial sobre Storyboards?

Els punts més importants que veurem són els següents:

1. Avantatges d’utilitzar Storyboards en els teus desenvolupaments
2. Coneixent Interface Builder
3. Què és el Dock?
4. Especificant la Main Interface de la nostra App
5. Seqüència d’arrencada d’una aplicació
6. Com seleccionar el Initial View Controller
7. Configura els modes Portrait i Landscape de la nostra App
8. Com afegir un TableViewController, 1 NavigationController i un TabBarController?

Comencem llavors fent una ullada als fonaments bàsics dels Storyboards.

Creant el nostre projecte en Xcode

Per començar crea un nou projecte en Xcode, accedint a menú File > New > Project … i triï la plantilla Single View Application:

Després prem a Next i dóna-li el no mbre que vulguis. En el meu cas ho diré Storyboards_Demo. Deixa la resta d’opcions, tal qual les veus a la imatge:

Prem a Next, guarda el projecte on vulguis i per finalitzar prem al botó Create.

Després de crear el projecte, Xcode et mostrarà alguna cosa així:

Amb aquest Projecte de Demostració, anirem veient tot el necessari per dominar els Storyboards.

5. Fonaments Bàsics dels Storyboards

Fes click en el fitxer Main.storyboard i vegem alguns conceptes que has de conèixer:

Interface Builder

La pantalla que s’ha obert a l’accedir a l’Main.storyboard és coneguda com Interface Builder i té el següent aspecte:

En les primeres versions d’iOS, Interface Builder era una aplicació independent de Xcode i a l’igual que ara, s’utilitzava per crear les interfícies de les nostres aplicacions.

La part esquerra d’Interface Builder es coneix com Document Outline i ens mostra un llistat de totes les escenes que componen la nostra interfície.

Una escena representa cadascuna de les pantalles de la nostra aplicació

A dins de cada escena es van englobant tots els objectes que anem afegint a la interfície, a més de constraints i altres elements.

Per mostrar o amagar el Document Outline pots utilitzar el següent botó, situat a la part inferior esquerra:

Com veus, en el nostre projecte acabat de crear únicament tenim una pantalla. Està pantalla està representada pel nostre View Controller.

A la part superior dreta de Interface Builder tenim l’inspector de Atributs. A través de les opcions que ens ofereix, podem realitzar modificacions en les propietats de qualsevol objecte que formi part de la nostra interfície.

Dins l’Inspector de Atributs tens 6 menús diferents, on cada un controla un aspecte diferent de qualsevol objecte:

d’altra banda, a la part inferior dreta, disposes de la Biblioteca d’Objectes:

Des d’aquí pots afegir qualsevol element a la interfície de la teva aplicació.

Prova per exemple a arrossegar un Label, 1 Button, 1 TextField i un Slider al teu ViewController:

Si et fixes, a més de afegir-los a la nostra interfície, Xcode els ha afegit a la llista d’elements que apareixen al Document Outline:

Si execució tes l’aplicació, fent cmd + R, veuràs que en el simulador es mostren els elements que hem afegit a la nostra interfície.

Dock

Just a sobre de cada ViewController podràs veure el Dock.

el Dock mostra els objectes d’alt nivell de cada escena. Cada escena tindrà com a mínim un objecte ViewController, un objecte First Respondre i un objecte Exit, però a més pot tenir altres elements. El Dock és simplement un Document Outline en miniatura.

ViewController representa evidentment al nostre únic ViewController.

First Respondre gestiona el focus de la nostra aplicació. El més probable és que pràcticament no el facis servir.

Èxit es pot utilitzar per afegir opcions de navegació a les nostres interfícies.

Main Interface

Abans, a l’executar nostre projecte, l’aplicació que hem creat, ja sabia perfectament quin era el Storyboard que havia de enllaçar a l’executar l’app.

Això no té cap misteri, només tenim un fitxer Main.storyboard, de manera que el normal és que el nostre projecte sàpiga que aquest és el fitxer que conté la nostra interfície.

No obstant això, en algun altre projecte pot ser que utilitzis diversos Storyboards diferents, pel que és important que entenguis, on especifiquem quin és el storyboard principal.

Simplificant molt, qualsevol aplicació iOS, per defecte, comença la seva execució a la classe AppDelegate.swift.

Fes click en aquesta classe i fa una ullada a la part inicial de la mateixa:

l’atribut @UIApplicationMain situat a la part superior determina que la nostra classe AppDelegate és el punt d’entrada de la nostra aplicació.

és obligatori que el nostre AppDelegate hereti de UIResponder i tingui una propietat de tipus UIWindow perquè l’app funcioni.

Si et fixes en els mètodes que apareixen en aquesta classe, estan tots pràcticament buits. Únicament didFinishLaunchingWithOptions () té una mica de codi i l’únic que fa és tornar true.

Un cop revisada la classe inicial de la nostra aplicació, és probable que et segueixis preguntat ¿on fa referència la nostra aplicació a l’Storyboard?

el fitxer Info.plist

Per respondre a això hauràs d’obrir el fitxer Info.plist i localitzar l’entrada Main storyboard file base name.

Quan executem l’app, l’objecte UIApplication carrega el storyboard que estigui especificat en aquesta clau, inicialitza el ViewController que estigui marcat com Initial View Controller (Ara veurem on es fa això) i després col·loca la View d’aquest ViewController en l’objecte UIWindow.

Hi ha un altre punt on hem d’especificar quina és la interfície principal de la nostra aplicació. Si fas clic en el nom d’el projecte, a la part superior esquerra i fas scroll fins a la secció Deployment Informació, veuràs com hi ha una altra opció anomenada Main Interface, on apareix el nom del nostre storyboard.

Aquestes 2 opcions són fonamentals perquè la teva aplicació arrencar correctament.

Initial View Controller

Hem comentat en el punt anterior, que una vegada que hem especificat com serà el nostre storyboard principal, també hem de determinar quin serà el ViewController que la nostra aplicació ha de carregar en primer lloc.

Per seleccionar això, accedeix a Main.storyboard , fes click sobre el nostre únic ViewController i en la quarta opció de l’Inspector de Propietats, veuràs l’opció Is Initial View Controller.

Aquesta opció especifica que quan es carregui l’storyboard, la primera pantalla que most rarà la nostra aplicació serà la que estigui seleccionada com Initial View Controller.

De fet, si et fixes, veuràs que en Interface Builder, just a l’esquerra de l’ViewController apareix una fletxa apuntant cap a la dreta. Si arrossegues aquesta fletxa i la col·loques apuntant a un altre ViewController, aquest últim es convertiria en el Initial View Controller.

Com a conclusió, si en algun moment tens problemes amb la teva aplicació, perquè veus que no carrega l’storyboard que ha o perquè la primera pantalla que mostra no és la que tu vols, és convenient que revisis aquestes 3 últimes opcions que acabem de veure, perquè el més probable és que hagis modificat alguna d’elles i no ho recordis.

Portrait / Landscape

a l’hora de desenvolupar una aplicació, tens diverses opcions.

Pots voler que la teva aplicació s’executi només en Portrait (Quan el dispositiu estigui en posició vertical) o també en Landscape (Quan el dispositiu estigui en posició horitzontal).

Aquestes opcions i alguna més les pots controlar des del menú que hem vist abans: Deployment Info.

A la secció Device Orientation pots veure qu i tens 4 opcions per triar.

Si executéssim l’aplicació, amb les opcions que veus a la imatge, la nostra app giraria la seva interfície sempre que utilitzéssim l’iPhone en posició vertical amb el botó Home baix i també en posició horitzontal, tant amb el botó Home cap a la dreta com a l’esquerra.

no obstant això, si el nostre dispositiu estigués en posició vertical amb el botó Home cap amunt, la nostra aplicació no s’adaptaria a aquesta posició, ja que l’opció Upside Down està desactivada.

Per tant, això és el que representa cadascuna de les opcions:

• Portrait: Posició vertical amb el botó Home baix
• Upside Down: Posició vertical amb el botó Home dalt
• Landscape Left: Posició horitzontal amb el botó Home cap a l’esquerra
• Landscape Right: Posició horitzontal amb el botó Home cap la dreta

a l’hora de desenvolupar el teu projecte, heu de tenir molt en compte tot això.

Afegint un TableViewController

Per defecte, quan vam crear un projecte de tipus Single View Application, Xcode crea 01:00 ViewController al nostre Storyboard.

De vegades, és probable que vulguem treballar directament amb un TableViewController.

en aquests casos, per substituir un per l’altre, el més ràpid és seguir aquests passos:

1. Seleccionar nostre ViewController al Main.storyboard
2. Eliminar- prement la tecla Delete
3. Afegir un TableViewController des de la Biblioteca d’Objectes
4. Escollir aquest TableViewController com Initial View Controller

A continuació pots veure aquesta seqüència d’accions:

Si executes ara l’aplicació, veuràs com la vista inicial que mostra és la d’un TableView buit.

Afegint un NavigationController

Els NavigationController són l’opció perfec ta per afegir navegació entre pantalles quan vam crear aplicacions multivista.

Un NavigationController ha d’anar sempre associat a un altre Controlador. Aquest controlador pot ser de qualsevol tipus: ViewController, TableViewController, CollectionViewController.

Aquest Controlador associat a l’NavigationController es converteix en el seu controlador principal, és a dir, si RootViewController.

Per afegir un NavigationController a la teva aplicació pots seguir uns passos similars als que hem vist en l’apartat anterior:

1. Seleccionar nostre TableViewController al Main.storyboard
2. Eliminar-prement la tecla Delete
3. Afegir un NavigationController des de la Biblioteca d’Objectes
4. Escollir aquest navigationController com Initial View Controller

Aquí tens aquests passos en vídeo:

com has pogut observar, el NavigationController porta associat per defecte un TableViewController.

Si executes ara el projecte, veuràs com la nostra aplicació mostra el TableViewController juntament amb una NavigationBar a la part superior amb el títol Root View Controller, que indica que la nostra app compta amb un Naviga tionController.

Afegint un TabBarController

Els TabBarControllers, a l’igual que els NavigationController ens permeten crear aplicacions multivista.

No obstant això, si en els NavigationControllers establim una navegació jeràrquica, de pares a fills, en els TabBarController els diferents ViewControllers que utilitzem estaran a el mateix nivell de navegació.

Per afegir un TabBarController a través d’un storyboard, seguirem uns passos similars als vists en els anteriors apartats:

1. Seleccionar nostre NavigationController al Main.storyboard
2. eliminar-prement la tecla Delete
3. Selecciona l’Root View Controller de l’Navigation Controller
4. Elimina’l també amb la tecla Delete
5. Afegir un TabBarController des de la Biblioteca d’Objectes
6. Escollir aquest TabBarController com Initial View Controller

Aquests són els pas us seguits:

Si executes l’app veuràs com la nostra pantalla principal és ara un TabBarController que compta al seu torn amb 2 ViewControllers, identificats com Item 1 e Item 2.

9. Resum Final

Hem fet un repàs ràpid als aspectes fonamentals dels Storyboards. Hem vist com afegir elements bàsics que ens permetran crear interfícies complexes.

No obstant això, no hem tractat un dels temes més importants dels Storyboards: Els Segues.

Aquest concepte ho veurem en la Segona part d’aquest tutorial. Accedeix ara a la segona part des d’aquí.

10. Has acabat el Tutorial

Has acabat el tutorial d’aquesta setmana a EfectoApple. Com sempre, aquí tens la teva recompensa. El vídeo chorra d’aquesta setmana:

https://www.youtube.com/watch?v=1O3cVHw-xFA

11. On anar ara?

Accedeix a la Segona Part de l’Tutorial sobre Storyboards, on veurem conceptes més avançats que et seran molt útils, des d’aquí.

Pots accedir a més tutorials disponibles en EfectoApple des d’aquí.

Si aquest article et sembla útil, em faries un gran favor compartint a les xarxes socials.