iOS 表格/集合视图中的单元格间布局逻辑

Posted 2023-03-04

技术标签:

【中文标题】iOS 表格/集合视图中的单元格间布局逻辑【英文标题】：Inter-cell layout logic in iOS table/collection views 【发布时间】：2014-03-13 07:33:01 【问题描述】：

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

例如，假设我想显示如下内容：

Name       Number
Bob        34587
Jane       32489
Barbara    23766
Montgomery 34892

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

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

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

【问题讨论】：

您希望这取决于名称列中的内容（因此宽度可变），还是只是将标题（“数字”）与数字对齐？ 【参考方案1】：

尽管它被称为“表格视图”，但它并不是我们通常认为的表格（即，多行多列）。如果你真的想要多列，这取决于你。要将它们排列起来，您必须确定所需的宽度，或者选择一个对于所有情况都足够大的宽度。

我想我会这样做：

#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;

在为节标题生成视图时，我会使用相同的 [self nameColumnWidth] 和 [self numberColumnWidth]，或者我只会让节的第 0 行的单元格具有 Name 和编号标题。

对于宽度我会用这个扩展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 的最大宽度。如果它们增加，则触发重绘可见单元格。这会有更好的性能，因为它不必遍历整个数据集来找到最长的name和最大的number。但是，这会导致列在您向下滚动查看数据时移动，并且遇到更长的 names 或更大的 numbers，除非最长的 name 和最大的数字恰好在顶行。

也可以做一种混合，将nameColumnWidth 和numberColumnWidth 设置为可见的最大值（某种局部最大值），然后启动一个后台线程来处理其余部分数据并找到绝对最大值。当找到绝对最大值时，重新加载可见单元格。那么列宽只有一次移位或变化。（如果 sizeWithFont: 被调用，后台线程可能不安全，因为它在 UIKit 中。对于 iOS 6 或 7，我认为它可以）

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

【讨论】：

【参考方案2】：

如果我的理解正确，那么您希望第二列尽可能靠近第一列而不影响第一列中的内容。

据我所知，这在 iOS 上并不常用，因为为两列使用固定宽度的空间要容易得多，而且通常不需要水平压缩它们。

但是，如果我真的需要这样做：

sizeWithFont:contrainedToSize:

boundingRectWithSize:options:attributes:context:

_maxLeftContentWidth

-tableView:cellForRowAtIndexPath:

_maxLeftContentWidth

[self.tableView reloadData]