UITableViewcell autolayout下動態高度

項目中最常用的一個UI就是UITableView了。iOS七、8進一步優化了複用機制,用起來至關爽。配合Autolayout,適配工做減輕了很是多。ide

曾經作適配工做都是在heightForRow裏邊先計算出來Cell的高度。而後再CellForRow寫適配代碼。工做量儘管不是很是大,但是很是繁瑣。佈局

相對於這樣的寫法,假設減去計算height這步,工做量天然下降很是多。首先給出一種我媳婦給提供的方法,這是她作聊天UI時由於過分計算而怒創的方法發火,當時我看到就震驚了,以後我就一直用這種方法害羞優化



使用這中方法就能夠省反覆計算frame的操做,計算一次佈局就能夠。this



現在IOS七、8都出來這麼久了,autolayout也炒的很是熱。現在看了下確實方便了很是多。比我在iOS6方便多了。atom

前兩天看了下autolayout,現在結合tableviewcell試試效果。看了幾個demo,發現iOS7跟iOS8不同,iOS8更加簡單。spa

第1、iOS7 tableviewcell + autolayoutcode


使用storyboard簡單建立一個project。並加入例如如下約束(不熟悉約束加入方法的可參考我以前的博客autolayout)博客

關聯project文件,Cell連線,複用標識符等(不熟悉。可參考我以前的博客):it




重頭戲來了,代碼中改怎樣改動:io

cellForRow依舊是咱們以前的寫法,賦值:

<span style="color:#993399;">- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
    TestCell *cell = [tableView dequeueReusableCellWithIdentifier:@"testCell" forIndexPath:indexPath];
    NSLog(@"cell create...");
    if (!cell) {
        NSLog(@"cell is nil!");
    }
    cell.ts_label.text = self.data[indexPath.row];

    return cell;
}</span>

重點在於計算height,改動方法例如如下:

<span style="color:#993399;">- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath
{
    TestCell* cell = [tableView dequeueReusableCellWithIdentifier:@"testCell"];

    cell.ts_label.text = self.data[indexPath.row];
    CGSize size = [cell.contentView systemLayoutSizeFittingSize:UILayoutFittingCompressedSize];
    NSLog(@"size = %@ %lf",NSStringFromCGSize(size),    cell.ts_label.preferredMaxLayoutWidth
);

    return size.height + 1;
}
</span>


有三點需要注意:

第一點:不要在heightForRow使用

- (id)dequeueReusableCellWithIdentifier:(NSString *)identifier forIndexPath:(NSIndexPath *)indexPath

你會發現進入了死循環。heightForRow->cellforRow->hei...Row

第二點:使用systemLayoutSizeFittingSize,他會依據約束條件算出來新的size,(因此約束條件必定要準確,很是多BUG都是因爲約束有問題)

它有兩種參數:

UIKIT_EXTERN const CGSize UILayoutFittingCompressedSize NS_AVAILABLE_IOS(6_0);//緊湊,大小適中的最小尺寸

UIKIT_EXTERN const CGSize UILayoutFittingExpandedSize NS_AVAILABLE_IOS(6_0);//寬鬆

第三點:新的size計算的是contentview的size,Cell.size.height = content view.size.height+1,記得加上一個切割線的高度。


好的到這裏看看執行效果:



咋一看感受效果實現了,細緻觀察發現label的高度算的不正確。第三行label不只僅有三行,因此這個size算的不許。


通過研究發現,這個時候需要給label一個寬度值,這樣才幹算出來所需要的高度。

可以設置label的這個屬性來固定寬度。

// Support for constraint-based layout (auto layout)

// If nonzero, this is used when determining -intrinsicContentSize for multiline labels

@property(nonatomic) CGFloat preferredMaxLayoutWidth NS_AVAILABLE_IOS(6_0);


咱們改動heightForRow的方法: 
- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath
{
    TestCell* cell = [tableView dequeueReusableCellWithIdentifier:@"testCell"];
    cell.ts_label.preferredMaxLayoutWidth = 260;
    cell.ts_label.text = self.data[indexPath.row];
    CGSize size = [cell.contentView systemLayoutSizeFittingSize:UILayoutFittingCompressedSize];
    NSLog(@"size = %@ %lf",NSStringFromCGSize(size),    cell.ts_label.preferredMaxLayoutWidth
);

    return size.height + 1;
}

跑起來看看效果:


這纔像個樣子,哇哈哈。

這個屬性也可以在storyboard中設置:







第2、iOS8 tableviewcell + autolayout


iOS7的方法已經簡單很是多了,只是iOS8更加簡單:iOS8僅僅需要兩行代碼加上約束就能夠完畢適配!

驚恐有木有很是誇張!!

看方法:

<span style="color:#993399;">- (void)viewDidLoad {
</span><span style="color:#663366;">    [super viewDidLoad];
    
    self.data = @[@"hahahahahahahahahahahaha",@"gagagaga",@"lalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalalala",@"wawawawawawawawawawawawawawawawawawawawa",@"papapapapapapapapapapapapapapapapapapapapapapapapapapapapapapapapapapapapapapapapapapapapapapapapapapapapapapapapapapapapapapapapapapapapapapapapapapapa",@""];
    self.tableView.estimatedRowHeight = 120;
    self.tableView.rowHeight = UITableViewAutomaticDimension;

}</span>


<span style="color:#663366;">- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
    TestCell *cell = [tableView dequeueReusableCellWithIdentifier:@"testCell" forIndexPath:indexPath];
    NSLog(@"cell create...");
    if (!cell) {
        NSLog(@"cell is nil!");
    }
    cell.ts_label.text = self.data[indexPath.row];

    return cell;
}</span>

看到沒有,iOS8設置都不需要heightForRow了。僅僅需要設置下預估高度

<span style="color:#663366;">estimatedRowHeight</span>
<span style="color:#663366;"></span><pre name="code" class="objc"><span style="color:#663366;">rowHeight = UITableViewAutomaticDimension</span>

 

iOS7優化了tableview,獲取Cell高度再也不是一次性全部載入heightForRow。而後再生成Cell。而是先調用:

- (CGFloat)tableView:(UITableView *)tableView estimatedHeightForRowAtIndexPath:(NSIndexPath *)indexPath


等Cell真正要呈現的時候在調用heightForRow。


真實的效果呢



高端大氣上檔次啊,哇哈哈。

看看其它機型




哈哈,就是這麼簡單,Cell就是配好了!

!!





總結一下:iOS7需要注意preferredMaxLayoutWidth的設置,iOS8需要設置estimatedRowHeight、rowHeight = UITableViewAutomaticDimension。更加註意的是約束的準確!

!。大笑

相關文章
相關標籤/搜索