TableViewCell自適應(yīng)高度三種實現(xiàn)方式

實現(xiàn)cell的自適應(yīng)布局的前提是要讓cell中的子空間的布局要使用autolayout,這篇文章我們會通過Masonry阿蝶、SDAutoLayout柬甥、xib三種方式實現(xiàn)布局的autolayout,再通過Y軸方向的完全約束來實現(xiàn)cell高度自適應(yīng)苛蒲。
1.Masonry實現(xiàn)cell自適應(yīng):
(1)首先通過Masonry實現(xiàn)cell的布局

  • (void)setUpView{
    ...此處布局省略
    [self.contentView addSubview:self.adavterImgV];
    [_adavterImgV mas_makeConstraints:^(MASConstraintMaker *make) {
    make.top.equalTo(headerView.mas_bottom).offset(15);
    make.left.equalTo(headerView).offset(15);
    make.size.mas_equalTo(CGSizeMake(30, 30));
    }];
    [self.contentView addSubview:self.contentImgV];
    [_contentImgV mas_makeConstraints:^(MASConstraintMaker *make) {
    make.top.equalTo(self.nameLabel.mas_bottom).offset(15);
    make.left.equalTo(self.contentView).offset(15);
    make.right.equalTo(self.contentView).offset(-15);
    make.height.equalTo(@200);
    }];

    [self.contentView addSubview:self.contentLabel];
    [_contentLabel mas_makeConstraints:^(MASConstraintMaker *make) {
    make.top.equalTo(self.contentImgV.mas_bottom).offset(15);
    make.left.equalTo(self.contentView).offset(15);
    make.right.equalTo(self.contentView).offset(-15);
    make.bottom.equalTo(self.contentView).offset(-15);
    }];
    }
    //只自適應(yīng)文本內(nèi)容

pragma mark -Setter

  • (void)setViewModel:(SGITestModel *)viewModel{
    [self.contentImgV setImage:[UIImage imageNamed:viewModel.imageName]];
    [self.contentLabel setText:viewModel.content];
    }
    //自適應(yīng)文本和圖片

pragma mark -Setter

  • (void)setViewModel:(SGITestModel *)viewModel{
    [self.contentImgV setImage:[UIImage imageNamed:viewModel.imageName]];
    [self.contentLabel setText:viewModel.content];
    [self.contentImgV mas_updateConstraints:^(MASConstraintMaker *make) {
    make.height.equalTo(@((SGIScreenWidth-30)/viewModel.ratio));
    }];
    }
    附注:viewModel.ratio為計算出的圖片寬高比绿满,這里為了方便省略了計算方式,下面使用的viewModel.ratio同理

