有时候可能文本内容有些多，需要折起来让界面看着不那么臃肿，就可能会先将内容折起来，点击按钮的时候，才会扩展开，那么我们今天就做一个这个的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
好了， 大家可以尝试着实现更多的展开收起效果！
