美文网首页
TableViewCell自适应高度三种实现方式

TableViewCell自适应高度三种实现方式

作者: Enjoyhy | 来源:发表于2020-04-03 16:31 被阅读0次

    实现cell的自适应布局的前提是要让cell中的子空间的布局要使用autolayout,这篇文章我们会通过Masonry、SDAutoLayout、xib三种方式实现布局的autolayout,再通过Y轴方向的完全约束来实现cell高度自适应。
    1.Masonry实现cell自适应:
    (1)首先通过Masonry实现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);
      }];
      }
      //只自适应文本内容

    pragma mark -Setter

    • (void)setViewModel:(SGITestModel *)viewModel{
      [self.contentImgV setImage:[UIImage imageNamed:viewModel.imageName]];
      [self.contentLabel setText:viewModel.content];
      }
      //自适应文本和图片

    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)通过预设tableview的高度estimatedRowHeight属性以及tableView的rowHeight设置UITableViewAutomaticDimension来实现高度自适应

    • (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(随便预设高度)

    (3)效果如下:


    IMG_0158.JPG

    2.SDAutoLayout实现cell的自适应

    • (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];

    }
    //只自适应文本内容

    pragma mark -Setter

    • (void)setViewModel:(SGITestModel *)viewModel{
      [self.contentImgV setImage:[UIImage imageNamed:viewModel.imageName]];
      [self.contentLabel setText:viewModel.content];
      }
      //自适应文本和图片

    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];
      }
      //设置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实现自适应布局
    (1)使用xib实现布局


    1585905241827.jpg

    (2)通过预设tableview的高度estimatedRowHeight属性以及tableView的rowHeight设置UITableViewAutomaticDimension来实现高度自适应

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

    //自适应文本和图片

    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(随便预设高度)

    (3)效果图同上

    相关文章

      网友评论

          本文标题:TableViewCell自适应高度三种实现方式

          本文链接:https://www.haomeiwen.com/subject/fkthphtx.html