テーブルセルを開いたり閉じたりするUIを作る

iOS7のカレンダーは、Eventを入力するとき開始時間等Cellをタップすると、Cellがパカっと開くようになっている。あんな感じのUIを作る方法をご紹介。ストーリーボードとちょっとしたコードだけで簡単に実装できますよ。

##ストーリボードの事前準備
1.TableViewControllerをストーリーボードに貼り、スタティックなCellのモードにする。
2.任意Cellをオブジェクトブラウザから貼り付けたものに変えることで（ContentView付き）中に色々な部品（Pickerとか）を貼れるようになる。
3.Cellに貼った中身はHiddenにしておき、コードによって開いた時だけ表示するように変更する。

##コードを書く
CellにはIDかTagをつけるかして、個別にCellを認識できるようにするか、スタティックなCellの順番で固定的に動作するようなコードを追加。
tableView:didSelectedIndexPath:内でcellForRowAtIndexPath:でテーブルセルを引っ張ってくるようなコードは気をつけたほうがいいかも。
cellを基本にしてあまり変な加工すると落ちる。インデックスパスで扱ってるうちは軽いのだが…

##コードサンプル
以下のサンプルは、ストーリーボードに３つのスタティックセルと、アウトレット接続したピッカービューがあると動作する。

source.m

#define OPEN_CELL_PATH  1
#define END_INDEX_PATH  2
#define COLUMNS_HEIGHT_NORMAL 50
#define COLUMNS_HEIGHT_OPENED COLUMNS_HEIGHT_NORMAL + COLUMNS_HEIGHT_OPEN_MARGIN
#define COLUMNS_HEIGHT_OPEN_MARGIN  192

@interface TATableViewController ()
<UITableViewDelegate>
{
    BOOL _rowOpenPath;
}
@property (weak, nonatomic) IBOutlet UIPickerView *rangePickerView;
@end

@implementation TATableViewController


- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView
{
    return 1;
}

- (NSInteger)tableView:(UITableView *)tableView
 numberOfRowsInSection:(NSInteger)section
{
    return 3;
}

- (CGFloat)tableView:(UITableView *)tableView
 heightForRowAtIndexPath:(NSIndexPath *)indexPath
{
    switch (indexPath.row) {
        case 0:
            break;
        case OPEN_CELL_PATH:
            if(_rowOpenPath){return COLUMNS_HEIGHT_OPENED;}
            return COLUMNS_HEIGHT_NORMAL;
        case END_INDEX_PATH:
            break;
    }
    return COLUMNS_HEIGHT_NORMAL;
}

- (void)tableView:(UITableView *)tableView
 didSelectRowAtIndexPath:(NSIndexPath *)indexPath
{
    [tableView beginUpdates];     //Update 開始
    [tableView deselectRowAtIndexPath:indexPath animated:NO];
    if (indexPath.row == OPEN_CELL_PATH)
    {
        if (_rowOpenPath == NO)
        {   //open
            _rowOpenPath = YES;
            self.rangePickerView.hidden = NO;
            NSIndexPath* last = [NSIndexPath indexPathForRow:END_INDEX_PATH
                                                   inSection:0];
            [tableView scrollToRowAtIndexPath:last
                             atScrollPosition:UITableViewScrollPositionBottom
                                     animated:YES];
            
        }
        else
        {   //close
            _rowOpenPath = NO;
            self.rangePickerView.hidden = YES;
        }
    }
    [tableView endUpdates];
}
@end