Copyright © 2017年ZaneWangWang. All rights reserved.
根据项目需求实现功能一步步分析得到实现思路,最终产生的解决方案才是最有效的,如果你看到的不是原文请点击查看原文
一.项目效果介绍以及需求分析
1.最近项目涉及到一个社交圈的界面,如下图所示的效果:
效果图
2.需求介绍:在这个表中cell的子控件中,用户发表的feeling文字要求高度自适应,发表的图片最多为6张,可以随机发表1~6张所以cell得整体高度主要有这两块的动态高度加上发表时间以及nickName不变高度的和决定。
二.方案以及实现
1.根据需求分析我使用xib布局了如下cell图:
cell布局方案
方案分析:其中由于h_1部分和h_2部分是可变的,因此我将这两个高度约束暴露在cell的实现文件.m中
@property (weak, nonatomic) IBOutlet NSLayoutConstraint *header_h;
@property (weak, nonatomic) IBOutlet NSLayoutConstraint *image_h;
2.请求数据的处理,首先在创建model的属性时,给model两个缓存以上提及的两个可变高度属性,如下加粗的两个属性。
#import@interface SocialCircleModel : NSObject
//请求属性
@property (strong, nonatomic) NSMutableArray *Images;
@property (strong, nonatomic) NSString *content;
@property (strong, nonatomic) NSString *totalComments;
@property (strong, nonatomic) NSString *Id;
@property (strong, nonatomic) NSString *totalPraise;
@property (strong, nonatomic) NSString *createBy;
@property (strong, nonatomic) NSString *imgHead;
@property (strong, nonatomic) NSString *createTime;
@property (strong, nonatomic) NSString *nickName;
//缓存一个可变高度给model
@property (assign, nonatomic) CGFloat header_h;
@property (assign, nonatomic) CGFloat images_h;
@end
重写封装model类的mj的方法如下,其中重点是根据数据源计算文字高度和搜有图片展示所需的高度并缓存给model
+ (NSDictionary *)mj_replacedKeyFromPropertyName{
return @{@"Id":@"id"};
}
+ (instancetype)mj_objectWithKeyValues:(id)keyValues{
SocialCircleModel *model = [super mj_objectWithKeyValues:keyValues];
//替换出请求道德图片url
[model.Images enumerateObjectsUsingBlock:^(NSDictionary *_Nonnull obj, NSUInteger idx, BOOL * _Nonnull stop) {
[model.Images replaceObjectAtIndex:idx withObject:obj[@"imgUrl"]];
}];
//header的高度
float feelingH = [model.content getTextHeightWithShowWidth:kScreen_W - 74.0f AndTextFont:[UIFont systemFontOfSize:13.0f] AndInsets:4.0f];
if (feelingH + 50.0f < 64.0f) {
model.header_h = 64.0f;
}
else{
model.header_h = feelingH + 50.0f;
}
//图片集的高度
float imageH = (kScreen_W - 40.0f) / 3.0f;
if (model.Images.count == 0){
model.images_h = 0;
}
else if (model.Images.count <= 3) {
model.images_h = 10.0f + imageH;
}
else{
model.images_h = 15.0f + imageH * 2.0f;
}
return model;
}
3.以上可以说就是准备工作了,接下来就非常简单了,根据model的缓存高给定cell的高度即可,以下cell的配置和行高配置的两个代理方法的实现
- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath{
SocialCircleModel *model = _dataSource[indexPath.row];
//每个cell高度根据model缓存高度适配
return model.header_h + model.images_h + 42.0f;
}
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{
SocialCircleTableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:@"socailCell" forIndexPath:indexPath];
//cell配置数据
cell.model = _dataSource[indexPath.row];
return cell;
}
这样的话,我们在得到网络数据刷新table的时候高度就是已经缓存好在model中的数据,直接取就好了。
保留所有权,未经允许禁止转载。
网友评论