ios - iOS 表/ Collection View 中的单元格间布局逻辑

Question

将 UITableView 或 UICollectionView 中单独单元格的部分与标题的单独行对齐的惯用方法是什么？

例如，假设我想显示这样的东西:

Name       Number
Bob        34587
Jane       32489
Barbara    23766
Montgomery 34892

“名称”和“编号”位将位于某种标题单元格中。我想我可以为此使用节标题(只有一个节)。

标题下方的每个单元格都需要根据其内容智能调整大小，但该大小需要影响所有其他单元格的布局。

这在 iOS 中通常是如何实现的？

Answer 1

尽管它被称为“表格 View ”，但它实际上并不是我们通常认为的表格(即，多行多列)。如果您真的想要多列，则由您决定。要将它们排成一行，您必须计算出所需的宽度，或者选择一个对所有情况都足够大的宽度。

我想我会做这样的事情:

#define COLUMN_SPACE 10
- (UITableViewCell) tableView: (UITableView *) tableView cellForRowAtIndexPath: (NSIndexPath *) indexPath {
    MyTableViewCell *cell = [tableView dequeueReusableCellWithIdentifier: @"cell"];
    // Layout the cell
    NSString *name = [myDataStore nameForIndexPath: indexPath];
    NSNumber *number = [myDataStore numberforIndexPath: indexPath];

    CGRect frame = cell.nameLabel.frame;
    frame.size.width = [self nameColumnWidth];
    cell.nameLabel.frame = frame;
    frame = cell.numberLabel.frame;
    frame.origin.x = cell.nameLabel.origin.x + cell.nameLabel.size.width + COLUMN_SPACE;
    frame.size.width = [self numberColumnWidth];
    cell.numberLabel.frame = frame;

    cell.nameLabel.text = name;
    // You would probably want to use an NSNumberFormatter here
    cell.numberLabel.text = [NSString stringWithFormat: @"%d", number.intValue];

    return cell;
}

- (CGFloat) nameColumnWidth {
    if( _nameColumnWidth <= 0.0 ) {
        _nameColumnWidth = 0.0;
        for( NSInteger s = 0; s < [myDataStore numberOfSections]; ++s ) {
            for( NSInteger r = 0; r < [myDataStore numberOfRowsInSection: s]; ++r ) {
                NSIndexPath *path = [NSIndexPath indexPathForRow: r inSection: s];
                NSString *name = [myDataStore nameForIndexPath: indexPath];
                CGFloat widthForName = [name widthNeeded];
                if( widthForName > _nameColumnWidth )
                    _nameColumnWidth = widthForName;
            }
        }
    }
    return _nameColumnWidth;
}

- (CGFloat) numberColumnWidth {
    if( _numberColumnWidth <= 0.0 ) {
        _numberColumnWidth = 0.0;
        for( NSInteger s = 0; s < [myDataStore numberOfSections]; ++s ) {
            for( NSInteger r = 0; r < [myDataStore numberOfRowsInSection: s]; ++r ) {
                NSIndexPath *path = [NSIndexPath indexPathForRow: r inSection: s];
                NSNumber *number = [myDataStore numberforIndexPath: indexPath];
                // You would probably want to use an NSNumberFormatter here
                // (in fact you want to do the same is you do in cellForRowAtIndexPath)
                NSString *numberAsString = [NSString stringWithFormat: @"%d", number.intValue];
                CGFloat widthForNumber = [numberAsString widthNeeded];
                if( widthForNumber > _numberColumnWidth )
                    _numberColumnWidth = widthForNumber;
            }
        }
    }
    return _numberColumnWidth;
}

在为节标题生成 View 时，我会使用相同的 [self nameColumnWidth] 和 [self numberColumnWidth]，或者我只会在第 0 行创建单元格该部分的部分具有 Name 和 Number 标题。

对于宽度，我将扩展 NSString :

@implementation NSString (WithWidthNeeded)
- (CGFloat) widthNeeded {
    // Either set the font you will use here, add it as a parameter, etc.
    UIFont *font = [UIFont systemFontOfSize: 18];
    CGSize maximumLabelSize = CGSizeMake( 9999, font.lineHeight );
    CGSize expectedLabelSize;
    if( [self respondsToSelector: @selector(boundingRectWithSize:options:attributes:context:)] ) {
        CGRect expectedLabelRect = [self boundingRectWithSize: maximumLabelSize options: NSStringDrawingUsesLineFragmentOrigin attributes: @{ NSFontAttributeName: font } context: nil];
            expectedLabelRect = CGRectIntegral( expectedLabelRect );
            expectedLabelSize = expectedLabelRect.size;
    } else {
        NSAttributedString *attributedText = [[NSAttributedString alloc] initWithString: self attributes: @{ NSFontAttributeName: font }];
        if( [attributedText respondsToSelector: @selector(boundingRectWithSize:options:context:)] ) {
            CGRect expectedLabelRect = [attributedText boundingRectWithSize: maximumLabelSize options: NSStringDrawingUsesLineFragmentOrigin context: nil];
            expectedLabelRect = CGRectIntegral( expectedLabelRect );
            expectedLabelSize = expectedLabelRect.size;
    } else {
            expectedLabelSize = [self sizeWithFont: font
                                 constrainedToSize: maximumLabelSize
                                     lineBreakMode: NSLineBreakByTruncatingTail];

        }
    }
    return expectedLabelSize.width;
}
@end

当数据更改时，_nameColumnWidth 和 _numberColumnWidth 可以更改为 0.0，它们将被重新计算，以便调整列宽。

另一种方法是在cellForRowAtIndexPath 中布置单元格时跟踪名称 和编号 的最大宽度。如果它们增加，则触发重绘可见单元格。这会有更好的性能，因为它不必遍历整个数据集来找到最长的 name 和最大的 number。然而，当您向下 ScrollView 浏览数据时，这会导致列移动，并且遇到更长的名称或更大的数字，除非最长的名称 而最大的 number 恰好在第一行。

也可以做一种混合，其中 nameColumnWidth 和 numberColumnWidth 被设置为可见的最大值(某种局部最大值)，然后是背景线程开始遍历其余数据并找到绝对最大值。当找到绝对最大值时，将重新加载可见单元格。然后列宽只有一个偏移或变化。 (如果正在调用 sizeWithFont:，则后台线程可能不安全，因为它在 UIKit 中。对于 iOS 6 或 7，我认为这没问题)

同样，由于 UITableView 实际上是 UIColumnView，因此您需要做大量的工作来制作可以根据内容调整宽度的多个列。