点击cell展开更多和收回(附代码)

效果图如下：

点击展开更多.gif

1.首先在Controller中添加两个属性，分别纪录cell的展开情况和当前所点击的cell的位置

@property (nonatomic, assign)BOOL isExpand; //判断当前cell是否展开
@property (nonatomic, strong)NSIndexPath *selectedIndexPath; //记录所点击的cell的位置

2.创建两种cell的样式，分别是普通的自定义cell，和扩展之后的cell(即在原样式的基础上再加上扩展的内容)。

testExpandCell.jpeg

3.指定每行显示的cell

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{
    if (self.isExpand && [self.selectedIndexPath isEqual:indexPath]) {//如果展开并且是当前选中的cell
        //创建扩展的cell
        static NSString *expandCellID = @"expandCell";
        ExpandCell *cell = [tableView dequeueReusableCellWithIdentifier:expandCellID];
        if (cell == nil) {
            
            cell = [[ExpandCell alloc]initWithStyle:UITableViewCellStyleDefault reuseIdentifier:expandCellID];
        }
        
        cell.label.text = @"点击详情";
        cell.expandLabel.text = @"详情";
        return cell;
        
    }else{     //普通情况
        //创建普通cell
        static NSString *customCellID = @"customCell";
        
        CustomCell *cell = [tableView dequeueReusableCellWithIdentifier:customCellID];
        if (cell == nil) {
            
            cell = [[CustomCell alloc]initWithStyle:UITableViewCellStyleDefault reuseIdentifier:customCellID];
        }
        cell.label.text = @"点击详情";
        
        return cell;
    }
}

4.原来的显示行数依然不变，但是要设置行高。

-(CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath{
    if (indexPath.row == self.selectedIndexPath.row && self.selectedIndexPath != nil ) {
        if (self.isExpand == YES) {
            return 85;
        }else{
            return 55;
        }
    }else{
        return 55;
    }
}

5.在didSelectRowAtIndexPath改变isExpand值和更新cell

- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath{

    if (!self.selectedIndexPath) {   
        self.isExpand = YES;
        self.selectedIndexPath = indexPath;
        [self.positionTableView beginUpdates];
        [self.positionTableView reloadRowsAtIndexPaths:@[indexPath] withRowAnimation:UITableViewRowAnimationFade];
        [self.positionTableView endUpdates];
    }else{
        
        if (self.isExpand) {
            if ([self.selectedIndexPath isEqual:indexPath]) {
                self.isExpand = NO;
                [self.positionTableView beginUpdates];
                [self.positionTableView reloadRowsAtIndexPaths:@[indexPath] withRowAnimation:UITableViewRowAnimationFade];
                [self.positionTableView endUpdates];
                self.selectedIndexPath = nil;
                
            }else{
                [self.positionTableView beginUpdates];
                [self.positionTableView reloadRowsAtIndexPaths:@[self.selectedIndexPath] withRowAnimation:UITableViewRowAnimationFade];
                self.isExpand = YES ;
                self.selectedIndexPath = indexPath;
                [self.positionTableView reloadRowsAtIndexPaths:@[indexPath] withRowAnimation:UITableViewRowAnimationFade];
                [self.positionTableView endUpdates];
            }
        }
        
    }
}

全代码地址：https://github.com/geekllh/testExpandCell

注明：因为效果图是别人的项目效果图，本文中的代码只是实现点击cell展开和收回的基本功能。

点击cell展开更多和收回(附代码)

推荐阅读更多精彩内容