TableView表头展开收起

有时候可能文本内容有些多，需要折起来让界面看着不那么臃肿，就可能会先将内容折起来，点击按钮的时候，才会扩展开，那么我们今天就做一个这个的Demo。
先自定义一个视图，将会放在表头上面：

@interface HTIndustryDetailHeadView()
/**
 *  简介文字
 */
@property (nonatomic, strong) UILabel  *introductionLabel;
/**
 *  展开按钮
 */
@property (nonatomic, strong) UIButton *anButton;
@end
@implementation HTIndustryDetailHeadView
 
- (instancetype)initWithFrame:(CGRect)frame{
    
    self = [super initWithFrame:frame];
    
    if (self) {
        
        self.backgroundColor = [UIColor redColor];
        
        _introductionLabel = [[UILabel alloc]init];
        _anButton              = [UIButton buttonWithType:UIButtonTypeCustom];
        
        _introductionLabel.font = [UIFont systemFontOfSize:15];
        _introductionLabel.numberOfLines = 0;
        _introductionLabel.textColor = [UIColor blackColor];
        
        [_anButton setTitle:@"展开" forState:UIControlStateNormal];
        [_anButton addTarget:self action:@selector(anButtonClick:) forControlEvents:UIControlEventTouchUpInside];
        
        _anButton.titleLabel.textColor = GRAY_SYSTEM_COLOR;
        _anButton.titleLabel.font = [UIFont systemFontOfSize:15];
        _anButton.hidden = YES;
        _anButton.backgroundColor = [UIColor blackColor];
        
        [self addSubview:_introductionLabel];
        [self addSubview:_anButton];
    }
    
    return self;
}
- (void)setCourseIntroduction:(NSString *)courseIntroduction{
    _courseIntroduction = courseIntroduction;
    
    _introductionLabel.text = courseIntroduction;
    
    UIFont *font = [UIFont systemFontOfSize:15];
    
    CGSize introducitonSize = [_courseIntroduction sizeWithFont:font maxSize:CGSizeMake(WIDTH - 20, 999)];
    /**
     *  如果文字高度超过了70，那么就显示折起按钮
     */
    if (introducitonSize.height > 70) {
        _introductionLabel.frame = CGRectMake(5, 5, WIDTH - 10, 80);
        _anButton.hidden = NO;
        _anButton.frame = CGRectMake(5, 90, WIDTH - 10, 20);
        
    }else{
        _introductionLabel.frame = CGRectMake(5, 5, WIDTH - 10, introducitonSize.height);
        _anButton.hidden = YES;
    }

}
/**
 *  折起按钮响应事件
 */
- (void)anButtonClick:(UIButton *)btn{

    UIFont *font = [UIFont systemFontOfSize:15];
    
    CGSize introducitonSize = [_courseIntroduction sizeWithFont:font maxSize:CGSizeMake(WIDTH - 10, 999)];
   
    if (!btn.selected) {
        _introductionLabel.frame = CGRectMake(5, 5, WIDTH - 10, introducitonSize.height);
        _anButton.hidden = NO;
        _anButton.frame  = CGRectMake(5, introducitonSize.height + 5, WIDTH - 10, 20);
        [_anButton setTitle:@"收起" forState:UIControlStateNormal];
    }else{ 
        _introductionLabel.frame = CGRectMake(5, 5, WIDTH - 10, 80);
        _anButton.hidden = NO;
        _anButton.frame  = CGRectMake(5, 90, WIDTH - 10, 20);
        [_anButton setTitle:@"展开" forState:UIControlStateNormal];
    
    }
    /**
     *  将文本的高度发送给tableView控制器
     */
    NSNumber *introductionHeight = [NSNumber numberWithFloat:_introductionLabel.frame.size.height]; 
    btn.selected = !btn.selected;
    
    NSDictionary *dic = @{@"introductionHeight":introductionHeight};
    
    [[NSNotificationCenter defaultCenter] postNotificationName:@"DID_CLICK_ANBUTTON" object:nil userInfo:dic];
}

我们在计算label的高度的时候用到了一个方法：

- (CGSize)sizeWithFont:(UIFont *)font maxSize:(CGSize)maxSize
{
//返回的是计算好的高度
    NSDictionary *attrs = @{NSFontAttributeName : font};
    return [self boundingRectWithSize:maxSize options:NSStringDrawingUsesLineFragmentOrigin attributes:attrs context:nil].size;
}

我们将此View放置为表头,根据点击通知来实现frame的切换：

  _tableView = [[UITableView alloc]init];
    _tableView.frame = CGRectMake(0, 0, WIDTH, HEIGHT);
    
    _tableView.dataSource = self;
    _tableView.delegate   = self;
    
    _headView = [[HTIndustryDetailHeadView alloc]init];
//默认先讲表头高度设置为120
    _headView.frame = CGRectMake(0, 0, WIDTH, 120);
    _headView.courseIntroduction = @"优先加载文本内容，其次加载课程图片加载图片前增加占位图，即框架固定优先加载文本内容，其次加载课程图片加载图片前增加占位图，即框架固定优先加载文本内容，其次加载课程图片加载图片前优先加载文本内容，其次加载课程图片加载图片前增加占位图，即框架固定优先加载文本内容，其次加载课程图片加载图片前增加占位图，即框架固定优先加载文本内容，其次加载课程图片加载图片前增加占位图，即框架固定优先加载文本内容，其次加载课程图片加载图片前增加占位图，即框架固定优先加载文本内容，其次加载课程图片加载图片前增加占位图，即框架固定";
    
    _tableView.tableHeaderView = _headView; 
    [self.view addSubview:_tableView];
    [self setExtraCellLineHidden:_tableView];

/**
 *  通知方法，刷新表头
 */
- (void)updetaUI:(NSNotification *) noti{

    
    NSDictionary *dic   = noti.userInfo;
    CGRect rect         = _headView.frame;
    rect.size.height    = [dic[@"introductionHeight"] floatValue] + 35;
    /**
     *  从新设置表头frame
     */
    _headView.frame     = rect;
    self.tableView.tableHeaderView = _headView;
}

我们看下效果，展开前：

IMG_4730.jpg

收起：

IMG_4731.jpg

好了，大家可以尝试着实现更多的展开收起效果！

TableView表头展开收起

推荐阅读更多精彩内容