轻按时，iOS Animate表格视图单元会变为全屏

Question

I would like to implement the same type of functionality as this application: https://itunes.apple.com/us/app/fancy-units/id850306139?mt=8

When a user selects a table view cell, the cell animates to fill the entire screen and reveals a new view while animating.

I have been trying to find information on how to do this but can't quite seem to find any good resources.

How can I accomplish this? Even just an idea of what to properly google search will be extremely helpful!

Answer 1

I don't know how Fancy Units does it, but I was able to replicate their look with this example. The initial view controller (TableController) is a UIViewController subclass with a table view that displays basic cells. I have another controller in the storyboard, ViewController that has a single table view cell (not inside a table view) pinned to the top of its view (constraints to the sides and top, and a height constraint of 44). I add this controller as a child, and add it's view over top the cell you click on, and give it the cell's frame, background color, and text in the text label, then animate it to the full screen. I have a delegate protocol defined in ViewController that's called when you click on the collapse button in the cell. The protocol's single method, expandedCellWillCollapse, is implemented in TableController to animate the controller back down. Here's the code,

#import "TableController.h"
#import "ViewController.h"

@interface TableController ()
@property (strong,nonatomic) NSArray *theData;
@property (weak,nonatomic) IBOutlet UITableView *tableView;
@property (strong,nonatomic) ViewController *expander;
@property (nonatomic) CGRect chosenCellFrame;
@end

@implementation TableController 


- (void)viewDidLoad {
    [super viewDidLoad];
    self.theData = @[@"One",@"Two",@"Three",@"Four",@"Five",@"Six",@"Seven",@"Eight",@"Nine",@"Black",@"Brown",@"Red",@"Orange",@"Yellow",@"Green",@"Blue"];
}


- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
    return self.theData.count;
}

-(void)tableView:(UITableView *)tableView willDisplayCell:(UITableViewCell *)cell forRowAtIndexPath:(NSIndexPath *)indexPath {
    cell.textLabel.backgroundColor = [UIColor clearColor];
    cell.contentView.backgroundColor = [UIColor colorWithHue:.1 + .07*indexPath.row saturation:1 brightness:1 alpha:1];
}

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {

    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:@"Cell" forIndexPath:indexPath];
    cell.textLabel.text = self.theData[indexPath.row];
    return cell;
}



- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath{
    if (! self.expander) {
        self.expander = [self.storyboard instantiateViewControllerWithIdentifier:@"Expander"];
        self.expander.delegate = self;
    }
    [self addChildViewController:self.expander];
    self.expander.view.frame = [self.tableView rectForRowAtIndexPath:indexPath];
    self.expander.view.center = CGPointMake(self.expander.view.center.x, self.expander.view.center.y - self.tableView.contentOffset.y); // adjusts for the offset of the cell when you select it
    self.chosenCellFrame = self.expander.view.frame;
    self.expander.view.backgroundColor = [UIColor colorWithHue:.1 + .07*indexPath.row saturation:1 brightness:1 alpha:1];
    UILabel *label = (UILabel *)[self.expander.cell viewWithTag:1];
    label.text = self.theData[indexPath.row];
    [self.view addSubview:self.expander.view];
    [UIView animateWithDuration:.5 animations:^{
        self.expander.view.frame = self.tableView.frame;
        self.expander.collapseButton.alpha = 1;
    } completion:^(BOOL finished) {
        [self.expander didMoveToParentViewController:self];
    }];
}


-(void)expandedCellWillCollapse { // delegate method called from the collapse button in the expanded cell
    [self.expander willMoveToParentViewController:nil];
    [UIView animateWithDuration:.5 animations:^{
        self.expander.view.frame = self.chosenCellFrame;
        self.expander.collapseButton.alpha = 0;
    } completion:^(BOOL finished) {
        [self.expander.view removeFromSuperview];
        [self.expander removeFromParentViewController];
    }];
}

This isn't intended to be a compete solution, but it should get you started. I've uploaded this project here (edited 12/04/14 to make it work for iOS 8), http://jmp.sh/VKeIJLW .