Question

我想实现与此应用程序相同类型的功能：https://itunes.apple.com/us/app/fancy-units/id850306139?mt=8

当用户选择表格视图单元格时，单元格会动画以填充整个屏幕并在动画时显示新视图。

我一直在努力寻找有关如何做到这一点的信息，但似乎找不到任何好的资源。

我怎样才能做到这一点？即使只是想要正确谷歌搜索什么将是非常有帮助的！

Answer 1

我不知道Fancy Units是如何做到的，但我能够通过这个例子复制他们的外观。初始视图控制器（TableController）是一个UIViewController子类，其表视图显示基本单元格。我在故事板中有另一个控制器，ViewController有一个固定在视图顶部的单个表视图单元（不在表视图中）（对边和顶部的约束，以及44的高度约束）。我将此控制器添加为子项，并将其视图添加到您单击的单元格顶部，并在文本标签中为其指定单元格的框架，背景颜色和文本，然后将其设置为全屏幕。我在ViewController中定义了一个委托协议，当你单击单元格中的折叠按钮时，它会被调用。协议的单个方法expandedCellWillCollapse在TableController中实现，以向后调用控制器的动画。这是代码，

#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];
    }];
}

这不是一个竞争的解决方案，但它应该让你开始。我在这里上传了这个项目（2014年4月12日编辑，使其适用于iOS 8），http://jmp.sh/VKeIJLW。

iOS点击时将表格视图单元格设置为全屏幕

1 个答案: