根据内容高度的tableview动态高度行

Posted 2023-02-27

【中文标题】根据内容高度的tableview动态高度行

【英文标题】：tableview dynamic height rows according to content height

【发布时间】：2016-12-26 21:41:55

【问题描述】：

我的 tableview 行没有拉伸以适应 imageviews 并且 imageviews 重叠。

我将tableview设置为自动维度 并将 imageview 的底部约束到单元格

肯定少了点什么，但我不知道是什么。

表格视图单元格

- (instancetype)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier
   
    self.photoImageView = [[UIImageView alloc]init];
    if (!(self = [super initWithStyle:style reuseIdentifier:reuseIdentifier]))
        return nil;

    [self.contentView addSubview:self.photoImageView];

    [self setConstraints];

    return self;


-(void) layoutSubviews 
    [super layoutSubviews];

    self.nameLabel.preferredMaxLayoutWidth = self.nameLabel.frame.size.width;

    [self setConstraints];



- (void) setConstraints 

    UILayoutGuide *margins = self.contentView.layoutMarginsGuide;

    self.photoImageView.translatesAutoresizingMaskIntoConstraints = false;
    [self.photoImageView.topAnchor constraintEqualToAnchor:self.contentView.topAnchor constant:7].active = YES;
    [self.photoImageView.bottomAnchor constraintGreaterThanOrEqualToAnchor:self.contentView.bottomAnchor constant:12].active = YES;
    [self.photoImageView.leadingAnchor constraintEqualToAnchor:self.contentView.leadingAnchor constant:8].active = YES;
    [self.photoImageView.heightAnchor constraintEqualToConstant:65].active = YES;
    [self.photoImageView.widthAnchor constraintEqualToConstant:65].active = YES;
    self.photoImageView.contentMode = UIViewContentModeScaleAspectFit;
    self.photoImageView.layer.cornerRadius = self.photoImageView.frame.size.height / 3;
    self.photoImageView.layer.masksToBounds = YES;

表格视图控制器

- (void)viewDidLoad 
    [super viewDidLoad];


    //tableview
    NSString *cellIdentifier = @"cell";
    [self.businessesTableView registerClass:[YPBusinessTableViewCell class] forCellReuseIdentifier:cellIdentifier];
    self.businessesTableView.delegate = self;
    self.businessesTableView.dataSource = self;
    self.refreshControl = [[UIRefreshControl alloc]init];
    [self.businessesTableView addSubview:self.refreshControl];
    [self.refreshControl addTarget:self action:@selector(refreshTable) forControlEvents:UIControlEventValueChanged];

    UIEdgeInsets insets = self.businessesTableView.contentInset;
    insets.bottom += YPInfiniteScrollActivityView.defaultHeight;
    self.businessesTableView.contentInset = insets;

    self.businessesTableView.estimatedRowHeight = 120;
    self.businessesTableView.rowHeight = UITableViewAutomaticDimension;

    UIBarButtonItem *negativeSpacer = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemFixedSpace target:nil action:nil];

    UIBarButtonItem *filter = [[UIBarButtonItem alloc] initWithTitle:@"Filter" style:UIBarButtonItemStylePlain target:self action:@selector(presentFilterView)];
    negativeSpacer.width = -14;

    [self.navigationItem setLeftBarButtonItems:@[negativeSpacer, filter] animated:NO];


    [self setConstraints];
    [self doSearch:@"test"];

    [self setupInfiniteScrollView];
    [self addSearchBar];
    [self hideErrorView:self.errorView];

编辑：

我发现我的问题是改变这一行

[self.contentView.bottomAnchor  constraintGreaterThanOrEqualToAnchor:self.photoImageView.bottomAnchor constant:0].active = YES;

我需要将 contentView 的底部锚点约束到 imageView 而不是相反。

现在唯一的问题是我的表格视图最初加载的单元格非常小 然后当我刷新图像变大

【问题讨论】：

为什么不简单地在 storyBoard 中创建一个可重复使用的单元格并在那里设置所有约束？

Change UITableView height dynamically的可能重复

【参考方案1】：

只需在 viewdidload() 方法中设置 tableview 属性

**

tableView.estimatedRowHeight = 2000;  // example
tableView.rowHeight = UITableViewAutomaticDimension;

**

将tableview委托设置为

- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:
(NSIndexPath *)indexPath
return UITableViewAutomaticDimension;

同时在 UITableView 单元格中设置元素，从上到下附加约束

请参阅此链接了解更多信息 - https://developer.apple.com/library/content/documentation/UserExperience/Conceptual/AutolayoutPG/WorkingwithSelf-SizingTableViewCells.html

【讨论】：

哦，我还没有实现 heightforRow。也不知道你可以在那里返回 UITableviewAutomaticDimension 。打算试试

【参考方案2】：

在你的tableview委托（tableviewcontroller）中，你可以实现一个名为heightForrowAtIndexPath的函数

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

假设您有一个包含所有图像的数组，请在该索引处返回图像的相应高度。

【参考方案3】：

setConstraints 中的这一行在我看来很可疑：

    [self.photoImageView.heightAnchor constraintEqualToConstant:65].active = YES;

如果您使用自定大小的表格视图单元格，您可能不想要一个恒定的高度。

这是一个关于自动调整表格视图单元格的很好的教程，可能会有所帮助：https://www.raywenderlich.com/129059/self-sizing-table-view-cells

【参考方案4】：

我的问题完全与自动布局有关。

我首先需要将单元格的底部限制在 imageviews 底部，而不是相反。

[self.contentView.bottomAnchor  constraintGreaterThanOrEqualToAnchor:self.photoImageView.bottomAnchor constant:0].active = YES;

在那之后，我遇到了 imageview 的启动大小和重新加载表格后的大小问题。

然后我在 imageview 上设置了固定的宽度和高度，这解决了所有其他大小调整/重新加载问题。

[self.photoImageView.heightAnchor constraintEqualToConstant:65].active = YES;
[self.photoImageView.widthAnchor constraintEqualToConstant:65].active = YES;