A questo punto della guida sospendiamo un attimo gli esempi pratici scritti in Objective C, per introdurre un altro utilissimo strumento che ci viene offerto: ovvero Interface Builder.
Come abbiamo detto all’inizio di questa guida, Interface Builder è un ottimo tool per creare rapidamente delle interfacce grafiche. Nel capitolo precedente abbiamo mostrato come il sistema di riferimento cambi a seconda della view in cui ci troviamo e ciò implica che, per disegnare interfacce complesse via codice perderemo un bel po’ di tempo per sistemare i vari elementi che ne compongono il design. Interface Builder rende questo processo molto più semplice e rapido. Andiamo dunque ad aprire Interface Builder.
Come in Xcode, anche qui è possibile scegliere alcuni template di partenza che andremo a spiegare brevemente di seguito (template relativi ovviamente alla sezione iOS):
- Application: crea un documento che possiamo utilizzare per disegnare la nostra interfaccia; questo documento include già un elemento window.
- View: crea un documento che possiede una view di partenza.
- Window: crea un documento che possiede una window di partenza.
- Empty: crea un documento vuoto.
Fatta questa rapida introduzione andiamo a riaprire il nostro progetto in Xcode creato nei capitolo precedententi e nel menù di sinistra del progetto esploriamo la cartella Interface Builder file (solitamente si trova in ultima posizione). Come possiamo vedere, sono presenti due file: uno relativo alla window principale ed un altro relativo alla view del ViewController. Facciamo doppio click su quest’ultimo file e aspettiamo che Interface Builder venga aperto; una volta aperto appariranno alcune finestre che, forse, rendono difficile orientarsi soprattutto le prime volte che si utlizza l’applicazione. Per questo motivo andremo a spiegare rapidamente il contenuto delle finestre:
- Lybrary Window : rappresenta quella finistra nella quale sono contenuti tutti gli elementi grafici raccolti per tiplogie (saranno quindi presenti label, bottoni, view, tab bar e molto altro). Solitamente questa finestra si trova a sinistra dello schermo. Per inserire un nuovo elemento nel nostro documento sarà sufficiente fare un drag and drop dell’elemento nella nostra view.
- Document Window: in questa finestra vengono elencati gli elementi presenti nella nostra interfaccia grafica; continene anche un utilissimo strumento, il File’s Owner che utilizzeremo più avanti nella trattazione di Interface Builder
- Inspector Window: da questa finestra è possibile eseguire moltissimi settaggi dell’oggetto grafico che abbiamo selezionato nella Document Window; l’Inspector Window possiede un menù (posizionato in alto) dal quale è possibile accedere agli attributi, alle connessioni (approfondiremo più avanti questa sezione) e alle dimensioni dell’oggetto in esame.
Quello che andremo a fare nei prosimi capitoli sarà creare un’interfaccia grafica con Interface Builder e poi andare a collegare gli elementi grafici creati con il codice sorgente scritto in Xcode. Ciò è necessario in quanto Interface Builder non gestisce, ad esempio, il touch dell’utente sullo schermo e quindi è necessario delegare queste interazioni (tra utente e sistema) al codice. Per poter collegare elementi grafici in Interface Builder con il codice sorgente è importante dichiarare ogni elemento grafico utilizzando la parola chiave IBOutlet prima del tipo dell’attributo. Facciamo un esempio:
IBOutlet UIView *view;