iOS自適應(yīng)cell行高的那點(diǎn)破事兒
前言
其實(shí)早就準(zhǔn)備寫這篇文章了,但是一直沒有系統(tǒng)去整理一下相關(guān)的demo,加上最近離職了,各種事情忙的有點(diǎn)郁悶,所以一直拖沓了下來?;丶倚菹⒘艘欢螘r(shí)間想起來寫了一半的demo,在還沒找工作的這段空擋時(shí)間抽空完善了一下再寫篇說明文檔備忘一下。
需求背景
iOS的cell行高自適應(yīng)是個(gè)非常常見的需求,也是一個(gè)非常簡單的需求,之前我遇到過很多小伙伴不知道怎么來實(shí)現(xiàn),在這里就一步步的來分析一下,供大家參考。
問題分析
其他的實(shí)現(xiàn)場景就不說了,我們現(xiàn)在來分析一下具體的需求,如圖所示:
cell行高自適應(yīng).png
其實(shí)主要實(shí)現(xiàn)這幾點(diǎn)就可以解決所謂的自適應(yīng)行高的問題,下面我們就來逐步實(shí)現(xiàn)這個(gè)需求。
計(jì)算UITableViewCell的高度
說到計(jì)算高度,大家都不陌生,最簡單常見的就是計(jì)算出每個(gè)子視圖的高度累積起來返回我們所需要的cell高度,然后在UITableViewDelegate中調(diào)用:
- - (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath
- {
- return 666;
- }
或者高度固定的情況下直接
- self.tableView.rowHeight = 666;
但是這就要求我們需要提前拿到model中的數(shù)據(jù)來手動(dòng)計(jì)算每個(gè)控件的高度,這樣既麻煩又不能通用,所以在autolayout出來之后我們只要給cell的contentView的上下左右都添加了約束,系統(tǒng)就可以自動(dòng)的幫我們實(shí)現(xiàn)高度的自適應(yīng),就是一定要保證cell的高度可以被子視圖撐開就可以了,利用的是systemLayoutSizeFittingSize這個(gè)API;
iOS8之后就更簡單了,直接使用:
- self.tableView.estimatedRowHeight = 666;
- self.tableView.rowHeight = UITableViewAutomaticDimension;
就可以了,其中estimatedRowHeight是預(yù)估高度,這里要注意delegate中的返回高度方法就不用在寫了。
關(guān)于這方面的文章,UITableView+FDTemplateLayoutCel的作者寫的一篇文章十分詳細(xì),建議先去了解一下(優(yōu)化UITableViewCell高度計(jì)算的那些事)
但是這個(gè)方法實(shí)際上在有多個(gè)子視圖的cell上滑動(dòng)是很卡頓的,特別是在iOS8尤其是iOS10上卡頓尤為明顯,這跟系統(tǒng)的算高機(jī)制有一定關(guān)系,具體可以看上面的文章,這里不再解釋了。
如果脫離開autolayout來說,平時(shí)計(jì)算高度的話,最開始都是根據(jù)cell內(nèi)子控件內(nèi)容的高度來手動(dòng)累加起來,但是這個(gè)方法每次都要去手動(dòng)處理其中的算高邏輯,而且橫豎屏切換的時(shí)候還要重新計(jì)算,在平時(shí)開發(fā)中就會(huì)浪費(fèi)大量不必要的精力。所以后來我在項(xiàng)目中是通過調(diào)用layoutSubviews來獲取到子控件的實(shí)際frame,這樣就可以得到我們所需的cell高度值,如下代碼所示:
- cell.frame = CGRectSetWidth(cell.frame, contentViewWidth);
- cell.contentView.frame = CGRectSetWidth(cell.contentView.frame, CGRectGetWidth(tableView.frame));
- [cell layoutIfNeeded];
- UIView *cellBottomView = nil;
- if (cell.FS_cellBottomView) {
- cellBottomView = cell.FS_cellBottomView;
- }else if (cell.FS_cellBottomViews && cell.FS_cellBottomViews.count > 0) {
- cellBottomView = cell.FS_cellBottomViews[0];
- for (UIView *view in cell.FS_cellBottomViews) {
- if (CGRectGetMaxY(view.frame) > CGRectGetMaxY(cellBottomView.frame)) {
- cellBottomView = view;
- }
- }
- }else {
- NSArray *contentViewSubViews = cell.contentView.subviews;
- if (contentViewSubViews.count == 0) {
- cellBottomView = cell.contentView;
- }else{
- cellBottomView = contentViewSubViews[0];
- for (UIView *view in contentViewSubViews) {
- if (CGRectGetMaxY(view.frame) > CGRectGetMaxY(cellBottomView.frame)) {
- cellBottomView = view;
- }
- }
- }
- }
- CGFloat cellHeight = CGRectGetMaxY(cellBottomView.frame) + bottomOffset;
其中的cellBottomView是位于cell***部的子視圖,為了提高計(jì)算效率***傳入,如果不確定哪個(gè)子視圖在最下面,可以傳入一個(gè)視圖數(shù)組contentViewSubViews,詳細(xì)使用方式可以查看demo。
緩存cell高度
高度計(jì)算出來后,正常來說我們的需求已經(jīng)達(dá)到了,但是如果這個(gè)高度值每次滑動(dòng)的時(shí)候由于cell的復(fù)用機(jī)制都會(huì)重新計(jì)算,若果這個(gè)cell的自定義樣式很復(fù)雜,子視圖太多,那么大量的計(jì)算一定會(huì)損耗性能而導(dǎo)致明顯的卡頓,所以緩存機(jī)制就是個(gè)必要的措施,更何況蘋果也建議這樣做;
demo提供了兩個(gè)計(jì)算行高的API:
- /**
- cell自動(dòng)計(jì)算行高
- @param tableView tableView
- @param indexPath indexPath
- @param contentViewWidth cell內(nèi)容寬度,不確定可傳0
- @return cell高度
- */
- + (CGFloat)FSCellHeightForTableView:(UITableView *)tableView indexPath:(NSIndexPath *)indexPath cellContentViewWidth:(CGFloat)contentViewWidth bottomOffset:(CGFloat)bottomOffset;
- /**
- cell自動(dòng)計(jì)算行高優(yōu)化版
- @param tableView tableView
- @param indexPath indexPath
- @param cacheKey 當(dāng)前cell唯一標(biāo)識(shí)符
- @param contentViewWidth cell內(nèi)容寬度,不確定可傳0
- @return cell高度
- */
- + (CGFloat)FSCellHeightForTableView:(UITableView *)tableView indexPath:(NSIndexPath *)indexPath cacheKey:(NSString *)cacheKey cellContentViewWidth:(CGFloat)contentViewWidth bottomOffset:(CGFloat)bottomOffset;
***種使用數(shù)組來做緩存,傳入對(duì)應(yīng)cell的indexPath作為數(shù)組索引值;第二種則采用字典來緩存數(shù)據(jù),要求傳入一個(gè)唯一標(biāo)識(shí)符cacheKey來區(qū)分;
兩種方式都可以準(zhǔn)確獲得cell高度,***種實(shí)現(xiàn)更簡潔,缺點(diǎn)就是數(shù)據(jù)源發(fā)生變化時(shí),所有的緩存就會(huì)清空重新計(jì)算后緩存,比如reloadData的時(shí)候;第二種就是在前者的基礎(chǔ)上添加一個(gè)區(qū)分不同cell的標(biāo)識(shí)符,使用時(shí)還是建議使用第二種,不會(huì)清空緩存數(shù)據(jù),輕量級(jí)頁面沒什么區(qū)別??傊畠煞N方法都做了緩存數(shù)據(jù)的容錯(cuò)處理,支持以下方法:
- @selector(reloadData),
- @selector(insertSections:withRowAnimation:),
- @selector(deleteSections:withRowAnimation:),
- @selector(reloadSections:withRowAnimation:),
- @selector(moveSection:toSection:),
- @selector(insertRowsAtIndexPaths:withRowAnimation:),
- @selector(deleteRowsAtIndexPaths:withRowAnimation:),
- @selector(reloadRowsAtIndexPaths:withRowAnimation:),
- @selector(moveRowAtIndexPath:toIndexPath:)
兼容橫豎屏
這個(gè)需求實(shí)現(xiàn)較為簡單,就是橫屏和豎屏分別采用兩套緩存數(shù)據(jù),互不影響,切換橫豎屏的時(shí)候自動(dòng)切換數(shù)據(jù)源。
- - (NSMutableArray *)indexCacheArrForCurrentOrientation
- {
- return UIDeviceOrientationIsPortrait([UIDevice currentDevice].orientation) ? self.indexCacheArr_Portrait: self.indexCacheArr_Landscape;
- }
***實(shí)現(xiàn)的效果如圖所示:



























