欢迎光临
我们一直在努力

iOS:根据内容动态计算高度的UITableViewCell

建站超值云服务器,限时71元/月

iOS:根据内容动态计算高度的UITableViewCell

项目介绍:

github地址:https://github.com/SoolyChristy/SoolyMoment

当需要做一个动态分享的界面例如微博主页、朋友圈等。这时候就需要根据内容计算UITableViewCell的高度了。cell的高度是固定值可以在自定义cell的类里返回cell的高度,但是需要根据内容动态计算cell的高度时则需要创建一个ViewModel,在这个ViewModel取到数据模型时计算子视图的frame以及cell的高度。

先看demo效果

1.分析原型模块
要做一个复杂的界面时,通常把一个界面拆分为几个小的模块从而一一实现
下面把一个cell里的子视图拆分为几个模块。

上图的微博的cell可以拆分为三大块

微博主体
微博配图
工具条

上图有转发内容的微博又可以分为几个模块。
分析好原型的模块之后就可以一一实现

2.创建数据模型
这里我是用plist文件来模拟网络请求获取的数据。

       .m文件

       .h文件

3.创建ViewModel
这一步是最重要的。

当ViewModel获取到数据模型时就可以计算cell子视图的frame以及cell的高度
这一步需要在数据模型的setter方法里写

        .h

        .m

定义所有子视图的Frame

@class Moments;
@interface MomentViewModel : NSObject

/**
 *  数据模型
 */
@property (nonatomic ,strong) Moments *moment;

/**
 *  主体Frame
 */
@property (nonatomic ,assign) CGRect momentsBodyFrame;

//昵称Frame
@property (nonatomic ,assign) CGRect bodyNameFrame;
//头像Frame
@property (nonatomic ,assign) CGRect bodyIconFrame;
//时间Frame
@property (nonatomic ,assign) CGRect bodyTimeFrame;
//正文Frame
@property (nonatomic ,assign) CGRect bodyTextFrame;
//图片Frame
@property (nonatomic ,assign) CGRect bodyPhotoFrame;

/**
 *  工具条Frame
 */
@property (nonatomic, assign) CGRect momentsToolBarFrame;

//点赞Frame
@property (nonatomic ,assign) CGRect toolLikeFrame;
//评论Frame
@property (nonatomic ,assign) CGRect toolCommentFrame;

/**
 *  cell高度
 */
@property (nonatomic ,assign) CGFloat cellHeight;

@end

计算子视图的frame(详细在代码里)

4.Model转ViewModel

在ViewController里把Model转为ViewModel

- (NSMutableArray *)moments{
    if (!_moments) {
        _moments = [NSMutableArray array];
        _moments = [Moments moments];
    }
    return _moments;
}

- (NSMutableArray *)momentFrames{
    if (!_momentFrames) {
        _momentFrames = [NSMutableArray array];
        //数据模型 => ViewModel(包含cell子控件的Frame)
        for (Moments *moment in self.moments) {
            MomentViewModel *momentFrame = [[MomentViewModel alloc] init];
            momentFrame.moment = moment;
            [self.momentFrames addObject:momentFrame];
        }
    }
    return _momentFrames;
}

5.给自定义UITableViewCell赋值ViewModel

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{
    MomentsTableViewCell *cell = [MomentsTableViewCell momentsTableViewCellWithTableView:tableView];
    cell.momentFrames = self.momentFrames[indexPath.section];
    return cell;
}

6.优化
当数据很多列表过长的时候优化就势在必行了,可以往以下几个方面考虑

当用户滑动时不加载图片(新浪微博的方法)
异步加载图片
尽量不用系统提供的方法加载圆形头像,而采用加载圆形图片
使用reloadSection进行局部更新

另外也可以在简书上找到我的文章

code4app

赞(0)
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com 特别注意:本站所有转载文章言论不代表本站观点! 本站所提供的图片等素材,版权归原作者所有,如需使用,请与原作者联系。未经允许不得转载:IDC资讯中心 » iOS:根据内容动态计算高度的UITableViewCell
分享到: 更多 (0)