有時候可能文本內(nèi)容有些多现恼，需要折起來讓界面看著不那么臃腫肃续，就可能會先將內(nèi)容折起來黍檩，點擊按鈕的時候，才會擴展開始锚，那么我們今天就做一個這個的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;
}
}
/**
* 折起按鈕響應(yīng)事件
*/
- (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];
}
/**
* 將文本的高度發(fā)送給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放置為表頭,根據(jù)點擊通知來實現(xiàn)frame的切換：
_tableView = [[UITableView alloc]init];
_tableView.frame = CGRectMake(0, 0, WIDTH, HEIGHT);
_tableView.dataSource = self;
_tableView.delegate = self;
_headView = [[HTIndustryDetailHeadView alloc]init];
//默認先講表頭高度設(shè)置為120
_headView.frame = CGRectMake(0, 0, WIDTH, 120);
_headView.courseIntroduction = @"優(yōu)先加載文本內(nèi)容肛跌，其次加載課程圖片加載圖片前增加占位圖，即框架固定優(yōu)先加載文本內(nèi)容察郁，其次加載課程圖片加載圖片前增加占位圖衍慎，即框架固定優(yōu)先加載文本內(nèi)容，其次加載課程圖片加載圖片前優(yōu)先加載文本內(nèi)容皮钠，其次加載課程圖片加載圖片前增加占位圖稳捆，即框架固定優(yōu)先加載文本內(nèi)容，其次加載課程圖片加載圖片前增加占位圖麦轰，即框架固定優(yōu)先加載文本內(nèi)容乔夯，其次加載課程圖片加載圖片前增加占位圖，即框架固定優(yōu)先加載文本內(nèi)容款侵，其次加載課程圖片加載圖片前增加占位圖末荐，即框架固定優(yōu)先加載文本內(nèi)容，其次加載課程圖片加載圖片前增加占位圖新锈，即框架固定";
_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;
/**
* 從新設(shè)置表頭frame
*/
_headView.frame = rect;
self.tableView.tableHeaderView = _headView;
}
我們看下效果，展開前：
IMG_4730.jpg
收起：
IMG_4731.jpg
好了妹笆， 大家可以嘗試著實現(xiàn)更多的展開收起效果块请！
