iOS UITableView+FDTemplateLayoutCell 配合AutoLayout分分鐘教你實(shí)現(xiàn)類(lèi)似微信朋友圈的動(dòng)態(tài)高度自適應(yīng)

11.30日更新,實(shí)現(xiàn)了簡(jiǎn)單的微信朋友圈,點(diǎn)贊,評(píng)論,圖片,高度自適應(yīng),下拉展開(kāi)等各種效果Demo

點(diǎn)擊打開(kāi)鏈接

11.10更新

這種高度自適應(yīng)的Label切記一定要加上這個(gè)屬性

preferredMaxLayoutWidth

不然你會(huì)死的很難看

11.4日更新 ?用這個(gè)庫(kù)實(shí)現(xiàn)了類(lèi)似微信朋友圈的簡(jiǎn)單排版點(diǎn)擊打開(kāi)鏈接

這里我沒(méi)這么考慮性能,只是簡(jiǎn)單先做了這個(gè)功能,tableViewcell里面嵌套了collectionView來(lái)進(jìn)行圖片的布局,效果如下,咱們先不考慮性能,這種情況下切記不能調(diào)用帶有緩存的方法cacheByIndex的方法,由于內(nèi)部是動(dòng)態(tài)的,一定要用(只能犧牲性能了)

[objc]view plaincopy

return[tableViewfd_heightForCellWithIdentifier:identifyconfiguration:^(ConsultDetailTableViewCell*cell)?{

[selfconfigCell:cellindexpath:indexPath];

}];

UITableView里面的Cell固定高度那是基本不可能了,很多功能和界面都會(huì)涉及到高度自適應(yīng),而且電商類(lèi)的尤其普遍,之前都是自己算啊算,代碼寫(xiě)的非常多,邏輯還沒(méi)寫(xiě),光這布局UI和高度計(jì)算都能接近1000了,寫(xiě)完之后關(guān)鍵出點(diǎn)Bug整個(gè)人都不好了

當(dāng)時(shí)的是這樣的:

突然在github上看到UITableView+FDTemplateLayoutCell這個(gè)庫(kù)

傳送門(mén):點(diǎn)擊打開(kāi)鏈接

剛看到的時(shí)候是這樣的:

能 ?用 ? 么 ??? 真 ?的 ?這 ?么 叼 ???

第一次用的時(shí)候是這樣的:

哥們,你是在逗我么,這什么鬼,從來(lái)沒(méi)見(jiàn)過(guò)這樣的場(chǎng)面,當(dāng)時(shí)我就懵逼了。。。。。。

用了幾次之后就出效果了,是這樣的:

哎呦,不錯(cuò)呦。。。。。。感覺(jué)真的有點(diǎn)叼啊

OK 看下基本流程

由于咱們還是用IB來(lái)布局,操作NSConstraintLayout類(lèi)來(lái)進(jìn)行計(jì)算,所以先把官網(wǎng)上給出的布局案例貼出來(lái),如下

注:

a fullyself-satisfiedcell is constrainted by auto layout and each edge("top", "left", "bottom", "right") has at least one layout constraint against it

一個(gè)自適應(yīng)高度的cell用Autolayout來(lái)進(jìn)行約束,內(nèi)部所有控件的約束整合起來(lái),距離Cell四個(gè)邊的(top left bottom right)至少要各出現(xiàn)一次,不然就是bad one

如下圖所示:

箭頭所指的方向必須出現(xiàn)至少一次才是一套完整的約束

1.首先新建個(gè)工程,造一個(gè)TableView出來(lái),設(shè)置好代理,布局好基本框架

2.然后弄一個(gè)Cell,布局玩之后把關(guān)鍵箭頭所指的兩個(gè)約束拖出來(lái),以后要用,先看下主要布局,Demo最后給

3.我自己找了幾個(gè)數(shù)據(jù)源出來(lái),我個(gè)人遇到的是,如果每個(gè)cell有圖片,或者沒(méi)圖片,而且圖片的高度不等,那么服務(wù)器也要求返回具體的圖片寬和高,利于我們直接拿來(lái)進(jìn)行等比例計(jì)算,然后在下面這個(gè)代理方法布局的時(shí)候進(jìn)行操作

[objc]view plaincopy

-(UITableViewCell*)tableView:(UITableView*)tableViewcellForRowAtIndexPath:(NSIndexPath*)indexPath

{

MKJTableViewCell*cell?=?[tableViewdequeueReusableCellWithIdentifier:identifyforIndexPath:indexPath];

[selfconfigCell:cellindexpath:indexPath];//!<?該方法等下也會(huì)用到

returncell;

}

[objc]view plaincopy

最關(guān)鍵的方法

[objc]view plaincopy

-?(void)configCell:(MKJTableViewCell*)cellindexpath:(NSIndexPath*)index

