UITableViewCell高度自適應(yīng)方案(一)

Copyright ? 2017年ZaneWangWang. All rights reserved.

根據(jù)項目需求實現(xiàn)功能一步步分析得到實現(xiàn)思路,最終產(chǎn)生的解決方案才是最有效的,如果你看到的不是原文請點擊查看原文

一.項目效果介紹以及需求分析

1.最近項目涉及到一個社交圈的界面,如下圖所示的效果:

效果圖

2.需求介紹:在這個表中cell的子控件中,用戶發(fā)表的feeling文字要求高度自適應(yīng),發(fā)表的圖片最多為6張,可以隨機發(fā)表1~6張所以cell得整體高度主要有這兩塊的動態(tài)高度加上發(fā)表時間以及nickName不變高度的和決定烤芦。


二.方案以及實現(xiàn)

1.根據(jù)需求分析我使用xib布局了如下cell圖:

cell布局方案

方案分析:其中由于h_1部分和h_2部分是可變的,因此我將這兩個高度約束暴露在cell的實現(xiàn)文件.m中

@property (weak, nonatomic) IBOutlet NSLayoutConstraint *header_h;

@property (weak, nonatomic) IBOutlet NSLayoutConstraint *image_h;

2.請求數(shù)據(jù)的處理,首先在創(chuàng)建model的屬性時,給model兩個緩存以上提及的兩個可變高度屬性,如下加粗的兩個屬性。

#import@interface SocialCircleModel : NSObject

//請求屬性

@property (strong, nonatomic) NSMutableArray *Images;

@property (strong, nonatomic) NSString *content;

@property (strong, nonatomic) NSString *totalComments;

@property (strong, nonatomic) NSString *Id;

@property (strong, nonatomic) NSString *totalPraise;

@property (strong, nonatomic) NSString *createBy;

@property (strong, nonatomic) NSString *imgHead;

@property (strong, nonatomic) NSString *createTime;

@property (strong, nonatomic) NSString *nickName;

//緩存一個可變高度給model

@property (assign, nonatomic) CGFloat header_h;

@property (assign, nonatomic) CGFloat images_h;

@end

重寫封裝model類的mj的方法如下,其中重點是根據(jù)數(shù)據(jù)源計算文字高度和搜有圖片展示所需的高度并緩存給model

+ (NSDictionary *)mj_replacedKeyFromPropertyName{

return @{@"Id":@"id"};

}

+ (instancetype)mj_objectWithKeyValues:(id)keyValues{

SocialCircleModel *model = [super mj_objectWithKeyValues:keyValues];

//替換出請求道德圖片url

[model.Images enumerateObjectsUsingBlock:^(NSDictionary? *_Nonnull obj, NSUInteger idx, BOOL * _Nonnull stop) {

[model.Images replaceObjectAtIndex:idx withObject:obj[@"imgUrl"]];

}];

//header的高度

float feelingH = [model.content getTextHeightWithShowWidth:kScreen_W - 74.0f AndTextFont:[UIFont systemFontOfSize:13.0f] AndInsets:4.0f];

if (feelingH + 50.0f < 64.0f) {

model.header_h = 64.0f;

}

else{

model.header_h = feelingH + 50.0f;

}

//圖片集的高度

float imageH = (kScreen_W - 40.0f) / 3.0f;

if (model.Images.count == 0){

model.images_h = 0;

}

else if (model.Images.count <= 3) {

model.images_h = 10.0f + imageH;

}

else{

model.images_h = 15.0f + imageH * 2.0f;

}

return model;

}

3.以上可以說就是準備工作了,接下來就非常簡單了,根據(jù)model的緩存高給定cell的高度即可,以下cell的配置和行高配置的兩個代理方法的實現(xiàn)

- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath{

SocialCircleModel *model = _dataSource[indexPath.row];

//每個cell高度根據(jù)model緩存高度適配

return? model.header_h + model.images_h + 42.0f;

}

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{

SocialCircleTableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:@"socailCell" forIndexPath:indexPath];

//cell配置數(shù)據(jù)

cell.model = _dataSource[indexPath.row];

return cell;

}

這樣的話,我們在得到網(wǎng)絡(luò)數(shù)據(jù)刷新table的時候高度就是已經(jīng)緩存好在model中的數(shù)據(jù),直接取就好了。

保留所有權(quán),未經(jīng)允許禁止轉(zhuǎn)載。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末释牺,一起剝皮案震驚了整個濱河市台猴,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌做入,老刑警劉巖臊泰,帶你破解...
    沈念sama閱讀 210,978評論 6 490
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件蛉加,死亡現(xiàn)場離奇詭異,居然都是意外死亡缸逃,警方通過查閱死者的電腦和手機针饥,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 89,954評論 2 384
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來需频,“玉大人轰异,你說我怎么就攤上這事枫夺∽莸” “怎么了?”我有些...
    開封第一講書人閱讀 156,623評論 0 345
  • 文/不壞的土叔 我叫張陵藐守,是天一觀的道長。 經(jīng)常有香客問我蹂风,道長卢厂,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 56,324評論 1 282
  • 正文 為了忘掉前任惠啄,我火速辦了婚禮慎恒,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘礁阁。我一直安慰自己巧号,他們只是感情好族奢,可當我...
    茶點故事閱讀 65,390評論 5 384
  • 文/花漫 我一把揭開白布姥闭。 她就那樣靜靜地躺著,像睡著了一般越走。 火紅的嫁衣襯著肌膚如雪棚品。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 49,741評論 1 289
  • 那天廊敌,我揣著相機與錄音铜跑,去河邊找鬼。 笑死骡澈,一個胖子當著我的面吹牛锅纺,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播肋殴,決...
    沈念sama閱讀 38,892評論 3 405
  • 文/蒼蘭香墨 我猛地睜開眼囤锉,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了护锤?” 一聲冷哼從身側(cè)響起官地,我...
    開封第一講書人閱讀 37,655評論 0 266
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎烙懦,沒想到半個月后驱入,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 44,104評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡氯析,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,451評論 2 325
  • 正文 我和宋清朗相戀三年亏较,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片掩缓。...
    茶點故事閱讀 38,569評論 1 340
  • 序言:一個原本活蹦亂跳的男人離奇死亡雪情,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出拾因,到底是詐尸還是另有隱情旺罢,我是刑警寧澤旷余,帶...
    沈念sama閱讀 34,254評論 4 328
  • 正文 年R本政府宣布,位于F島的核電站扁达,受9級特大地震影響正卧,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜跪解,卻給世界環(huán)境...
    茶點故事閱讀 39,834評論 3 312
  • 文/蒙蒙 一炉旷、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧叉讥,春花似錦窘行、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,725評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至救崔,卻和暖如春惶看,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背六孵。 一陣腳步聲響...
    開封第一講書人閱讀 31,950評論 1 264
  • 我被黑心中介騙來泰國打工纬黎, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人劫窒。 一個月前我還...
    沈念sama閱讀 46,260評論 2 360
  • 正文 我出身青樓本今,卻偏偏與公主長得像,于是被迫代替她去往敵國和親主巍。 傳聞我的和親對象是個殘疾皇子冠息,可洞房花燭夜當晚...
    茶點故事閱讀 43,446評論 2 348

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