非等高cell實戰(zhàn)（01）-- 實現(xiàn)微博頁面

學習過UITableView、AutoLayout以及MVC的相關(guān)知識，接下來通過一個微博頁面實戰(zhàn)來整合一下。

首先看一下效果圖：

需求分析

此頁面為非等高cell，tableview的組數(shù)為1

cell內(nèi)容根據(jù)數(shù)據(jù)動態(tài)展示

cell自適應(yīng)高度，根據(jù)微博有無圖片，適配自己高度

項目準備

數(shù)據(jù)均為本地數(shù)據(jù)（status.plist 和 images）

上手操作

創(chuàng)建工程、導(dǎo)入資源

創(chuàng)建MVC對應(yīng)文件，本案例為：XYStatusesViewController、XYStatus、XYStatusCell

控制器邏輯：控制器只需管理邏輯.至于cell的創(chuàng)建和內(nèi)部細節(jié)，全部封裝起來

• 懶加載本地plist數(shù)據(jù)

- (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對應(yīng)的數(shù)據(jù)源```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的高度。有這個方法的調(diào)用順序是： 1.估算 2.返回cell 3. 計算準確高度* 否則：1.計算準確高度 2.返回cell 3.再計算準確高度** 不知是Xcode8的特性還是iOS10 特性。所以這種通過model保存高度的方法，可以不用寫估算方法也行*/- (CGFloat)tableView:(UITableView *)tableView estimatedHeightForRowAtIndexPath:(NSIndexPath *)indexPath {NSLog(@"-----estimatedHeightForRowAtIndexPath------");return 200; }

模型的封裝：模型用來存儲內(nèi)部數(shù)據(jù)、并通過KVC來保存?zhèn)魅霐?shù)據(jù)

@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;// 內(nèi)部實現(xiàn)+ (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創(chuàng)建，因為方便

• 首先cell需要一個status屬性、并提供一個類方法創(chuàng)建實例

@property (nonatomic, strong) XYStatus *status;+ (instancetype)cellWithTableView:(UITableView *)tableView;

• 在Xib中設(shè)置內(nèi)容控件并拖到.m中（設(shè)置好復(fù)用標識）

根據(jù)Xib創(chuàng)建view的步驟來，設(shè)置cell

• cell類方法的實現(xiàn)

+ (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;}

• 設(shè)置cell的數(shù)據(jù) 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子控件設(shè)置數(shù)據(jù)，計算出具體frame。// 通過計算的cell的高度，來重新保存到status模型中// 這里是C語言中指針的知識，如果有問題，歡迎留言status.cellHeight = _height;}

小結(jié)：

麻雀雖小,五臟俱全。

項目資料，均來自MJ
項目完整代碼：微博UI布局

?

轉(zhuǎn)載于:https://www.cnblogs.com/xiaoyouPrince/p/6649331.html

總結(jié)

以上是生活随笔為你收集整理的非等高cell实战（01）-- 实现微博页面的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。