iOS新闻资讯类TableViewCell里的内容折叠收起功能
2016-12-23 本文已影响3079人
Anchoriter
先来看下效果图
1.gif
在我的项目中要实现新闻资讯内容判断超过三行的时候要显示展开按钮，点击后可以展开全部内容，下面是实现的过程
1.模型中
- 首先需要在模型类里面额外添加一个判断是否展开的属性
// 是否展开
@property (nonatomic, assign) BOOL isOpening;
2.自定义cell中
- 懒加载创建折叠按钮控件
因为我的项目中需要做一些特殊处理，选择了UILabel做为按钮的
你也可以直接使用UIButton
-(UILabel *)foldLabel{
if (!_foldLabel) {
_foldLabel = [[UILabel alloc] init];
_foldLabel.font = [UIFont systemFontOfSize:14.f];
_foldLabel.textColor = [UIColor redColor];
_foldLabel.userInteractionEnabled = YES;
// 添加点击手势
UITapGestureRecognizer *foldTap =[[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(foldNewsOrNoTap:)];
[_foldLabel addGestureRecognizer:foldTap];
_foldLabel.hidden = YES;
[_foldLabel sizeToFit];
}
return _foldLabel;
}
- 至于控件如何布局，就不多说了，根据自己需要设定。
- 接下来你要在给控件赋值的时候判断这个按钮是否显示
给定文本控件宽度来确定全部展示时所需高度
self.newsText.text = newsModel.desc;
// 可以在这里修改行间距，下面在计算文本高度的时候也要对应设置
// 如果不需要修改，可以省去这一步，但注意下面获取高度的时候不要再设置行间距
if (self.newsText.text.length > 0) {
NSMutableAttributedString *img_text = [[NSMutableAttributedString alloc] initWithString:[NSString stringWithFormat:@"%@", newsModel.desc]];
NSMutableParagraphStyle *paragraphStyle = [[NSMutableParagraphStyle alloc] init];
[paragraphStyle setLineSpacing:3];
[paragraphStyle setLineBreakMode:NSLineBreakByTruncatingTail];
[img_text addAttribute:NSParagraphStyleAttributeName value:paragraphStyle range:NSMakeRange(0, self.newsText.text.length)];
self.newsText.attributedText = img_text;
}
// 获取文本内容宽度，计算展示全部文本所需高度
CGFloat contentW = SCREEN_WIDTH-2*10 ;
NSString *contentStr = self.newsText.text;
NSMutableParagraphStyle *descStyle = [[NSMutableParagraphStyle alloc]init];
[descStyle setLineSpacing:3];//行间距
CGRect textRect = [contentStr
boundingRectWithSize:CGSizeMake(contentW, MAXFLOAT)
options:NSStringDrawingUsesLineFragmentOrigin | NSStringDrawingUsesFontLeading
attributes:@{NSFontAttributeName : [UIFont systemFontOfSize:15.0f], NSParagraphStyleAttributeName : descStyle}
context:nil];
// 这里的高度60是通过指定显示三行文字时，通过打印得到的一个临界值，根据需要自行修改
// 超过三行文字，折叠按钮不显示
if (textRect.size.height > 60) {
self.foldLabel.hidden = NO;
// 修改按钮的折叠打开状态
if (newsModel.isOpening) {
self.newsText.numberOfLines = 0;
self.foldLabel.text = @"收起";
}else{
self.newsText.numberOfLines = 3;
self.foldLabel.text = @"展开";
}
}else{
self.newsText.numberOfLines = 0;
self.foldLabel.hidden = YES;
}
- 实现折叠按钮点击手势的方法
点击展开收起是要做到改变cell的高度的，所以要将点击方法通过代理方法或者Block传递给控制器
在cell的.h中创建代理
@class NewsModel,NewsCell;
@protocol NewsCellCellDelegate <NSObject>
/**
* 折叠按钮点击代理
*
* @param cell 按钮所属cell
*/
- (void)clickFoldLabel:(NewsCell *)cell;
@end
@interface NewsCell : UITableViewCell
/** 数据模型 */
@property (nonatomic, strong) NewsModel *newsModel;
@property (nonatomic, weak) id<NewsCellCellDelegate> cellDelegate;
@end
在cell的.m文件中设置代理方法
/**
* 折叠展开按钮的点击事件
*
* @param recognizer 点击手势
*/
- (void)foldNewsOrNoTap:(UITapGestureRecognizer *)recognizer{
if(recognizer.state == UIGestureRecognizerStateEnded){
if (self.cellDelegate && [self.cellDelegate respondsToSelector:@selector(clickFoldLabel:)]) {
[self.cellDelegate clickFoldLabel:self];
}
}
}
3.控制器中
- 首先实现要设置代理，遵守协议，实现代理方法
/**
* 折叠按钮点击代理
*
* @param cell 按钮所属cell
*/
-(void)clickFoldLabel:(NewsCell *)cell{
NSIndexPath * indexPath = [self.newsTableView indexPathForCell:cell];
NewsModel *model = self.newsDataArray[indexPath.row];
model.isOpening = !model.isOpening;
[UIView animateWithDuration:0.2 animations:^{
[self.newsTableView reloadRowsAtIndexPaths:@[indexPath] withRowAnimation:UITableViewRowAnimationFade];
}];
}
- 设置UITableViewDelegate
这里我使用了UITableView-FDTemplateLayoutCell开源类，具体用法自行搜索，这里我要说的是这个是一个非常牛逼的自适应cell高度的开源类,让cell高度的自适应变得格外容易!
- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath
{
if (self.newsDataArray.count > 0)
{
NewsModel *model = [self.newsDataArray objectAtIndex:indexPath.row];
// 动态计算cell高度
// 这里使用了forkingdog的框架
// https://github.com/forkingdog/UITableView-FDTemplateLayoutCell
// UITableView+FDTemplateLayoutCell这个分类牛逼的地方就在于自动计算行高了
// 如果我们在没有缓存的情况下，只要你使用了它其实高度的计算不需要我们来管，我们只需要[self.tableView reloadData]就完全足够了
// 但是如果有缓存的时候，这个问题就来了，你会发现，点击展开布局会乱，可能会出现有一部分会看不到，这是因为高度并没有变化，一直用的是缓存的高度，所以解决办法如下
if (model.isOpening) {
// 使用不缓存的方式
return [self.newsTableView fd_heightForCellWithIdentifier:NewsCellIdentifier configuration:^(id cell) {
[self handleCellHeightWithNewsCell:cell indexPath:indexPath];
}];
}else{
// 使用缓存的方式
return [self.newsTableView fd_heightForCellWithIdentifier:NewsCellIdentifier cacheByIndexPath:indexPath configuration:^(id cell) {
[self handleCellHeightWithNewsCell:cell indexPath:indexPath];
}];
}
} else{
return 10;
}
}
/**
处理cell高度
*/
-(void)handleCellHeightWithNewsCell:(id)cell indexPath:(NSIndexPath *)indexPath{
NewsCell *newsCell = (NewsCell *)cell;
newsCell.newsModel = self.newsDataArray[indexPath.row];
}
就写这么多吧，所有的逻辑都在这里了
