使用autolayout自定義動態高度的cell
字數1570閱讀2726評論11喜歡21
關于使用autolayout創建動態cell，網上也有不少的文章，但是里面的內容都是說的一個問題，簡稱換湯不換藥，都是說的一些UILabel或者UITextView等等一些控件顯示的文本內容不同來實現不同的高度。
但是我們平常使用的自定義cell很多都是顯示不同數量的控件，來顯示不同的高度，比如微博首頁，餓了么首頁那些cell，都是下面顯示不同數量的控件來顯示不同高度的cell，那么下面就讓我們一起看看怎么使用autolayout實現這種自定義cell
關于使用autolayout實現cell動態高度有兩種實現方式
iOS8以后
iOS8以后比較爽：只需要設置下面兩句代碼就行了
//設置cell的估計高度self.tableView.estimatedRowHeight=200;//iOS以后這句話是默認的，所以可以省略這句話self.tableView.rowHeight=UITableViewAutomaticDimension;
你可能沒有看到實現代理方法返回cell高度。明確告訴你iOS8以后不需要實現了，系統會自動推斷出cell的高度。
but，iOS7還是需要
下面就是iOS7實現的方式，還是需要實現這個方法，iOS8那兩句代碼不寫也可以
//如果要支持iOS7這個方法必須實現-(CGFloat)tableView:(UITableView*)tableView heightForRowAtIndexPath:(NSIndexPath*)indexPath {//其他代碼//自動算高度，+1的原因是因為contentView的高度要比cell的高度小1CGFloatheight = [cell.contentViewsystemLayoutSizeFittingSize:UILayoutFittingCompressedSize].height+1;returnheight;}
主要就是下面這句代碼，能自動計算出contentView的高度和寬度
CGFloatheight = [cell.contentViewsystemLayoutSizeFittingSize:UILayoutFittingCompressedSize].height+1;
上面這兩種方式可以一起存在，既支持ios7也支持iOS8.
開始demo
先來看一下我們最終的效果：
效果圖
有的cell只有一個UITextLabel,并且label會根據內容的多少來改變高度
有的cell下面還有一個UIButton，并且cell會根據有沒有button來動態改變高度
實現思路
首先自定義一個cell，順便創建一個xib文件
在xib文件中把所有包含的控件全部搞上去，設置好約束
如果不需要哪個控件顯示就把哪個控件的高約束設置為0
如果需要顯示哪個控件就保證這個控件沒有高度約束（應該容易想的到因為是動態高度的cell，所以不能有高度的約束）
然后更新約束，顯示cell
在這里我們使用xib的方式創建自定義cell
如圖：
這里設置約束有幾個注意點
每一個控件都只設置上下左右的約束，不設置寬高的約束，有些必須要固定大小的可以設置一下
有些控件如果不設置寬高xib會報錯的話，就設置占位符placehoder
像一些要消失或者顯示的控件，最好設置他與其他顯示的控件間距為0
這是我自定義cell的類
在控制器中我們實現數據源代碼
- (void)viewDidLoad {? ? [superviewDidLoad];? ? [self.tableViewregisterNib:[UINibnibWithNibName:@"MyTableViewCell"bundle:nil] forCellReuseIdentifier:@"cell"];self.tableView.allowsSelection=NO;//胡亂寫的，為了懶省事，大家湊合著看吧self.tableData= @[@"1\n2\n3\n4\n5\n6",@"123456789012345678901234567890",@"1\n2",@"1\n2\n3",@"123456789012345678901234567890",@"1\n2\n3\n4\n5\n6",@"123456789012345678901234567890",@"1\n2",@"1\n2\n3",@"123456789012345678901234567890",@"1\n2\n3",@"1\n2\n3",@"123456789012345678901234567890",@"1\n2",@"1\n2\n3",@"123456789012345678901234567890",@"1\n2\n3",@"1\n2\n3"@"123456789012345678901234567890",@"1\n2",@"1\n2\n3",@"123456789012345678901234567890",@"1\n2\n3",@"1\n2\n3"@"123456789012345678901234567890",@"1\n2",@"1\n2\n3",@"123456789012345678901234567890",@"1\n2\n3",@"1\n2\n3"@"123456789012345678901234567890",@"1\n2",@"1\n2\n3",@"123456789012345678901234567890",@"1\n2\n3",@"1\n2\n3"@"123456789012345678901234567890",@"1\n2",@"1\n2\n3",@"123456789012345678901234567890",@"1\n2\n3",@"1\n2\n3"];}-(NSInteger)numberOfSectionsInTableView:(UITableView*)tableView {return1;}-(NSInteger)tableView:(UITableView*)tableView numberOfRowsInSection:(NSInteger)section {returnself.tableData.count;}-(UITableViewCell*)tableView:(UITableView*)tableView cellForRowAtIndexPath:(NSIndexPath*)indexPath {? ? MyTableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:@"cell"];? ? cell.text=self.tableData[indexPath.row];returncell;}
我們先使用iOS8的方法
接下來就是去自定義cell類(MyTableView.m)中重寫-updateConstraints 方法
-(void)updateConstraints {//remove Constraints[self.heightuninstall];//add Constraints[self.contentmas_makeConstraints:^(MASConstraintMaker *make) {self.height= make.height.equalTo(@60);//any number}];if(self.isShowView==NO) {//change Height Constrains to be 0[self.contentmas_updateConstraints:^(MASConstraintMaker *make) {? ? ? ? ? ? make.height.equalTo(@0);? ? ? ? }];? ? }else{//remove Constraints[self.heightuninstall];? ? }? ? [superupdateConstraints];}
如果不需要顯示就設置高度約束為0
如果需要顯示就把高度約束去掉
這個方法超級重要，有些view需要顯示的話，一定要把高度約束去掉，不然cell循環使用的話會出問題。
然后就是設置要顯示的text
-(void)setText:(NSString*)text {? ? _text=text;self.textView.text= text;if([self.textisEqualToString:@"123456789012345678901234567890"]) {self.isShowView=NO;self.button.hidden=YES;self.content.hidden=YES;self.intextView.hidden=YES;? ? }else{self.isShowView=YES;self.button.hidden=NO;self.content.hidden=NO;self.intextView.hidden=NO;? ? }}
接下來在Controller文件中
將cellForRowAtIndexPath方法改為下面樣子
-(UITableViewCell*)tableView:(UITableView*)tableView cellForRowAtIndexPath:(NSIndexPath*)indexPath {? ? MyTableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:@"cell"];? ? cell.text=self.tableData[indexPath.row];//返回cell之前重新刷新約束，重新計算高度[cell setNeedsUpdateConstraints];? ? [cell updateConstraintsIfNeeded];returncell;}
然后在-viewDidLoad方法中增加兩句話就行了
self.tableView.estimatedRowHeight=200;self.tableView.rowHeight=UITableViewAutomaticDimension;
接下來是支持iOS7的
只需要重寫代碼方法heightForRowAtIndexPath
將這個方法內容改為下面這樣：
//如果要支持iOS7這個方法必須實現-(CGFloat)tableView:(UITableView*)tableView heightForRowAtIndexPath:(NSIndexPath*)indexPath {self.cell= (MyTableViewCell *)[tableView dequeueReusableCellWithIdentifier:@"cell"];? ? MyTableViewCell *cell =self.cell;? ? cell.text= [self.tableDataobjectAtIndex:indexPath.row];//這句代碼必須要有，也就是說必須要設定contentView的寬度約束。//設置以后，contentView里面的內容才知道什么時候該換行了CGFloatcontentViewWidth =CGRectGetWidth(self.tableView.frame);? ? [cell.contentViewmas_makeConstraints:^(MASConstraintMaker *make) {? ? ? ? make.width.equalTo(@(contentViewWidth));? ? }];//重新加載約束,每次計算之前一定要重新確認一下約束[cell setNeedsUpdateConstraints];? ? [cell updateConstraintsIfNeeded];//自動算高度，+1的原因是因為contentView的高度要比cell的高度小1CGFloatheight = [cell.contentViewsystemLayoutSizeFittingSize:UILayoutFittingCompressedSize].height+1;returnheight;}