(2)通過預(yù)設(shè)tableview的高度estimatedRowHeight屬性以及tableView的rowHeight設(shè)置UITableViewAutomaticDimension來實現(xiàn)高度自適應(yīng)

  • (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath{
    return UITableViewAutomaticDimension;
    }
  • (CGFloat)tableView:(UITableView *)tableView estimatedHeightForRowAtIndexPath:(NSIndexPath *)indexPath{
    return 100.0f;
    }

核心代碼:self.rowHeight = UITableViewAutomaticDimension;
self.estimatedHeight = 44.0f(隨便預(yù)設(shè)高度)

(3)效果如下:


IMG_0158.JPG

2.SDAutoLayout實現(xiàn)cell的自適應(yīng)

  • (void)setUpView{
    ...此處布局省略

    [self.contentView addSubview:self.contentImgV];
    _contentImgV.sd_layout
    .topSpaceToView(self.nameLabel, 15)
    .leftEqualToView(self.adavterImgV)
    .rightEqualToView(self.nameLabel)
    .heightIs(200);

    [self.contentView addSubview:self.contentLabel];
    _contentLabel.sd_layout
    .topSpaceToView(self.contentImgV, 15)
    .leftEqualToView(self.contentImgV)
    .rightEqualToView(self.contentImgV)
    .autoHeightRatio(0);
    [self setupAutoHeightWithBottomView:self.contentLabel bottomMargin:15];

}
//只自適應(yīng)文本內(nèi)容

pragma mark -Setter

  • (void)setViewModel:(SGITestModel *)viewModel{
    [self.contentImgV setImage:[UIImage imageNamed:viewModel.imageName]];
    [self.contentLabel setText:viewModel.content];
    }
    //自適應(yīng)文本和圖片

pragma mark -Setter

  • (void)setViewModel:(SGITestModel *)viewModel{
    [self.contentImgV setImage:[UIImage imageNamed:viewModel.imageName]];
    [self.contentLabel setText:viewModel.content];
    _contentImgV.sd_resetLayout
    .topSpaceToView(self.nameLabel, 15)
    .leftEqualToView(self.adavterImgV)
    .rightEqualToView(self.nameLabel)
    .autoHeightRatio(viewModel.ratio);
    [self setupAutoHeightWithBottomView:self.contentLabel bottomMargin:15];
    }
    //設(shè)置cell的高度
  • (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath{
    // return UITableViewAutomaticDimension;
    return [tableView cellHeightForIndexPath:indexPath model:self.contentArray[indexPath.section] keyPath:@"viewModel" cellClass:[SGITestAutoTableViewCell class] contentViewWidth:SGIScreenWidth] ;
    }

核心代碼:[self setupAutoHeightWithBottomView:self.contentLabel bottomMargin:15];
[tableView cellHeightForIndexPath:indexPath model:self.contentArray[indexPath.section] keyPath:@"viewModel" cellClass:[SGITestAutoTableViewCell class] contentViewWidth:SGIScreenWidth] ;

(3)效果圖同上

3.xib實現(xiàn)自適應(yīng)布局
(1)使用xib實現(xiàn)布局


1585905241827.jpg

(2)通過預(yù)設(shè)tableview的高度estimatedRowHeight屬性以及tableView的rowHeight設(shè)置UITableViewAutomaticDimension來實現(xiàn)高度自適應(yīng)

  • (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath{
    return UITableViewAutomaticDimension;
    }
  • (CGFloat)tableView:(UITableView *)tableView estimatedHeightForRowAtIndexPath:(NSIndexPath *)indexPath{
    return 100.0f;
    }

//自適應(yīng)文本和圖片

pragma mark -Setter

  • (void)setViewModel:(SGITestModel *)viewModel{
    [self.contentImgV setImage:[UIImage imageNamed:viewModel.imageName]];
    [self.contentLabel setText:viewModel.content];
    self.constrait_height.constant = (SGIScreenWidth -30) *viewModel.ratio;
    }

核心代碼:self.rowHeight = UITableViewAutomaticDimension;
self.estimatedHeight = 44.0f(隨便預(yù)設(shè)高度)

(3)效果圖同上

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末嚎货,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子殖属,更是在濱河造成了極大的恐慌,老刑警劉巖瓦盛,帶你破解...
    沈念sama閱讀 206,214評論 6 481
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異原环,居然都是意外死亡,警方通過查閱死者的電腦和手機嘱吗,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,307評論 2 382
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來谒麦,“玉大人巧勤,你說我怎么就攤上這事弄匕」敛t!?“怎么了?”我有些...
    開封第一講書人閱讀 152,543評論 0 341
  • 文/不壞的土叔 我叫張陵驹溃,是天一觀的道長。 經(jīng)常有香客問我豌鹤,道長亡哄,這世上最難降的妖魔是什么布疙? 我笑而不...
    開封第一講書人閱讀 55,221評論 1 279
  • 正文 為了忘掉前任,我火速辦了婚禮灵临,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘儒溉。我一直安慰自己宦焦,他們只是感情好,可當(dāng)我...
    茶點故事閱讀 64,224評論 5 371
  • 文/花漫 我一把揭開白布酝豪。 她就那樣靜靜地躺著,像睡著了一般精堕。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上锄码,一...
    開封第一講書人閱讀 49,007評論 1 284
  • 那天,我揣著相機與錄音滋捶,去河邊找鬼痛悯。 笑死重窟,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的巡扇。 我是一名探鬼主播扭仁,決...
    沈念sama閱讀 38,313評論 3 399
  • 文/蒼蘭香墨 我猛地睜開眼厅翔,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了刀闷?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 36,956評論 0 259
  • 序言:老撾萬榮一對情侶失蹤甸昏,失蹤者是張志新(化名)和其女友劉穎顽分,沒想到半個月后施蜜,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 43,441評論 1 300
  • 正文 獨居荒郊野嶺守林人離奇死亡翻默,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 35,925評論 2 323
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了冰蘑。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 38,018評論 1 333
  • 序言:一個原本活蹦亂跳的男人離奇死亡祠肥,死狀恐怖武氓,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情县恕,我是刑警寧澤东羹,帶...
    沈念sama閱讀 33,685評論 4 322
  • 正文 年R本政府宣布属提,位于F島的核電站,受9級特大地震影響美尸,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜师坎,卻給世界環(huán)境...
    茶點故事閱讀 39,234評論 3 307
  • 文/蒙蒙 一恕酸、第九天 我趴在偏房一處隱蔽的房頂上張望胯陋。 院中可真熱鬧,春花似錦遏乔、人聲如沸义矛。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,240評論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽捻激。三九已至噪矛,卻和暖如春铺罢,著一層夾襖步出監(jiān)牢的瞬間残炮,已是汗流浹背韭赘。 一陣腳步聲響...
    開封第一講書人閱讀 31,464評論 1 261
  • 我被黑心中介騙來泰國打工泉瞻, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人苞冯。 一個月前我還...
    沈念sama閱讀 45,467評論 2 352
  • 正文 我出身青樓,卻偏偏與公主長得像舅锄,于是被迫代替她去往敵國和親鞭达。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 42,762評論 2 345

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