課題一：如何計算Cell高度 方案一：直接法（面向對象） 直接法，就是把數據佈局到Cell上，然後拿到Cell最底部控制項的MaxY值。 第一步：創建Cell並正確設置約束，使文字區域高度能夠根據文字內容多少自動調整 添加好約束 第二步：再給這個Cell添加點別的東東，就叫這個東東BottomCub了 ...
課題一：如何計算Cell高度
方案一：直接法（面向對象）
直接法，就是把數據佈局到Cell上，然後拿到Cell最底部控制項的MaxY值。
第一步：創建Cell並正確設置約束，使文字區域高度能夠根據文字內容多少自動調整
添加好約束
第二步：再給這個Cell添加點別的東東，就叫這個東東BottomCub了。為Cub添加好約束。
隨便添加點什麼
第三步：為這個Cell寫一個返回Cell高度 - 也就是BottomCub最大Y值的方法
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
#import "TestCell.h"
@interface TestCell ()
@property (strong, nonatomic) IBOutlet UILabel *longLabel;
@property (strong, nonatomic) IBOutlet UIView *bottomCub;
@end
@implementation TestCell
// Cell的構造方法
+ (instancetype)creatWithTitle :(NSString *)title inTableView :(UITableView *)tableView
{
TestCell *cell = [tableView dequeueReusableCellWithIdentifier:NSStringFromClass(self)];
if (!cell) {
cell = [[NSBundle mainBundle] loadNibNamed:NSStringFromClass(self) owner:nil options:kNilOptions].lastObject;
}
cell.longLabel.text = title;
return cell;
}
/**
* 拿到bottomCub的最大Y值並返回
*/
- (CGFloat)cellHeight
{
// 強制佈局之前，需要先手動設置下cell的真實寬度，以便於準確計算
CGRect rect = self.frame;
rect.size.width = [[UIScreen mainScreen] bounds].size.width;
self.frame = rect;
[self layoutIfNeeded]; // 一定要強制佈局下，否則拿到的高度不准確
return CGRectGetMaxY(self.bottomCub.frame);
}
@end
|
第四步：在代理方法中設置Cell高度
*註意：計算Cell高度的過程，一定不要放在heightForRow代理方法中！這一點在後文中將會有所提及。
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 |
#import "AskCellViewController.h"
#import "TestCell.h"
@interface AskCellViewController ()
@property (strong, nonatomic) UITableView *tableView;
/** 測試數據 - Cell中文字內容數組*/
@property(copy,nonatomic) NSArray *testTitleArray;
@end
@implementation AskCellViewController
- (void)viewDidLoad {
[super viewDidLoad];
[self.view addSubview:self.tableView];
self.tableView.frame = self.view.bounds;
self.tableView.delegate = self;
self.tableView.dataSource = self;
self.tableView.tableFooterView = [[UIView alloc] init];
}
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
TestCell *cell = [TestCell creatWithTitle:self.testTitleArray[indexPath.row] inTableView:tableView];
cell.selectionStyle = UITableViewCellSelectionStyleNone;
return cell;
}
- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath
{
// *註意：計算Cell高度的過程，一定不要放在此代理方法中！這一點在後文中將會有所提及，此處僅為演示方便
CGFloat cellHeight = [[TestCell creatWithTitle:self.testTitleArray[indexPath.row] inTableView:tableView] cellHeight];
NSLog(@"%f",cellHeight);
return cellHeight;
}
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
return self.testTitleArray.count;
}
#pragma mark - Lazy
- (UITableView *)tableView
{
if (!_tableView) {
_tableView = [[UITableView alloc] init];
}
return _tableView;
}
- (NSArray *)testTitleArray
{
return @[@"我是第一個Cell",@"我是第二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二個Cell",@"我是第三個Cell"];
}
@end
|
效果
動態設定Cell高度結果
方案二：自己算（面向過程）
通常情況下，Cell之所以不等高，是因為Cell內部文字區域的高度會根據文字數量動態變化，圖片區域的高度會根據圖片數量而自動變化。也就是說，只要知道文字區域的高度、圖片區域的高度，就可以硬生生計算出Cell的高度了。
註意註意註意：如果產品有可能會要求調整行距，切不可用此方法計算！
替代可選方案：
| 1 |
CGSize size = [cell.content sizeThatFits:CGSizeMake(cell.content.frame.size.width, MAXFLOAT)];
|
(註於：2016.1.28）
-
第一步：硬生生的將每個Cell的高度算出來，並保存在一個數組中
-
第二步：heightForRow方法中返回相應的CellHeight
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 |
#import "CalculatorViewController.h"
#import "TestCell.h"
@interface CalculatorViewController ()
@property (strong, nonatomic) UITableView *tableView;
/** 測試數據 - Cell中文字內容數組*/
@property(copy,nonatomic) NSArray *testTitleArray;
/** 用來存Cell高度的數組*/
@property(copy,nonatomic) NSArray *cellHeightArray;
@end
@implementation CalculatorViewController
- (void)viewDidLoad {
[super viewDidLoad];
[self.view addSubview:self.tableView];
self.tableView.frame = self.view.bounds;
self.tableView.delegate = self;
self.tableView.dataSource = self;
self.tableView.tableFooterView = [[UIView alloc] init];
}
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
TestCell *cell = [TestCell creatWithTitle:self.testTitleArray[indexPath.row] inTableView:tableView];
cell.selectionStyle = UITableViewCellSelectionStyleNone;
return cell;
}
- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath
{
CGFloat cellHeight = [self.cellHeightArray[indexPath.row] floatValue];
return cellHeight;
}
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
return self.testTitleArray.count;
}
#pragma mark - Lazy
- (UITableView *)tableView
{
if (!_tableView) {
_tableView = [[UITableView alloc] init];
}
return _tableView;
}
- (NSArray *)testTitleArray
{
return @[@"我是第一個Cell",@"我是第二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二個Cell",@"我是第三個Cell"];
}
- (NSArray *)cellHeightArray
{
NSMutableArray *cellHeightTMPArray = [@[] mutableCopy];
// 開始硬生生的計算每一個Cell高度
for (NSString *string in self.testTitleArray) {
CGFloat cellHeight = 0;
// 一個Cell由兩部分組成 - 高度自動調整的Label & bottomCub
// bottomCub高度是確定的 - 120，Label和bottomCub之間的間距是確定的 - 8
static CGFloat bottomCubHeight = 120;
static CGFloat bottomMargin = 8;
// 計算Label的高度 - 其實就是計算Lable中的String的總高度
// 1. 拿到將要放入Lable的String
NSString *stringForLabel = string;
// 2. 根據文字內容、字體（固定值）、文字區域最大寬度計算String總高度
static CGFloat fontSize = 17;
CGFloat labelHeight = [stringForLabel sizeWithFont:[UIFont systemFontOfSize:fontSize] constrainedToSize:CGSizeMake(self.tableView.frame.size.width, CGFLOAT_MAX)].height;
// 3. 拿到了總高度，放入數組
cellHeight = labelHeight + bottomMargin + bottomCubHeight;
[cellHeightTMPArray addObject:@(cellHeight)];
}
return cellHeightTMPArray;
}
@end
|
效果
-
就不給效果圖了哦，和上一張是一樣一樣的~
方案三：利用iOS 8新特性
其實，iOS8已經提供了直接通過XIB讓Cell高度自適應的方法了，只要簡單拖拖線，根本木有必要計算Cell高度，就可以搞定不等高Cell
第一步：設置tableView的估算Cell高度&rowHeight值為自動計算模式
| 1 2 3 4 5 6 |
- (void)viewDidLoad {
[super viewDidLoad];
self.tableView.estimatedRowHeight = 100; // 隨便設個不那麼離譜的值
self.tableView.rowHeight = UITableViewAutomaticDimension;
}
|
第二步：為Cell中最下麵的View設置約束 - 除了要定高、定寬、左上角粘著Label外，還要設置bottom距contentView的bottom間距為固定值，如0
bottomCub約束的添加方式
第三步：一定要註意 - 不能實現heightForRow代理方法！！！不能實現heightForRow代理方法！！！不能實現heightForRow代理方法！！！重要的事情說三遍...
iOS8新特性實現Cell高度的自適應
效果：一樣杠杠滴~
課題二：在哪計算Cell高度
方案一：在heightForRow代理方法中計算
-
示例代碼：見課題一方案一
-
說明：在這裡進行計算是非常糟糕的選擇，因為系統調用heightForRow方法非常頻繁 感興趣的小伙伴可以列印測試下...在這裡進行計算，意味著系統每調用一次heightForRow方法，就會執行一次高度計算...好可怕有木有?
方案二：在請求到數據後馬上計算
-
示例代碼：見課題一方案二
-
說明：在這裡進行計算相對於方案一來說進步了很多，在這裡計算是不錯的選擇哦！
方案三：在cellForRow代理方法中算
-
說明：其實，要隆重介紹的是方案三~
-
思路：
1.既然想知道Cell的高度，那麼一定是Cell自己最懂自己有多高啦（面向對象的思維）。
2.那麼，在哪裡能拿到Cell和Cell的高度呢？ - 當然是CellForRow代理方法中啦！
3.但是，在CellForRow中拿到Cell高度後，如何傳遞給heightForRow代理方法呢？ - 可以將Cell高度保存在一個數組中，或者保存在Cell對應的Model中~
4.但是，我們知道系統對tableView代理方法的調用順序，是先調取heightForRow再調取cellForRow的呀，這意味著，我們在cellForRow方法中拿到cell高度之前，就需要設置heightForRow...怎麼辦？
a.解決方案：實現estimatedHeightForRow代理方法！
b.實現這個代理方法後，系統會先調取cellForRow，再調取heightForRow，而且實現這個代理方法之後，腰不酸了，腿不疼了，一口氣上五樓也不費勁了~
-
示例代碼：可以參考下我之前的文章哦！傳送門 - iOS項目實例：QQ聊天界面UI搭建
-
註意：如果實現了estimatedHeightForRow代理方法，可能會造成tableView的ContentSize值不正確哦！所以，該方法請選擇使用...
結論
-
處理不等高TableViewCell，優先使用iOS8新特性（課題一方案三）
-
不能使用iOS8新特性的情況下，優先選擇課題一方案一+課題二方案三組合
-
不能用上面兩種，優先選擇使用課題一方案一+課題二方案二組合~
補充
tableView的contentSize電腦制
實驗方案
自定義一個tableView的子類，重寫setContentSize方法，在該方法中列印contentSizeHeight，觀察總結。
分兩組：第一組實現estimatedHeightForRow方法，第二組不實現。
-
第一組：section = 1 rowNumber = 5 | 估算行高10 | 實際行高100
-
第二組：section = 1 rowNumber = 5 | 未實現估算行高 | 實際行高100
實驗結果
第一組
實驗一 - 1組5行|估算行高10|實際行高100|計算contentSize.gif
第二組
實驗二 - 1組5行|不估算|實際行高100|計算contentSize.gif
實驗結論
-
viewDidAppear方法中拿到的contentSize才是準確的contentSize
-
contentSize至少會設置3次，如果估算行高與實際行高不符，會再次設置contentSize
未解之謎
-
通過列印我們可以看到，獲取cell之前，詭異地對heighForRow方法遍歷了三次...為什麼是三次？
-
為什麼最少設置3次contentSize，不能只設置1次嗎？
-
能否把返回Cell的方法和heightForRow方法合併成一個代理方法？
