基于内容的动态UITableView单元格高度

Question

我有一个UITableView ，其中填充了自定义单元格（继承自UITableViewCell ），每个单元格都包含一个UIWebView ，它根据它的内容自动调整大小。 这就是问题，如何根据内容（变量webView ）更改UITableView单元格的高度。

解决方案必须是动态的，因为用于填充UIWebViews的HTML是从不断变化的Feed中解析的。

我有一种感觉，我需要使用UITableView委托方法heightForRowAtIndexPath但从它的定义：

    - (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath
{
    ;//This needs to be variable
}

我无法访问单元格或其内容。 我可以在cellForRowAtIndexPath更改单元格的高度吗？

任何帮助都会很棒。 谢谢。

注意

两年多前我问过这个问题。 通过自动布局的介绍，可以找到iOS7的最佳解决方案：

在UITableView中使用自动布局来获取动态单元格布局和可变行高

在iOS8上，此功能内置于SDK中

Answer 1

这通常很有效：

Objective-C的：

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

迅速：

override func tableView(tableView: UITableView!, heightForRowAtIndexPath indexPath: NSIndexPath!) -> CGFloat {
    return UITableViewAutomaticDimension;
}

Answer 2

我发现动态高度的最佳方法是预先计算高度并将其存储在某种类型的集合中（可能是数组）。假设单元格主要包含文本，您可以使用-[NSString sizeWithFont:constrainedToSize:lineBreakMode:]计算高度，然后在heightForRowAtIndexPath:返回相应的值heightForRowAtIndexPath:

如果内容不断变化，您可以实现一种方法，在提供新数据时更新高度数组。

Answer 3

self.tblVIew.estimatedRowHeight = 500.0; // put max you expect here.
self.tblVIew.rowHeight = UITableViewAutomaticDimension;

Answer 4

我尝试了很多解决方案，但有一个解决方案是这个，由朋友建议：

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

    int height = [StringUtils findHeightForText:yourLabel havingWidth:yourWidth andFont:[UIFont systemFontOfSize:17.0f]];

    height += [StringUtils findHeightForText:yourOtherLabel havingWidth:yourWidth andFont:[UIFont systemFontOfSize:14.0f]];

    return height + CELL_SIZE_WITHOUT_LABELS; //important to know the size of your custom cell without the height of the variable labels
}

StringUtils.h类：

#import <Foundation/Foundation.h>

@interface StringUtils : NSObject

+ (CGFloat)findHeightForText:(NSString *)text havingWidth:(CGFloat)widthValue andFont:(UIFont *)font;

@end

StringUtils.m类：

#import "StringUtils.h"

@implementation StringUtils

+ (CGFloat)findHeightForText:(NSString *)text havingWidth:(CGFloat)widthValue andFont:(UIFont *)font {
    CGFloat result = font.pointSize+4;
    if (text) {
        CGSize size;

        CGRect frame = [text boundingRectWithSize:CGSizeMake(widthValue, CGFLOAT_MAX)
                                          options:NSStringDrawingUsesLineFragmentOrigin
                                       attributes:@{NSFontAttributeName:font}
                                          context:nil];
        size = CGSizeMake(frame.size.width, frame.size.height+1);
        result = MAX(size.height, result); //At least one row
    }
    return result;
}

@end

它对我来说很完美。 我有一个自定义单元格，其中包含3个固定尺寸的图像，2个固定尺寸的标签和2个可变标签。

Answer 5

这是我从twitter获取推文然后将它们存储在CoreData中以供离线阅读时用于动态单元格高度的代码。

这不仅展示了如何获取单元格和数据内容，还展示了如何使用填充动态地将UILabel大小调整为内容

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

    Tweet *tweet = [self.fetchedResultsController objectAtIndexPath:indexPath];

    NSString* text = tweet.Text;

    TweetTableViewCell *cell = (TweetTableViewCell*)[self tableView:tableView cellForRowAtIndexPath:indexPath];

    //Set the maximum size
    CGSize maximumLabelSize = cell.tweetLabel.frame.size;
    CGPoint originalLocation = cell.tweetLabel.frame.origin;

    //Calculate the new size based on the text
    CGSize expectedLabelSize = [text sizeWithFont:cell.tweetLabel.font constrainedToSize:maximumLabelSize lineBreakMode:cell.tweetLabel.lineBreakMode];


    //Dynamically figure out the padding for the cell
    CGFloat topPadding = cell.tweetLabel.frame.origin.y - cell.frame.origin.y;


    CGFloat bottomOfLabel = cell.tweetLabel.frame.origin.y + cell.tweetLabel.frame.size.height;
    CGFloat bottomPadding = cell.frame.size.height - bottomOfLabel;


    CGFloat padding = topPadding + bottomPadding;


    CGFloat topPaddingForImage = cell.profileImage.frame.origin.y - cell.frame.origin.y;
    CGFloat minimumHeight = cell.profileImage.frame.size.height + topPaddingForImage + bottomPadding;

    //adjust to the new size
    cell.tweetLabel.frame = CGRectMake(originalLocation.x, originalLocation.y, cell.tweetLabel.frame.size.width, expectedLabelSize.height);


    CGFloat cellHeight = expectedLabelSize.height + padding;

    if (cellHeight < minimumHeight) {

        cellHeight = minimumHeight;
    }

    return cellHeight;
}

