抽頭

Question

時的iOS動畫表視圖細胞成全屏我想實現作爲本申請的相同類型的功能性：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]; 
    }]; 
} 

這不是一個競爭的解決方案，但它應該讓你開始。我已經在這裏上傳了這個項目（編輯12/04/14使它適用於iOS 8），http://jmp.sh/VKeIJLW。