效果图

实现ios通知列表堆叠滚动效果_uilabel


在我的项目中要实现新闻资讯内容判断超过三行的时候要显示展开按钮，点击后可以展开全部内容，下面是实现的过程

1.模型中
  • 首先需要在模型类里面加个判断是否展开的属性
// 是否展开
@property (nonatomic, assign) BOOL isOpening;
2.自定义cell中
  • 懒加载创建折叠按钮控件
    我是使用了UILabel做为按钮的
-(UILabel *)foldLabel{
    if (!_foldLabel) {
        _foldLabel = [[UILabel alloc] init];
        _foldLabel.font = [UIFont systemFontOfSize:12.f];
        _foldLabel.textColor = NEWS_DATE_COLOR;
        // 因为我设置了cell不能点击，所以控件需要开启用户交互
        _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 = flashModel.desc;
   NSMutableAttributedString *img_text = [[NSMutableAttributedString alloc] initWithString:[NSString stringWithFormat:@"%@", flashModel.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*14 - 40 - 18;
   // 资讯内容
   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];
    // 我这里是给newsText写死了三行文字通过打印textRect.size.height得到的临界值。例如58.5，我这里直接使用了60
    if (textRect.size.height > 60) {
        
        self.foldLabel.hidden = NO;
        if (flashModel.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 MyMsgCell,MyNewsFlashModel;
@protocol MyMsgCellDelegate <NSObject>
 - (void)clickFoldLabel:(MyMsgCell *)cell;
@end
@interface MyMsgCell : TabViewCell
@property (nonatomic, strong) MyNewsFlashModel *flashModel;
@property (nonatomic, assign) NSInteger flashIndex;
@property (nonatomic, weak) id<MyMsgCellDelegate> myMsgCellDelegate;
@end

在cell的.m文件中

- (void)foldNewsOrNoTap:(UITapGestureRecognizer *)recognizer{
    
    if(recognizer.state == UIGestureRecognizerStateEnded){
        
        if (self.myMsgCellDelegate && [self.myMsgCellDelegate respondsToSelector:@selector(clickFoldLabel:)]) {
            
            [self.myMsgCellDelegate clickFoldLabel:self];
        }
    }
}
3.控制器中
  • 首先实现要设置代理，遵守协议，实现代理方法
#pragma mark - MyMsgCellDelegate
-(void)clickFoldLabel:(MyMsgCell *)cell{
    
    NSIndexPath * indexPath = [self.mainView indexPathForCell:cell];
    MYJFIndexNewsFlashModel *flashModel = self.importantMsgArray[indexPath.row];
    
    flashModel.isOpening = !flashModel.isOpening;
    // 刷新点击的cell
    [UIView animateWithDuration:0.2 animations:^{
        [self.mainView reloadRowsAtIndexPaths:@[indexPath] withRowAnimation:UITableViewRowAnimationFade];
    }];

}
  • 设置UITableViewDelegate
    这里我使用了UITableView-FDTemplateLayoutCell开源类，具体用法自行搜索，这里我要说的是这个是一个非常牛逼的自适应cell高度的开源类,让cell高度的自适应变得格外容易!
#pragma mark - UITableViewDelegate
//返回每个cell的高度
- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath
{
 if (self.importantMsgArray.count > 0)
        {
            MYJFIndexNewsFlashModel *flashModel = [self.importantMsgArray objectAtIndex:indexPath.row];
          // UITableView+FDTemplateLayoutCell这个分类牛逼的地方就在于自动计算行高了
          // 如果我们在没有缓存的情况下，只要你使用了它其实高度的计算不需要我们来管，我们只需要[self.tableView reloadData]就完全足够了
          // 但是如果有缓存的时候，这个问题就来了，你会发现，点击展开布局会乱，有一部分会看不到，这是因为高度并没有变化，一直用的是缓存的高度，所以解决办法如下

            if (flashModel.isOpening) {
                // 使用不缓存的方式
                return [self.mainView fd_heightForCellWithIdentifier:@"myMsgCell" configuration:^(id cell) {
                    
                    MyMsgCell *importantMsgCell = (MyMsgCell *)cell;
                    
                    importantMsgCell.flashModel = self.importantMsgArray[indexPath.row];
                    
                }];       
            }else{
                // 使用缓存的方式
                return [self.mainView fd_heightForCellWithIdentifier:@"myMsgCell" cacheByIndexPath:indexPath configuration:^(id cell) {
                    
                    MyMsgCell *importantMsgCell = (MyMsgCell *)cell;
                    
                    importantMsgCell.flashModel = self.importantMsgArray[indexPath.row];
                }];
            }
            
        } else
        {
            return 10;
        }
}

就写这么多吧，所有的逻辑都在这里了