使用AutoLayout實(shí)現(xiàn)自動(dòng)計(jì)算UITableView的cell高度

參考鏈接(個(gè)人小結(jié)答捕,不喜請(qǐng)繞行,勿噴P寄恰)

UITableview是iOS開發(fā)中使用最頻繁的一個(gè)控件拱镐,在實(shí)際開發(fā)中,我們經(jīng)常需要定制cell持际,讓cell顯示圖片沃琅、文字等。由于cell包含的圖片和文字是根據(jù)服務(wù)器返回的數(shù)據(jù)進(jìn)行填充的蜘欲,這就導(dǎo)致cell包含的內(nèi)容的高度是不定的益眉。
四種方法計(jì)算cell的高度:
1、iOS8的自動(dòng)計(jì)算機(jī)制,需要autolayout(適用iOS8之后系統(tǒng))
2郭脂、iOS6之后系統(tǒng)API結(jié)合autolayout進(jìn)行計(jì)算(適用于iOS6之后的系統(tǒng))
3年碘、手動(dòng)計(jì)算(適用于iOS6之后的系統(tǒng))
4、借助于第三方框架自動(dòng)計(jì)算(適用于iOS6之后的系統(tǒng))

本篇就是采用第一種方法展鸡。
由于紅包model里 限標(biāo)的類型和限紅包使用設(shè)備有可能是null屿衅,這個(gè)時(shí)候不予顯示,也就是說cell的高度是動(dòng)態(tài)的莹弊。

使用AutoLayout對(duì)xib布局

正如參考鏈接文章所說涤久,此方法必須使用autolayout,這里我是用的xib設(shè)置的忍弛,當(dāng)然也可以使用第三方框架masonry設(shè)置响迂。設(shè)置約束的時(shí)候必須注意每個(gè)控件在垂直方向上必須都有約束(遵循從左到右從上到下的原則),這樣cell才可以計(jì)算出來高度剧罩。

cell整體布局

對(duì)cell整體布局的幾點(diǎn)說明:

  1. 注冊(cè)紅包及下面的5個(gè)使用條件label 都是放在vBg這個(gè)輔助view里面的(右部)栓拜。對(duì)于label的約束,可以全部選中惠昔,上下左右設(shè)置0幕与,不選margin,之后對(duì)注冊(cè)紅包label距底設(shè)置20镇防,這樣比較高效(紅包的name啦鸣,限額和期限還有日期是一定會(huì)有的)

  2. 人民幣符號(hào)布局


  3. 紅包金額布局


  4. 虛線布局


    注意:
    這里用的是通過設(shè)置view的背景顏色來加載相應(yīng)的圖片。若用imageview加載圖片来氧,會(huì)出現(xiàn)cell自動(dòng)變得很大的問題诫给,初步猜測(cè)是因圖片本身size太大,imageview自適應(yīng)導(dǎo)致啦扬。

//暫時(shí)用uiview的方式加載虛線圖片中狂,若用imageview,使用autolayout動(dòng)態(tài)計(jì)算cell的高度時(shí)扑毡,會(huì)以imageview為準(zhǔn)胃榕,使cell 高度變得很大
    self.vXxLine.backgroundColor = [UIColor colorWithPatternImage:[UIImage imageNamed:@"HorizontalCoupleLine"]];

2017/11/16補(bǔ)充更新
若用imageview來加載虛線的話,如下設(shè)置content hugging和content compressive resistance 為低優(yōu)先級(jí)即可(也就是說讓虛線去適應(yīng)右邊總label的高度)


布局小結(jié):觀察以上布局能發(fā)現(xiàn)不管是從左到右還是從上到下瞄摊,size都約束好了勋又。


核心代碼

viewcontroller里面

//注冊(cè)cell
[self.mainTabelView registerNib:[UINib nibWithNibName:NSStringFromClass([RedPacketCell class]) bundle:nil]
             forCellReuseIdentifier:RedPacketIdentifer];
//使用autolayout自動(dòng)計(jì)算cell高度(must確定動(dòng)態(tài)label垂直方向的約束)
    self.mainTabelView.estimatedRowHeight = 223;
    self.mainTabelView.rowHeight = UITableViewAutomaticDimension;//iOS8及以后默認(rèn)值,可以不設(shè)置

#pragma mark- tableview datasource/delegate
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{
    RedPacketCell *cell = [tableView dequeueReusableCellWithIdentifier:RedPacketIdentifer];
    [cell configWithModel:self.maData[indexPath.section]];
    cell.selectionStyle = UITableViewCellSeparatorStyleNone;
    
    return cell;
}

RedPacketCell.m里面(注意注釋换帜,在h里面關(guān)聯(lián)需要使用的控件)

- (void)awakeFromNib {
    [super awakeFromNib];
    
    self.vBottomLine.backgroundColor = RGB(235, 60, 58);
    self.lbAmount.textColor = RGB(235, 60, 58);
    self.lbYuan.textColor = RGB(235, 60, 58);
    //暫時(shí)用uiview的方式加載虛線圖片楔壤,若用imageview,使用autolayout動(dòng)態(tài)計(jì)算cell的高度時(shí)惯驼,會(huì)以imageview為準(zhǔn)蹲嚣,使cell 高度變得很大
    self.vXxLine.backgroundColor = [UIColor colorWithPatternImage:[UIImage imageNamed:@"HorizontalCoupleLine"]];
    if (iPhone5SE) {
        self.lbName.font = SYSTEMFONT(15);
        self.lbMonth.font = SYSTEMFONT(13);
        self.lbLimitAmount.font = SYSTEMFONT(13);
        self.lbModelType.font = SYSTEMFONT(13);
        self.lbBidType.font = SYSTEMFONT(13);
        self.lbDate.font = SYSTEMFONT(13);
    }
}

- (void)configWithModel:(redGiftItemModel *)model{
    if (!model) {
        return;
    }
    //紅包金額固定寬度递瑰,暫不考慮4位數(shù)的紅包(10000的紅包,也不太可能)
    self.lbAmount.text = model.amount;
    self.lbName.text = model.name;
    self.lbLimitAmount.text = [NSString  stringWithFormat:@"? 投資滿%@元使用",model.limitAmount];
    self.lbDate.text = [NSString stringWithFormat:@"? %@至%@",model.startDate,model.endDate];
    if (model.month.floatValue==0) {
        self.lbMonth.text = @"? 不限投資期限";
    }else{
        self.lbMonth.text = [NSString stringWithFormat:@"? 投資%@個(gè)月及以上使用",model.month];
    }
    //標(biāo)的類型限制情況(當(dāng)后臺(tái)返回null的時(shí)候端铛,需要賦值空字符串泣矛,autolayout才會(huì)自動(dòng)計(jì)算高度為0;\
    不能手動(dòng)設(shè)置label高度禾蚕,否則當(dāng)空字符串會(huì)保留高度您朽;\
    與投資期限 分條寫,這樣一來UI不僅文案清晰簡(jiǎn)潔换淆,同時(shí)也適配了小屏顯示)
    if (!model.bidType) self.lbBidType.text = @"";
    if ([model.bidType isEqualToString:@"NEW"]) self.lbBidType.text = @"? 限新手標(biāo)使用";
    if ([model.bidType isEqualToString:@"HOUSE"]) self.lbBidType.text = @"? 限房標(biāo)使用";
    //終端類型
    if (!model.modelType) self.lbModelType.text = @"";
    if ([model.modelType isEqualToString:@"PC"]) self.lbModelType.text = @"? 限PC端";
    if ([model.modelType isEqualToString:@"MOBILE"]) self.lbModelType.text = @"? 限手機(jī)端";
    if ([model.modelType isEqualToString:@"OTHER"]) self.lbModelType.text = @"? 其它";
}

效果圖

公司項(xiàng)目哗总,就不給git demo了,附上一張效果圖倍试。


參考鏈接:
http://blog.csdn.net/u011043997/article/details/51263016

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末讯屈,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子县习,更是在濱河造成了極大的恐慌涮母,老刑警劉巖,帶你破解...
    沈念sama閱讀 217,406評(píng)論 6 503
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件躁愿,死亡現(xiàn)場(chǎng)離奇詭異叛本,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)彤钟,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,732評(píng)論 3 393
  • 文/潘曉璐 我一進(jìn)店門来候,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人逸雹,你說我怎么就攤上這事营搅。” “怎么了梆砸?”我有些...
    開封第一講書人閱讀 163,711評(píng)論 0 353
  • 文/不壞的土叔 我叫張陵转质,是天一觀的道長(zhǎng)。 經(jīng)常有香客問我帖世,道長(zhǎng)峭拘,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,380評(píng)論 1 293
  • 正文 為了忘掉前任狮暑,我火速辦了婚禮,結(jié)果婚禮上辉饱,老公的妹妹穿的比我還像新娘搬男。我一直安慰自己,他們只是感情好彭沼,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,432評(píng)論 6 392
  • 文/花漫 我一把揭開白布缔逛。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪褐奴。 梳的紋絲不亂的頭發(fā)上按脚,一...
    開封第一講書人閱讀 51,301評(píng)論 1 301
  • 那天,我揣著相機(jī)與錄音敦冬,去河邊找鬼辅搬。 笑死,一個(gè)胖子當(dāng)著我的面吹牛脖旱,可吹牛的內(nèi)容都是我干的堪遂。 我是一名探鬼主播,決...
    沈念sama閱讀 40,145評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼萌庆,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼溶褪!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起践险,我...
    開封第一講書人閱讀 39,008評(píng)論 0 276
  • 序言:老撾萬榮一對(duì)情侶失蹤猿妈,失蹤者是張志新(化名)和其女友劉穎,沒想到半個(gè)月后巍虫,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體彭则,經(jīng)...
    沈念sama閱讀 45,443評(píng)論 1 314
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,649評(píng)論 3 334
  • 正文 我和宋清朗相戀三年垫言,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了贰剥。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 39,795評(píng)論 1 347
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡筷频,死狀恐怖蚌成,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情凛捏,我是刑警寧澤担忧,帶...
    沈念sama閱讀 35,501評(píng)論 5 345
  • 正文 年R本政府宣布,位于F島的核電站坯癣,受9級(jí)特大地震影響瓶盛,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜示罗,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,119評(píng)論 3 328
  • 文/蒙蒙 一惩猫、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧蚜点,春花似錦轧房、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,731評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽迟赃。三九已至,卻和暖如春厂镇,著一層夾襖步出監(jiān)牢的瞬間纤壁,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 32,865評(píng)論 1 269
  • 我被黑心中介騙來泰國(guó)打工捺信, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留酌媒,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 47,899評(píng)論 2 370
  • 正文 我出身青樓残黑,卻偏偏與公主長(zhǎng)得像馍佑,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子梨水,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,724評(píng)論 2 354

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