一个简单的可展开和收缩的tableview

写了好多的tableview,只是把常用的tableview的应用场景给大家介绍下,(^__^) 嘻嘻……,话不多说,今天介绍的是一个简单的可以展开和收缩的tableview,类似于qq好友类表。

首先,犹豫是简单的demo,我们就自己构造数据。

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事件代码如下:

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];
};
复制代码

展开的方法是:

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时:

BaseDataModel *model = self.dataArray[section];
if (model.isOpen) {
    return model.dataArray.count;
}else{
    return 0;
}
复制代码

因为tableView有自己的重用机制,sectionHeaderView也会被重用,所以如果不设置好数据源多的时候会乱掉,在MVC的设计模式里,用于控制View的状态的是model,于是可以将控制状态的参数写入init初始化里:

- (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-TableView

欢迎各位阅读,希望能帮到各位,如果有不正确的地方也可以一起探讨~ thanks。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值