UI定制 - 实现UITableViewCell的展开、闭合功能

■ 展开/闭合

1. 思路

首先使用数组 openArr 记录单元格的行号：打开单元格时（首次点击）则将其下标添加进该数组；闭合单元格时（再次点击）将其下标从数组中移除

之后根据下标是否存在去更新单元格高度，实现展开/闭合的效果

2. 具体实现

#import "ViewController.h"
@interface ViewController ()<UITableViewDelegate,UITableViewDataSource>
@property(nonatomic,strong)UITableView *tableView;
@property(nonatomic,strong)NSMutableArray *openArr; // 存放被打开的行号
@property(nonatomic,strong)NSMutableArray *titArr;  // 存放标题
@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    self.view.backgroundColor = [UIColor redColor];
    
    // UITableView
    self.tableView = [[UITableView alloc] initWithFrame:self.view.bounds style:UITableViewStylePlain];
    self.tableView.dataSource = self;
    self.tableView.delegate = self;
    [self.view addSubview:self.tableView];
    
    // 标题
    self.titArr = [NSMutableArray arrayWithObjects:@"申请人",@"场次时间",@"票价",@"座位",@"状态",@"备注",nil];
}

// 懒加载
- (NSMutableArray *)openArr{
    
    if (_openArr == nil) {
        _openArr = [NSMutableArray array];
    }
    return _openArr;
}

// 多少行
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section{
    
    return self.titArr.count;
}

// 单元格
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{
    
    static NSString *cellIdentifier = @"baseCell";
    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:cellIdentifier];
    if (!cell) {
        cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:cellIdentifier];
    }
    // 随机色
    cell.backgroundColor = [UIColor colorWithRed:arc4random()%255/255.0 green:arc4random()%255/255.0 blue:arc4random()%255/255.0 alpha:1.0];
    // 标题赋值
    cell.textLabel.text = [self.titArr objectAtIndex:indexPath.row];
    //
    if ([self.openArr containsObject:[NSString stringWithFormat:@"%ld",indexPath.row]]) {
        cell.textLabel.text = [NSString stringWithFormat:@"第 %d 行展开",(int)indexPath.row+1];
    }
    return cell;
}

// 高度
- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath{
    
    // 展开高度
    if ([self.openArr containsObject:[NSString stringWithFormat:@"%ld",indexPath.row]]) {
        return 100;
    }
    // 闭合高度
    return 30;
}

// 监听 cell 的闭合
- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath{
    
    // 除了第 0 行，其它允许展开/闭合
    if (indexPath.row !=0) {
        
        if ([self.openArr containsObject:[NSString stringWithFormat:@"%ld",indexPath.row]]) {
            // 之前已经点击过的，从数组中移除即可
            [self.openArr removeObject:[NSString stringWithFormat:@"%ld",indexPath.row]];
        }else {
            // 第一次点击则添加进数组
            [self.openArr addObject:[NSString stringWithFormat:@"%ld",indexPath.row]];
        }
        // 刷新指定 cell
        [self.tableView reloadRowsAtIndexPaths:@[indexPath] withRowAnimation:UITableViewRowAnimationFade];
    }
    NSLog(@"本次点击的行号：%d，%@",(int)indexPath.row,self.openArr);
}

@end

运行效果：展开 第2行 和 第5行    |    关闭 第5行

       |