T#063 – Inseriamo una navigation bar sulla tastiera stile safari

Ciao ragazzi, un po’ di tempo fa vi ho fatto vedere come inserire il tasto “done” sulla tastiera numerica, oggi, invece, vedremo come inserire una NavigationBar stile “Safari” sulla nostra tastiera.

Iniziamo naturalmente con un nuovo progetto di tipo view-based e chiamiamolo “KeyTab”. Bene, apriamo il KeyTabViewController.xib e inseriamo un campo di testo.

Passiamo quindi al file di interfaccia KeyTabViewController.h e inseriamo un IBOutlet UITextField :

1
2
3
4

@interface keyTab2ViewController : UIViewController <UITextFieldDelegate> {
    IBOutlet UITextField * txt;
}
@end

Aggiungiamo anche il delegato del textField. Torniamo al nostro file .xib e colleghiamo il File’s Owner con il campo di testo, e il delegato con il campo di testo. (clicchiamo sul file’s owner tenendo premuto control e colleghiamo le parti).

Passiamo ora all’implementazione dei metodi. Nel viewDidLoad inseriamo la notifica di quando compare la tastiera:

1
2
3
4
5
6
7
8

- (void)viewDidLoad
{
    [super viewDidLoad];
 
	[[NSNotificationCenter defaultCenter] addObserver:self
		selector:@selector(keyboardWasShown:)
		name:UIKeyboardDidShowNotification object:nil];
}

Notate che questa volta non abbiamo fatto alcuna differenza per iOS 4 o precedenti, in quanto il procedimento è lo stesso del precedente tutorial.

Bene, ora aggiungiamo il metodo per far tornare la tastiera:

1
2
3
4
5
6

-(BOOL)textFieldShouldReturn:(UITextField *)textField
{
	[textField resignFirstResponder];
 
	return YES;
}

Passiamo ora al vero e proprio pezzo fondamentale, l’inserimento della barra:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

- (void)keyboardWasShown:(NSNotification*)aNotification
{
	NSDictionary *info = [aNotification userInfo];
    NSValue *keyBounds = [info objectForKey:UIKeyboardBoundsUserInfoKey];
 
    CGRect bndKey;
    [keyBounds getValue:&bndKey];
 
	UIToolbar *toolbar = [[UIToolbar alloc] initWithFrame:CGRectMake(0, -40, bndKey.size.width, 40)];
	//[toolbar setTranslucent:YES];
	UIColor * black = [[UIColor alloc] initWithRed:0 green:0 blue:0 alpha:1.0];
	[toolbar setTintColor:black];
	UIBarButtonItem *barButtonItem = [[UIBarButtonItem alloc] initWithTitle:@"Bottone 1" style:UIBarButtonItemStyleBordered target:self action:@selector(buttonClicked:)];
	NSArray *items = [[NSArray alloc] initWithObjects:barButtonItem, nil];
	[toolbar setItems:items];
	[items release];
 
	UIWindow* tempWindow = [[[UIApplication sharedApplication] windows] objectAtIndex:1];
	UIView* keyboard;
	for(int i = 0; i < [tempWindow.subviews count]; i++)
	{
		//Get a reference of the current view
		keyboard = [tempWindow.subviews objectAtIndex:i];
 
		//Check to see if the description of the view we have referenced is "UIKeyboard" if so then we found
		//the keyboard view that we were looking for
		if([[keyboard description] hasPrefix:@"<UIPeripheralHost"] == YES)
		{
			[keyboard addSubview:toolbar];
		}
	}
 
}

Alla riga 7 creiamo la nostra UIToolBar, le dimensioni sono state calcolate perfettamente, gli diamo un colore (in questo caso nero). Creiamo poi un bottone, ne possiamo inserire quanti ne vogliamo, e gli diamo come azione il metodo buttonClicked. Nelle prossime due righe non facciamo altro che creare un array, inserirci dentro il bottone e aggiungere il contenuto dell’array nella barra. In questo caso i bottoni (se ne create più di uno) vi verranno messi tutti in fila, partendo da sinistra. altrimenti potete creare dei bottoni tramite delle viste personalizzate e allora li potete posizionare ovunque.

La parte che segue poi è sempre la stessa, andiamo alla ricerca della vista della tastiera, una volta trovata gli aggiungiamo la barra.

L’ultima cosa che ci resta da fare è quella di creare il metodo che viene chiamato quando clicchiamo sul bottone:

1
2
3
4
5
6

- (void)buttonClicked:(NSNotification *)note
{
	UIAlertView *alert = [[UIAlertView alloc] initWithTitle:@"CLICK!!!" message:@"Hai cliccato il bottone sulla tastiera!!" delegate:self cancelButtonTitle:@"OK" otherButtonTitles:nil];
	[alert show];
	[alert release];
}

Ecco qui, quando si clicca su bottone compare un alertView. Spero che i miei brevi tutorial vi siano utili, se volete potete scaricare il progetto da qui:

Eccovi uno screenshot del tutorial in esecuzione: