參考鏈接(個(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ì)算出來高度剧罩。
對(duì)cell整體布局的幾點(diǎn)說明:
注冊(cè)紅包及下面的5個(gè)使用條件label 都是放在vBg這個(gè)輔助view里面的(右部)栓拜。對(duì)于label的約束,可以全部選中惠昔,上下左右設(shè)置0幕与,不選margin,之后對(duì)注冊(cè)紅包label距底設(shè)置20镇防,這樣比較高效(紅包的name啦鸣,限額和期限還有日期是一定會(huì)有的)
-
人民幣符號(hào)布局
-
紅包金額布局
-
虛線布局
注意:
這里用的是通過設(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