Answer 6

另外我认为这样的算法适合你：

1）在cellForrowAtIndexPath中激活webview以进行加载，并为它们提供等于indexPath.row的标记

2）在webViewDidFinishLoading中，您计算​​单元格中内容的高度，并使用键和值组成一个字典，如下所示：key = indexPath.row value = height

3）调用[tableview reloadData]

4）在[tableview cellForRowAtIndexPath：indexPath]中为相应的单元格设置适当的高度

Answer 7

iOS中具有动态高度的单元格的一个大问题是表格vc必须在绘制单元格之前计算并返回每个单元格的高度。 但是，在绘制单元格之前，它没有框架，因此没有宽度。 如果您的单元格要根据textLabel中的文本数量更改其高度，则会导致问题，因为您不知道其宽度。

我见过的常见解决方案是人们为单元格宽度定义数值。 这是一种糟糕的方法，因为表可以是普通的或分组的，使用iOS 7或iOS 6样式，在iPhone或iPad上显示，在横向或纵向模式等。

我在我的iOS应用程序中遇到了这些问题，它支持iOS5 +以及具有多种方向的iPhone和iPad。 我需要一种方便的方法来自动执行此操作并将逻辑从视图控制器中移除。 结果变成了一个UITableViewController子类（因此它可以保持状态），它支持默认单元格（默认和字幕样式）以及自定义单元格。

你可以在GitHub上获取它（ https://github.com/danielsaidi/AutoSizeTableView ）。 我希望它能帮助那些仍在努力解决这个问题的人。 如果你确实检查出来，我很想听听你的想法，以及它是否适合你。

Answer 8

这是我很好的解决方案之一。 它对我有用。

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
    cell.textLabel.text = [_nameArray objectAtIndex:indexPath.row];
    cell.textLabel.numberOfLines = 0;
    cell.textLabel.lineBreakMode = NSLineBreakByWordWrapping;
}

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

我们需要应用这两个更改。

1)cell.textLabel.numberOfLines = 0;
  cell.textLabel.lineBreakMode = NSLineBreakByWordWrapping;

2)return UITableViewAutomaticDimension;

Answer 9

我总是在超级单元类中的所有单元格中实现它，因为由于某种原因UITableViewAutomaticDimension不能很好地工作。

-(CGFloat)cellHeightWithData:(id)data{
    CGFloat height = [[self contentView] systemLayoutSizeFittingSize:UILayoutFittingCompressedSize].height;
    [self fillCellWithData:data]; //set the label's text or anything that may affect the size of the cell
    [self layoutIfNeeded];
    height = [[self contentView] systemLayoutSizeFittingSize:UILayoutFittingCompressedSize].height;
    return height+1; //must add one because of the cell separator
}

只需在您的-(CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath上调用此方法-(CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath使用虚拟单元格。

注意：这仅适用于autolayout，但它也适用于ios 7及更高版本。

pd：不要忘记在xib或storyboard上选中“首选宽度显示”复选框并设置静态宽度（在cmd + alt + 5菜单上）

Answer 10

Swift使用自定义单元格和标签。 设置UILabel的约束。 （上，左，下，右）将UILabel的行设置为0

在ViewController的viewDidLoad方法中添加以下代码：

tableView.estimatedRowHeight = 68.0
tableView.rowHeight = UITableViewAutomaticDimension

//委托和数据源

override func tableView(tableView: UITableView, heightForRowAtIndexPath indexPath: NSIndexPath) -> CGFloat {
    return UITableViewAutomaticDimension;
}

Answer 11

我在UILabel进行了非常大的测试。 最重要的是无法工作，然后我创建字符串类别如下所示，并得到确切的高度

- (CGFloat)heightStringWithEmojifontType:(UIFont *)uiFont ForWidth:(CGFloat)width {

// Get text
CFMutableAttributedStringRef attrString = CFAttributedStringCreateMutable(kCFAllocatorDefault, 0);
CFAttributedStringReplaceString (attrString, CFRangeMake(0, 0), (CFStringRef) self );
CFIndex stringLength = CFStringGetLength((CFStringRef) attrString);

// Change font
CTFontRef ctFont = CTFontCreateWithName((__bridge CFStringRef) uiFont.fontName, uiFont.pointSize, NULL);
CFAttributedStringSetAttribute(attrString, CFRangeMake(0, stringLength), kCTFontAttributeName, ctFont);

// Calc the size
CTFramesetterRef framesetter = CTFramesetterCreateWithAttributedString(attrString);
CFRange fitRange;
CGSize frameSize = CTFramesetterSuggestFrameSizeWithConstraints(framesetter, CFRangeMake(0, 0), NULL, CGSizeMake(width, CGFLOAT_MAX), &fitRange);

CFRelease(ctFont);
CFRelease(framesetter);
CFRelease(attrString);

return frameSize.height + 10;}

Answer 12

在Swift 4+中，你可以将其设置为dinamic

override func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
    return UITableView.automaticDimension
}