“Menu Down” creare un menu con animazione

Vogliamo rendere le nostre applicazioni più “simpatiche” ? Possiamo creare delle viste che scompaiono e appaiono con l’azione di qualche bottone e magari questa vista può contenere altri bottoni con diverse funzioni. Iniziamo a creare un progetto base come abbiamo fatto anche nei altri tutorial. Nel file della dichiarazione o nella classe di estensione creiamo 3 variabili d’istanza:
Schermata 25.feb.2013 20.20.16 simulatore iOS

[code lang=”obj-c”]
//Contenitore del Menu
UIView *containerView;
//Menu
UIView *myMenuView;
//Bottone
UIButton*btn;
[/code]

Io preferisco creare gli oggetti tramite codice perche mi permette di vedere e capire come funziona. Quindi andiamo nel file ViewDidLoad e creiamo gli oggetti in questo modo:

[code lang=”obj-c”]
containerView = [[UIView alloc] initWithFrame:CGRectMake(0, -70, self.view.bounds.size.width, 100)];
containerView.backgroundColor = [UIColor clearColor];
[self.view addSubview:containerView];

myMenuView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, containerView.bounds.size.width, 70)];
myMenuView.backgroundColor = [UIColor grayColor];
[containerView addSubview:myMenuView];

btn = [UIButton buttonWithType:UIButtonTypeRoundedRect];
btn.frame = CGRectMake(110, 75, 60, 25);
btn.selected = YES;
[btn setTitle:@"Push" forState:UIControlStateNormal];
[btn addTarget:nil action:@selector(pushButton:) forControlEvents:UIControlEventTouchUpInside];
[containerView addSubview:btn];
[/code]

Come vedete al contenitore gli abbiamo dato una posizione “y” negativo in modo da nascondere solo il myMenuView, invece il bottone da lasciare a vista. Il menu e il bottone lo abbiamo inserito come dei subview del contenitore. A questo punto implementiamo anche il metodo del bottone che abbiamo creato dove creeremo anche l’animazione:

[code lang=”obj-c”]
-(void)pushButton:(UIButton *)button
{
button.selected = !button.isSelected;

if (!button.isSelected) {
[UIView animateWithDuration:0.4 animations:^{
CGRect yContainer = containerView.frame;
yContainer.origin.y = 0;
containerView.frame = yContainer;
}];
}

if (button.isSelected) {
[UIView animateWithDuration:0.4 animations:^{
CGRect yContainer = containerView.frame;
yContainer.origin.y = -70;
containerView.frame = yContainer;
}];
}

}[/code]

Praticamente quando il bottone viene premuto il containerView si sposta verso basso, se viene premuto di nuovo il containerView va al suo stato precedente. In questo esempio vi ho spiegato come creare un menu con animazione, poi resta a voi inserire bottoni, immagini ecc al interno di questo menu. Nel file del progetto avrete qualcosa in più.

download codice sorgente