學習過UITableView、AutoLayout以及MVC的相關知識，接下來通過一個微博頁面實戰來整合一下。
首先看一下效果圖：
微博頁面.gif
需求分析
- 此頁面為非等高cell，tableview的組數為1
- cell內容根據數據動態展示
- cell自適應高度，根據微博有無圖片，適配自己高度
項目準備
- 數據均為本地數據（status.plist 和 images）
上手操作
-
創建工程、導入資源
Snip20170323_1.png 創建MVC對應文件，本案例為：XYStatusesViewController、XYStatus、XYStatusCell
-
控制器邏輯：控制器只需管理邏輯.至于cell的創建和內部細節，全部封裝起來
- 懶加載本地plist數據
- (NSMutableArray *)status {
if (_status == nil) {
NSString *path = [[NSBundle mainBundle] pathForResource:@"statuses.plist" ofType:nil];
NSArray *array = [NSArray arrayWithContentsOfFile:path];
NSMutableArray *arrayM = [NSMutableArray new];
for (NSDictionary *dict in array) {
XYStatus *status = [XYStatus statusWithDict:dict];
[arrayM addObject:status];
}
_status = arrayM;
}
return _status;
}
```
- 返回tableView對應的數據源
```objc
#pragma mark - Table view data source
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
return self.status.count;
}
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
XYStatusCell *cell = [XYStatusCell cellWithTableView:tableView];
cell.status = self.status[indexPath.row];
NSLog(@"cell.height = %zd",cell.height);
return cell;
}
/**
* 不知是Xcode8的特性還是iOS10 特性。所以這種通過model保存高度的方法，可以不用寫估算方法也行。
* 因為最初精算，返回值為0，Model中沒有保存。然后返回cell之后，再精算的時候返回真實的保存值。
*/
- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath
{
NSLog(@"-----heightForRowAtIndexPath------");
XYStatus *status = self.status[indexPath.row];
return status.cellHeight;
}
/**
* 這個方法很重要：是估算cell的高度。有這個方法的調用順序是： 1.估算 2.返回cell 3. 計算準確高度
* 否則：1.計算準確高度 2.返回cell 3.再計算準確高度
*
* 不知是Xcode8的特性還是iOS10 特性。所以這種通過model保存高度的方法，可以不用寫估算方法也行
*/
- (CGFloat)tableView:(UITableView *)tableView estimatedHeightForRowAtIndexPath:(NSIndexPath *)indexPath
{
NSLog(@"-----estimatedHeightForRowAtIndexPath------");
return 200;
}
- 模型的封裝：模型用來存儲內部數據、并通過KVC來保存傳入數據
@property (nonatomic, copy) NSString *text;
@property (nonatomic, copy) NSString *name;
@property (nonatomic, copy) NSString *icon;
@property (nonatomic, copy) NSString *picture;
@property (nonatomic, assign,getter=isVip) BOOL vip;
/**
* cellHeight
*/
@property (nonatomic, assign) CGFloat cellHeight;
+ (instancetype)statusWithDict:(NSDictionary *)dict;
- (instancetype)initWithDict:(NSDictionary *)dict;
// 內部實現
+ (instancetype)statusWithDict:(NSDictionary *)dict
{
return [[self alloc] initWithDict:dict];
}
- (instancetype)initWithDict:(NSDictionary *)dict
{
if (self == [super init]) {
[self setValuesForKeysWithDictionary:dict];
}
return self;
}
-
View的封裝，cell推薦使用xib創建，因為方便
- 首先cell需要一個status屬性、并提供一個類方法創建實例
@property (nonatomic, strong) XYStatus *status;
+ (instancetype)cellWithTableView:(UITableView *)tableView;
- 在Xib中設置內容控件并拖到.m中（設置好復用標識）
Snip20170323_2.png
根據Xib創建view的步驟來，設置cell
- cell類方法的實現
+ (instancetype)cellWithTableView:(UITableView *)tableView
{
static NSString *ID = @"cell";
XYStatusCell *cell = [tableView dequeueReusableCellWithIdentifier:ID];
if (cell == nil) {
cell = [[[NSBundle mainBundle] loadNibNamed:NSStringFromClass(self) owner:nil options:nil] lastObject];
}
return cell;
}
- 設置cell的數據 status
- (void)setStatus:(XYStatus *)status
{
_status = status;
self.iconView.image = [UIImage imageNamed:status.icon];
self.nameLabel.text = status.name;
self.contentLabel.text = status.text;
if (status.isVip) {
self.vipView.hidden = NO;
self.vipView.image = [UIImage imageNamed:@"vip"];
self.nameLabel.textColor = [UIColor orangeColor];
}else
{
self.vipView.hidden = YES;
self.nameLabel.textColor = [UIColor blackColor];
}
if (status.picture) {
self.pictureView.hidden = NO;
self.pictureView.image = [UIImage imageNamed:status.picture];
_height = CGRectGetMaxY(self.pictureView.frame) + 10;
}else
{
self.pictureView.hidden = YES;
_height = CGRectGetMaxY(self.contentLabel.frame) + 10;
}
// 強制布局
[self layoutIfNeeded];
// 計算并標記高度保存到model中去
if (self.pictureView.hidden) {
_height = CGRectGetMaxY(self.contentLabel.frame) + 10;
}else
{
_height = CGRectGetMaxY(self.pictureView.frame) + 10;
}
// 這里有個注意點：
// 通過強制布局使得cell子控件設置數據，計算出具體frame。
// 通過計算的cell的高度，來重新保存到status模型中
// 這里是C語言中指針的知識，如果有問題，歡迎留言
status.cellHeight = _height;
}
小結：
麻雀雖小,五臟俱全。
項目資料，均來自MJ
項目完整代碼：微博UI布局
