Ciao a tutti, mi chiamo Andrea Cappellotto e sono da poco entrato nel Team di devAPP come collaboratore. Ho ventuno anni e studio Scienze Informatiche a Trento. Naturalmente come tutti voi ho sempre seguito devAPP e devo dire che mi ha dato una grande mano nei miei progetti. Sviluppo per iPhone da qualche mese, e attualmente (per mia fortuna) è diventato anche un lavoro. Ma non perdiamoci troppo in chiacchiere inutili!! Ecco il mio primo tutorial!!

Una limitazione che ho riscontrato fin da subito nello sviluppo di applicazioni mobile è lo spazio a disposizione sul display per inserire oggetti… Soprattutto quando abbiamo bisogno magari di 5-6 campi di testo in un’unica vista e non abbiamo spazio a sufficienza perchè la tastiera, ad esempio, ci occupa molto posto, e cosi cercando in rete tra forum e siti ho trovato questo tutorial.

L’idea è semplicissima, creiamo una vista in cui inseriremo una ScrollView e poi, al suo interno, tutti i nostri campi di testo. Se il campo di testo è già visibile, allora non scrolleremo la vista, altrimenti, quando cliccheremo su di un campo, faremo in modo che questo si metta automaticamente in un’area visibile.

Creiamo il progetto Xcode

Partiamo creando un nuovo progetto “View-based Application” e assegniamogli un nome a piacimento (ad esempio “scrollView”).

Per comodità andremo a lavorare sui file “scrollViewViewController”, niente ci impone di utilizzare solo questi, potremmo applicare questo metodo a qualsiasi altra vista.

Partiamo dal file di intestazione “scrollViewViewController.h”. Prima di tutto settiamo i delegati, abbiamo bisogno sia dello UIScrollViewDelegate che dell’ UITextFieldDelegate. Creiamo quindi tre campi di testo e un’UIScrollView asseggnando a tutti e 4 il relativo IBOutlet, inseriamo infine un’ UITextField che servirà per determinare in quale campo di testo l’utente sta scrivendo e una variabile booleana per decidere se quel campo di testo è da spostare o meno.

Ecco come si presenta il nostro file .h modificato:

Salviamo e passiamo ad inserire gli oggetti nell’interfaccia grafica.

Creiamo l’interfaccia grafica

Apriamo il file “ScrollViewViewController.xib” tramite semplice doppio click e si aprirà Interface Builder. Sull’ispector sarà presente una View, cancelliamola e inseriamo al suo posto una Scrollview che possiamo prelevare dalla libreria degli oggetti disponibili. Inseriamo ora tre TextField: due nella parte superiore della vista e una in quella inferiore. Dovremmo ottenere qualcosa di simile a quanto mostrato qui in basso:

A questo punto non ci resta che collegare i textField e la scrollView con gli oggetti dichiarati precedentemente via Xcode. Sulla finestra Ispector premete ctrl e tenendolo premuto cliccate sul File’s Owner, si aprirà una finestra. Cliccate sul pallino sulla destra di ogni oggetto e tenendo cliccato collegate la freccia con il rispettivo dell’interfaccia utente appena disegnato. Ripetete questa operazione per tutti i campi di testo e la scrollView. Collegate anche view alla scrollView disegnata prima. Collegate infine il delegate con i campi di testo e la scrollView. Ecco come dovrebbe essere il risultato finale:

Anche questa parte è finita, passiamo ora al file di implementazione .m

Implementiamo i nostri metodi

Decommentiamo il metodo “viewDidLoad” e inseriamo 2 notifiche. Le notifiche servono per eseguire un metodo quando si verifica un determinato evento, in questo caso quando la tastiera compare e scompare. Su selector indichiamo il metodo da eseguire, su nome indichiamo quale evento si vuole notificare, mentre su object a quale oggetto vogliamo applicare tale notifica. In questo caso la notifica va applicata a qualsiasi cosa e per questo object è impostato a nil.

Il primo metodo che andiamo a vedere è textFieldDidBeginEditing:.

Questo metodo ci fornisce il TextField in cui l’utente ha cliccato. Noi non facciamo altro che impostare l’ActiveField uguale a questo campo, in modo da poter sapere di quanto spostare la scrollView.

Passiamo ora ad esaminare i prossimi due metodi, keyboardWasShown: e keyboardWasHidden:

Questi metodi si occuperanno di far traslare la nostra scrollView per rendere il campo automaticamente visibile.

Su keyboardWasShown: la prima cosa che andiamo a controllare è se il campo ActiveField (campo in cui l’utente ha cliccato) è uguale al primo o al secondo campo di testo, e in questo caso non facciamo altro che settare la variabile booleana a false, in modo che quando la tastiera scomparirà non dovremmo rispostare la vista.

Se il nostro campo di testo è il terzo allora entriamo nella condizione else e qui prendiamo le dimensioni della tastiera, e settiamo di quanto spostare  la vista. In questo caso il valore 120 è la distanza dal campo di testo al punto 0 della vista. Queste sei righe sono sempre valide, e scusate se non le spiego una ad una, ma mi dilungherei troppo.

keyboardWasHidden: non fa altro che risettare lo spostamento della vista ai valori originali sempre se il metodo precendete ha spostato la vista e quindi keyboardShown è vero.

L’ultima cosa da fare è quella di impostare il ritorno della tastiera quando si clicca su return, per farlo basta aggiungere il metodo textFieldShouldReturn: che non fa altro che rimuovere la tastiera al campo di testo attivo.

Spero che questo piccolo tutorial vi sia stato utile.

Ciao Ragazzi e se avete dubbi non esitate a scrivere!!

Buon Lavoro
Andrea