Un ringraziamento a brandontreb di iCodeBlog per questa utile e completa guida sull’UITextField. L’UITextField è probabilmente uno degli oggetti più utilizzati nelle interfacce grafiche delle applicazioni iPhone, che permette all’untente di interagire con l’applicazione inviando dati al programma tramite la tastiera. Questo strumento offre inoltre un gran numero di altre funzionalità aggiuntive.
Text Attributes
Gli attributi di testo si riferiscono proprio al testo contenuto all’intenro dell’UITextField.
text | Il testo mostrato nell’UITextField |
placeholder | Il testo che viene visualizzato prima che l’utente sciva qualcosa. Questo testo è in genere di un colore più chiaro rispetto al testo principale per indicare che sarà sostituito. |
font | Il font del testo che deve essere mostrato. |
textColor | Il colore del testo mostrato |
textAlignment | Come il testo è allineato all’interno dell’ UITextField. I valori possibili per questo attributo sono UITextAlignmentLeft, UITextAlignmentRight, UITextAlignmentCenter |
Qui in basso alcuni esempi dell’uso di queste proprietà:
// Impostare il testo
[myTextField setText:@"This is some text!"];
// Impostare il placeholder
[myTextField setPlaceholder:@"Type text here"];
// Settare il font.
[myTextField setFont:[UIFont fontWithName:@"Times New Roman" size:14]];
// Settare il colore del testo
[myTextField setTextColor:[UIColor blueColor]];
// Settare l'allineamento del testo
[myTextField setTextAlignment:UITextAlignmentCenter];
Regolare la dimensione del testo in un UITextField
Il testo mostrato nel nostro UITextField può essere dinamicamente ridimensionato in base alla larghezza dell’ UITextField. I vantaggi di ciò sta nel fatto che tutto il testo digitato risulterà visibile. Le dimensioni del testo si ridurranno fino al raggiungimento della dimensione di default del font (17). Quindi, perchè tutto questo funzioni, è necessario impostare le dimensioni dei caratteri del nostro UITextField ad un valore più grande di 17.
adjustsFontSizeToFitWidth | Valore booleano che indica se adattare o meno la dimensione del carattere alla larghezza dell’ UITextField. |
Ecco un esempio dell’uso di questa proprietà:
[myTextField setFont:[UIFont fontWithName:@"Times New Roman" size:30]];
[myTextField setAdjustsFontSizeToFitWidth:YES];
Gestire i comportamenti delle funzioni di editing
Queste due proprietà sono molto semplici e intuitive:
editing | Valore booleano di sola lettura che permette di sapere se l’utente sta effettuando modifiche nell’UITextField |
clearsOnBeginEditing | Cancella il testo contenuto nel campo ogni qualvolta l’utente inizia a scrivere qualcosa al suo interno |
Impostazioni dell’aspetto grafico
Questo gruppo di proprietà definisce come l’UITextField apparirà nel nostro programma. Se avete mai visto una finestra di input graficamente personalizzata, sono queste le proprietà su cui dovrete lavorare per ottenere anche voi risultati simili.
borderStyle | Definisce il tipo di bordo per l’UITextField. Tra le possibili scelte abbiamo UITextBorderStyleNone, UITextBorderStyleLine, UITextBorderStyleBezel e UITextBorderStyleRoundedRect. Il valore di default è UITextBorderStyleNone. |
background | Un’ UIImage che rappresenta l’immagine di sfondo del nostro UITextField (quando è attivata). Se questa proprietà viene alterata la proprietà BorderStyle verrà ignorata. |
backgroundDisabled | Un’ UIImage che rappresenta l’immagine di sfondo del nostro UITextField (quando è disattivata). |
Ecco alcuni esempi dell’uso di queste proprietà:
// Border Style None
[myTextField setBorderStyle:UITextBorderStyleNone];
// Border Style Line
[myTextField setBorderStyle:UITextBorderStyleLine];
// Border Style Bezel
[myTextField setBorderStyle:UITextBorderStyleBezel];
// Border Style Rounded Rect
[myTextField setBorderStyle:UITextBorderStyleRoundedRect];
Lo stile del bordo forse non è il massimo graficamente. Tuttavia, potrete personalizzare come meglio credete il vostro UITextFields utilizzando la proprietà background. Ecco un esempio di impostazione della proprietà di sfondo utilizzando l’immagine qui a sinistra.
myTextField.textAlignment = UITextAlignmentCenter;
myTextField.textColor = [UIColor whiteColor];
myTextField.borderStyle = UITextBorderStyleNone;
myTextField.background = [UIImage imageNamed:@"bg.png"];
Ed ecco il risultato ottenuto (qui a sinistra). Non vi sembra graficamente migliore? Unica accortezza, affinchè la proprietà background lavori correttamente, è che dovrete settare boderStyle con un qualsiasi valore differente a UITextBorderStyleRoundedRect. In caso contrario, verrà mostrato l’UITextField di default.
Gestire la sovrapposizione di viste
Un altro modo interessante per personalizzare il vostro UITextField è quello di usare un “overlay”, ovvero una View sovrapposta (a sinistra o a destra). Ecco le proprietà:
clearButtonMode | La X cerchiata che viene mostrata durante la digitazione di un testo. Viene usata per cancellare, se premuta, il testo inserito. Possibili valori: UITextFieldViewModeNever, UITextFieldViewModeWhileEditing, UITextFieldViewModeUnlessEditing, UITextFieldViewModeAlways |
leftView | La vista che appare a sinistra all’interno di un UITextField. Ad esempio potrebbe essere qualcosa di simile alla lente d’ingrandimento per la ricerca. |
leftViewMode | Lavora come clearButtonMode, ma con la leftView. |
rightView | Come la leftView, con la sola differenza che è allineata a destra. |
rightViewMode | Come leftViewMode ma controlla la rightView |
Ecco un’esempio che mostra come lavora leftView:
UIImageView * myView = [[ UIImageView alloc ] initWithImage :[UIImage imageNamed : @"wordpress.png" ]];
[myTextField setLeftView :myView];
[ myTextField setLeftViewMode: UITextFieldViewModeAlways];
[myView release ];
Come potete vedere, il testo è allineato dopo l’immagine. Questo è un modo molto semplice per rendere più accattivanti i vostri UITextField.
L’ultima funzionalità che vi illustriamo mostra come visualizzare o nascondere la tastiera.
Visualizzare o nascondere la tastiera
Per visualizzare la tastiera:
[myTextField becomeFirstResponder];
Per nasconderla:
[myTextField resignFirstResponder];
La guida termina qui, vedremo pian piano come funzionano tutti gli altri oggetti del framework UIKit.
Un ringraziamento a iCodeBlog per averci permesso di tradurre per i nostri utenti questa utilissima guida.
Alla prossima 🙂
7 Responses to “UITextField – Guida completa all’uso (by iCodeBlog)”
25 Febbraio 2010
Il ProfetaRAGAZZI SIETE FANTASTICI!!!! Ottima guida!!! Completa ed esauriente!!! Ottimo lavoro bravi! Un saluto!
26 Febbraio 2010
ElenaComplimenti ragazzi, mi serviva proprio…
6 Ottobre 2010
SimmeseOttima guida all’uso dell’UITextField, ma manca tutta la parte su inputView e inputAccessoryView, fondamentale se non si fornisce l’input dalla keyboard ma da un picker o datePicker. Input AccessoryView si rivela essenziale qualora si voglia mostrare una view sopra alla keyboard o al picker, che sarà automaticamente animata con la keyboard o il picker stesso.
13 Ottobre 2010
Gappasi potrebbe ingrandire il textfield in altezza? come?
20 Ottobre 2010
LodecesaPerchè non la scrivi tu quella parte e gliela mandi? magari la pubblicano. A me interesserebbe l’argomento. Che ne pensi?
25 Luglio 2011
Salgrazie, grazie, grazie e ancora grazie!
per favore continuate.
28 Aprile 2012
DanieleOttima guida,grazie! Come si fa a impostare l’uitextfield in modo che si possano scrivere solo numeri? E per poterci scrivere una determinata quantitá di cifre?