一個簡單的可展開和收縮的tableview

寫了好多的tableview,只是把經常使用的tableview的應用場景給你們介紹下,(^__^) 嘻嘻……,話很少說,今天介紹的是一個簡單的能夠展開和收縮的tableview,相似於qq好友類表。ios

Extand tableView.gif

首先,猶豫是簡單的demo,咱們就本身構造數據。git

for (int i = 0; i < 4; i++) {
    BaseDataModel *model = [[BaseDataModel alloc] init];
    model.isOpen = NO;
    NSString *name = [NSString stringWithFormat:@"Section:%d",i];
    model.name = name;
    NSMutableArray *array = [NSMutableArray arrayWithCapacity:5];
    for (int j = 0; j < 4; j++) {
        NSString *cellName = [NSString stringWithFormat:@"Cell:%d",j];
        [array addObject:cellName];
    }
    model.dataArray = array;
    [self.dataArray addObject:model];
}
複製代碼

BaseModel是咱們的一個model類。OK,當咱們的數據構造好了,接下來就是設計咱們的tableview裏的section-headerview,主要是給headerview添加一個點擊事件,以後在咱們的mainviewcontroller裏響應,這邊能夠有不少種解決方法(能夠delegate,也能夠block,也能夠通知)。我用的是block,相對來講簡單點。tap事件代碼以下:github

if (_isOpen) {
    [UIView animateWithDuration:0.3 animations:^{
        _imageView.transform = CGAffineTransformRotate(_imageView.transform, -M_PI / 2);
    }];
    self.closeblock(self.section);
}else{
    [UIView animateWithDuration:0.3 animations:^{
        _imageView.transform = CGAffineTransformRotate(_imageView.transform, M_PI / 2);
    }];
    self.openblock(self.section);
}
self.isOpen = !self.isOpen;
複製代碼

回到咱們的mainviewcontroller裏:設計模式

HeaderView *headerView = [[HeaderView alloc] initWithFrame:CGRectMake(0, 0, WIDTH, 40)];
headerView.nameLabel.text = model.name;
headerView.section = section;

__weak typeof(self) weakself = self;
headerView.openblock =^(NSInteger secion){
    [weakself openSection:section];
};
headerView.closeblock = ^(NSInteger section){
    [weakself closeSection:section];
};
複製代碼

展開的方法是:spa

BaseDataModel *model = self.dataArray[section];
model.isOpen = !model.isOpen;
NSMutableArray *indexArray = [NSMutableArray arrayWithCapacity:10];
for (int i = 0; i < model.dataArray.count; i++) {
    NSIndexPath *indexpath = [NSIndexPath indexPathForRow:i inSection:section];
    [indexArray addObject:indexpath];
}
[self.tableView insertRowsAtIndexPaths:indexArray withRowAnimation:UITableViewRowAnimationFade];
複製代碼

關閉的方法是:設計

BaseDataModel *model = self.dataArray[section];
model.isOpen = !model.isOpen;
NSMutableArray *indexArray = [NSMutableArray arrayWithCapacity:10];
for (int i = 0; i < model.dataArray.count; i++) {
    NSIndexPath *indexpath = [NSIndexPath indexPathForRow:i inSection:section];
    [indexArray addObject:indexpath];
}
[self.tableView deleteRowsAtIndexPaths:indexArray withRowAnimation:UITableViewRowAnimationFade];
複製代碼

因爲當你刪除或者添加數據的時候,對應的datasource也要作出相應的改變,因此在返回numberOfRowsInSection時:code

BaseDataModel *model = self.dataArray[section];
if (model.isOpen) {
    return model.dataArray.count;
}else{
    return 0;
}
複製代碼

由於tableView有本身的重用機制,sectionHeaderView也會被重用,因此若是不設置好數據源多的時候會亂掉,在MVC的設計模式裏,用於控制View的狀態的是model,因而能夠將控制狀態的參數寫入init初始化裏:orm

- (instancetype)initWithFrame:(CGRect)frame IsOpen:(BOOL)isOpen {
 if (self = [super initWithFrame:frame]) {
    self.backgroundColor = [UIColor whiteColor];
    [self addSubview:self.nameLabel];
    [self addSubview:self.imageView];
    [self addGestureRecognizer:[[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(tapOpen)]];
    self.isOpen = isOpen;
    if (self.isOpen) {
       _imageView.transform =  CGAffineTransformRotate(_imageView.transform, M_PI / 2);
    }
 }
 return self;
}
複製代碼

這樣的話,一個簡單的展開收縮的tableview就完成了。 demo地址:https://github.com/ioscick/Extand-TableViewcdn

歡迎各位閱讀,但願能幫到各位,若是有不正確的地方也能夠一塊兒探討~ thanks。blog

相關文章
相關標籤/搜索