Resize views on click with animation

Question

I'm trying to make a user interface that animates when I click on it.

This is my sketch:

It starts with the mapview as small as on the left sketch. The rest is filled with a tableview. Now when I click on the map view it slides to the bottom like on the right sketch so the mapview fills the most off the screen. Ans visa versa when I click on the small Tableview.

How can I achieve this?

I thought off creating a View and then add mapview and tableview as subviews, but then I don't know how to animate that. Did some real simple animations until now.

Can someone point me in the right direction?

Answer 1

  NSNumber isMapExpanded = 0;

  - (void) expandMap 
    {
       [UIView animateWithDuration:1.0
                             delay:0.2
                           options:nil
                        animations:^{
                                 if([isMapExtended integerValue] == 0)
                                 {
                                     mapview.frame = CGRectMake(mapview.frame.origin.x, mapview.frame.origin.y, mapview.frame.size.width, mapview.frame.size.height + heightTobeExpanded);
                                     tableView.frame = CGrectMake(tableView.frame.origin.x, tableView.frame.origin.y - heightTobeExpanded, tableView.frame.size.width, tableView.frame.size.height + heightTobeExpanded);
                                 }  
                                 else if([isMapExtended integerValue] == 1)
                                 {
                                     mapview.frame = CGRectMake(mapview.frame.origin.x, mapview.frame.origin.y, mapview.frame.size.width, mapview.frame.size.height - heightTobeExpanded);
                                     tableView.frame = CGrectMake(tableView.frame.origin.x, tableView.frame.origin.y + heightTobeExpanded, tableView.frame.size.width, tableView.frame.size.height - heightTobeExpanded);
                                 }     
                           }
             completion:nil];
  }