{

//?獲取模型

MKJModel*model?=self.dataSource[index.row];

__weak?typeof(cell)?weakCell?=?cell;

//?配置用戶頭像的的圖片,以下操作是讓圖片0-1的漸現(xiàn)的動(dòng)畫(huà)

[cell.headImageViewsd_setImageWithURL:[NSURLURLWithString:model.headImageURL]completed:^(UIImage*image,NSError*error,?SDImageCacheType?cacheType,NSURL*imageURL)?{

if(image?&&?cacheType?==?SDImageCacheTypeNone)?{

weakCell.headImageView.alpha=0;

[UIViewanimateWithDuration:1.0animations:^{

weakCell.headImageView.alpha=1.0;

}];

}

else

{

weakCell.headImageView.alpha=1.0;

}

}];

//?用戶名

cell.userName.text=?model.userName;

//?用戶描述

cell.descLabel.text=?model.desc;

//?當(dāng)圖片存在的時(shí)候

if(![model.mainImageURLisEqualToString:@""])

{

//?圖片不隱藏

cell.mainImageView.hidden=NO;

//?配置主圖的方法,同頭像

[cell.mainImageViewsd_setImageWithURL:[NSURLURLWithString:model.mainImageURL]completed:^(UIImage*image,NSError*error,?SDImageCacheType?cacheType,NSURL*imageURL)?{

if(image?&&?cacheType?==?SDImageCacheTypeNone)?{

weakCell.mainImageView.alpha=0;

[UIViewanimateWithDuration:1.0animations:^{

weakCell.mainImageView.alpha=1.0;

}];

}

else

{

weakCell.mainImageView.alpha=1.0;

}

}];

//?我們進(jìn)行等比例計(jì)算出剛才那個(gè)主圖高度的約束

cell.mainHeightConstraint.constant=?(model.mainHeight*375)?/?model.mainWidth;

//?底部描述具體圖片底部的約束固定為19

cell.descTopConstraint.constant=19;

}

//?圖片沒(méi)有的時(shí)候,只顯示描述

{

//?主要圖片隱藏

cell.mainImageView.hidden=YES;

//?主圖的高度越是為0??其實(shí)也代表了隱藏了

cell.mainHeightConstraint.constant=0;

//?底部如果約束還是19的話,會(huì)拉的太長(zhǎng),所以咱們讓他為0

cell.descTopConstraint.constant=0;

}

}

4.那么見(jiàn)證奇跡的時(shí)刻到了,按官方說(shuō)法是這樣的:

[objc]view plaincopy

#import?

-?(CGFloat)tableView:(UITableView*)tableViewheightForRowAtIndexPath:(NSIndexPath*)indexPath?{

return[tableViewfd_heightForCellWithIdentifier:@"identifer"cacheByIndexPath:indexPathconfiguration:^(idcell)?{

//?配置?cell?的數(shù)據(jù)源,和?"cellForRow"?干的事一致,比如:

[selfconfigCell:(UITableViewCell*)cellindexPath:(NSIndexPath*)indexPath];

}];

}

人家都說(shuō)了,一句話搞定,反正我是這樣的:

[objc]view plaincopy

-?(CGFloat)tableView:(UITableView*)tableViewheightForRowAtIndexPath:(NSIndexPath*)indexPath

{

return[tableViewfd_heightForCellWithIdentifier:identifycacheByIndexPath:indexPathconfiguration:^(MKJTableViewCell*cell)

{

[selfconfigCell:cellindexpath:indexPath];

}];

}

我覺(jué)得挺好用的,還是要感謝下有那么牛B的作者!

行注目禮!!!作者一生平安!!!

讓我們輕松愉快,不用再糾結(jié)于算Frame了,簡(jiǎn)單效果如下

本次展示Demo的Github地址:Demo地址,需要的點(diǎn)我各位有啥意見(jiàn)就告訴我,虛心求教

Over~~~~~~~~~~~~~~~~~~

轉(zhuǎn)載地址:http://blog.csdn.net/deft_mkjing/article/details/51569605

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 229,117評(píng)論 6 537
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡,警方通過(guò)查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 98,860評(píng)論 3 423
  • 文/潘曉璐 我一進(jìn)店門(mén),熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái),“玉大人,你說(shuō)我怎么就攤上這事。” “怎么了?”我有些...
    開(kāi)封第一講書(shū)人閱讀 177,128評(píng)論 0 381
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)。 經(jīng)常有香客問(wèn)我,道長(zhǎng),這世上最難降的妖魔是什么? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 63,291評(píng)論 1 315
  • 正文 為了忘掉前任,我火速辦了婚禮,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 72,025評(píng)論 6 410
  • 文/花漫 我一把揭開(kāi)白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上,一...
    開(kāi)封第一講書(shū)人閱讀 55,421評(píng)論 1 324
  • 那天,我揣著相機(jī)與錄音,去河邊找鬼。 笑死,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,477評(píng)論 3 444
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來(lái)了?” 一聲冷哼從身側(cè)響起,我...
    開(kāi)封第一講書(shū)人閱讀 42,642評(píng)論 0 289
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒(méi)想到半個(gè)月后,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 49,177評(píng)論 1 335
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 40,970評(píng)論 3 356
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 43,157評(píng)論 1 371
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 38,717評(píng)論 5 362
  • 正文 年R本政府宣布,位于F島的核電站,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 44,410評(píng)論 3 347
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 34,821評(píng)論 0 28
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)。三九已至,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 36,053評(píng)論 1 289
  • 我被黑心中介騙來(lái)泰國(guó)打工, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 51,896評(píng)論 3 395
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 48,157評(píng)論 2 375

推薦閱讀更多精彩內(nèi)容