my365みたいな、タップするとアニメーションで高さを伸ばすTableViewを作ってみた

my365のあれってどうやってんのかなーと思って、手探り半分だけど作ってみた。

hファイルはこんな感じ

@interface tappedSizeChangeViewController : UITableViewController{
    NSMutableArray *openFlagArray_;
}
@end

中のアイテムが、開いているかたたまれているかを管理するためのArrayです。

mファイルはこんな感じ

#define tableCount 10

@interface tappedSizeChangeViewController ()

@end

@implementation tappedSizeChangeViewController


- (void)dealloc{
    [openFlagArray_ release];
    
    [super dealloc];
}


- (id)initWithStyle:(UITableViewStyle)style
{
    self = [super initWithStyle:style];
    if (self) {
        // Custom initialization
    }
    return self;
}

- (void)viewDidLoad
{
    [super viewDidLoad];
    
    self.tableView.allowsSelection = NO;
    self.tableView.separatorStyle = UITableViewCellSeparatorStyleNone;

    openFlagArray_ = [[NSMutableArray alloc] init];
    
    
    for (int i = 0; i < tableCount; ++i) {
        [openFlagArray_ addObject:@"0"];
    }
    
    // Uncomment the following line to preserve selection between presentations.
    // self.clearsSelectionOnViewWillAppear = NO;
 
    // Uncomment the following line to display an Edit button in the navigation bar for this view controller.
    // self.navigationItem.rightBarButtonItem = self.editButtonItem;
}

- (void)viewDidUnload
{
    [super viewDidUnload];
    // Release any retained subviews of the main view.
    // e.g. self.myOutlet = nil;
}

- (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation
{
    return (interfaceOrientation == UIInterfaceOrientationPortrait);
}

#pragma mark - Table view data source

- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView
{
    // Return the number of sections.
    return 1;
}

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
    // Return the number of rows in the section.
    return tableCount;
}

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    NSString *CellIdentifier = [NSString stringWithFormat:@"cel_%d",indexPath.row];
    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];
    
    
    UIButton *mainImage; //コレが開かれたりたたまれたりする
    
    if (cell == nil) {
        cell = [[[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:CellIdentifier] autorelease];
        
        mainImage = [UIButton buttonWithType:UIButtonTypeRoundedRect];
        
        if ([[openFlagArray_ objectAtIndex:indexPath.row] boolValue]) {
            mainImage.frame = CGRectMake(10, 10, 300, 300);
        }else{
            mainImage.frame = CGRectMake(10, 10, 300, 50);
        }
        
        mainImage.tag = 101;
        [mainImage addTarget:self action:@selector(mainImageAction:) forControlEvents:UIControlEventTouchUpInside];
        
        [cell.contentView addSubview:mainImage];
        
        
    }else{
        mainImage = (UIButton *)[cell.contentView viewWithTag:101];
        
    }
    
    return cell;
}

- (float)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath{
    
    if ([[openFlagArray_ objectAtIndex:indexPath.row] boolValue]) {
        return 320;
    }else{
        return 70;
    }
}

- (void)mainImageAction:(id)sender{
    UIButton *btn = (UIButton *)sender;
    
    UITableViewCell *cell = (UITableViewCell *)[[btn superview] superview];
    int row = [self.tableView indexPathForCell:cell].row;
    NSLog(@"indexpath?:%d",row);
    
    
    float height = btn.frame.size.height;
    
    if (height == 50) {
        [UIView animateWithDuration:0.1 animations:^{
            btn.frame = CGRectMake(10, 10, 300, 300);
        }];
        
        [openFlagArray_ replaceObjectAtIndex:row withObject:@"1"];
        
    }else{
        [UIView animateWithDuration:0.1 animations:^{
            btn.frame = CGRectMake(10, 10, 300, 50);
        }];
        [openFlagArray_ replaceObjectAtIndex:row withObject:@"0"];
    }
    
    [self performSelector:@selector(realodTableData) withObject:nil afterDelay:0.1];
}

- (void)realodTableData{
    [self.tableView reloadData];
}

#pragma mark - Table view delegate

- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath
{
    //使ってない
}

@end

結果（わかりにくいかも）

思ってたのとちょっと違った点は、TableView自体のセルのサイズ変更って、reloadData時に行うわけだけど、それではアニメーションがうまくいかない感じになっちゃう。
なのでまず、中のButtonをアニメーションで動かして、そのあとにdelayでreloadDataする感じで見た目はなんとなくいけた。

delayせずにreloadDataすると、なかのButtonがアニメーションする前にリロードしちゃってアニメーションが機能しなくなっちゃう。

あと、それぞれのCellIdentiferもセルごとに変更。再利用しない形にした。
そうしないと、ボタンのサイズ変更したあとにスクロールすると動作がおかしくなった。

cellfForRow〜　でframeにifしてるのは、予め大きくしたりする事が起きるかも？ということでやってみた。しないならいらないかな？

思いつきだけど、そこそこ満足の行く結果が得られた。