當(dāng)需要做一個(gè)動(dòng)態(tài)分享的界面例如微博主頁(yè)、朋友圈等亮蛔。這時(shí)候就需要根據(jù)內(nèi)容計(jì)算UITableViewCell的高度了漱竖。cell的高度是固定值可以在自定義cell的類里返回cell的高度君珠，但是需要根據(jù)內(nèi)容動(dòng)態(tài)計(jì)算cell的高度時(shí)則需要?jiǎng)?chuàng)建一個(gè)ViewModel茅特，在這個(gè)ViewModel取到數(shù)據(jù)模型時(shí)計(jì)算子視圖的frame以及cell的高度。
先看demo效果
1.分析原型模塊
要做一個(gè)復(fù)雜的界面時(shí)爵川，通常把一個(gè)界面拆分為幾個(gè)小的模塊從而一一實(shí)現(xiàn)
下面把一個(gè)cell里的子視圖拆分為幾個(gè)模塊敷鸦。
上圖的微博的cell可以拆分為三大塊
- 微博主體
- 微博配圖
- 工具條
上圖有轉(zhuǎn)發(fā)內(nèi)容的微博又可以分為幾個(gè)模塊。
分析好原型的模塊之后就可以一一實(shí)現(xiàn)
2.創(chuàng)建數(shù)據(jù)模型
這里我是用plist文件來(lái)模擬網(wǎng)絡(luò)請(qǐng)求獲取的數(shù)據(jù)寝贡。
.m文件
.h文件
3.創(chuàng)建ViewModel
這一步是最重要的扒披。
- 當(dāng)ViewModel獲取到數(shù)據(jù)模型時(shí)就可以計(jì)算cell子視圖的frame以及cell的高度
這一步需要在數(shù)據(jù)模型的setter方法里寫
.h
.m
- 定義所有子視圖的Frame
@class Moments;
@interface MomentViewModel : NSObject
/**
* 數(shù)據(jù)模型
*/
@property (nonatomic ,strong) Moments *moment;
/**
* 主體Frame
*/
@property (nonatomic ,assign) CGRect momentsBodyFrame;
//昵稱Frame
@property (nonatomic ,assign) CGRect bodyNameFrame;
//頭像Frame
@property (nonatomic ,assign) CGRect bodyIconFrame;
//時(shí)間Frame
@property (nonatomic ,assign) CGRect bodyTimeFrame;
//正文Frame
@property (nonatomic ,assign) CGRect bodyTextFrame;
//圖片F(xiàn)rame
@property (nonatomic ,assign) CGRect bodyPhotoFrame;
/**
* 工具條Frame
*/
@property (nonatomic, assign) CGRect momentsToolBarFrame;
//點(diǎn)贊Frame
@property (nonatomic ,assign) CGRect toolLikeFrame;
//評(píng)論Frame
@property (nonatomic ,assign) CGRect toolCommentFrame;
/**
* cell高度
*/
@property (nonatomic ,assign) CGFloat cellHeight;
@end
- 計(jì)算子視圖的frame（詳細(xì)在代碼里）
4.Model轉(zhuǎn)ViewModel
在ViewController里把Model轉(zhuǎn)為ViewModel
- (NSMutableArray *)moments{
if (!_moments) {
_moments = [NSMutableArray array];
_moments = [Moments moments];
}
return _moments;
}
- (NSMutableArray *)momentFrames{
if (!_momentFrames) {
_momentFrames = [NSMutableArray array];
//數(shù)據(jù)模型 => 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.優(yōu)化
當(dāng)數(shù)據(jù)很多列表過長(zhǎng)的時(shí)候優(yōu)化就勢(shì)在必行了，可以往以下幾個(gè)方面考慮
- 當(dāng)用戶滑動(dòng)時(shí)不加載圖片（新浪微博的方法）
- 異步加載圖片
- 盡量不用系統(tǒng)提供的方法加載圓形頭像圃泡，而采用加載圓形圖片
- 使用reloadSection進(jìn)行局部更新
最后源碼：
github地址
