具有动态高度的 UITableViewCell 中的 iOS 芯片

Question

我不知疲倦地尝试在表格 View 单元格中创建一个“芯片”布局，其中单元格的高度会扩展以填充内容，但没有成功。

我的研究让我找到了这个图书馆 https://github.com/zoonooz/ZFTokenField但它并不能完全满足我的需求。一个例子就像消息应用程序，其中“收件人”字段扩展以填充所有联系人，或者主要是下面这张图片是我最终试图实现的:

芯片换到下一行的地方适本地扩展单元格。到目前为止，我最好的是“有点”工作减去单元格高度和开头的标签(标签应该很容易解决，所以不是主要问题)

我尝试了很多方法，但没有雪茄，如果有任何帮助，我将不胜感激。 (每个“筹码”都需要是一个按钮，这样我才能轻按以将其移除)。我尝试在表格 View 单元格中使用 Collection View (我不喜欢)并手动布置每个按钮(如下所示)

- (CGSize)updateChipsLayout {
    self.minWidth = 0.0f;
    self.minHeight = 0.0f;
    if (!self.visibleButtons) {
        self.visibleButtons = [NSMutableArray new];
    }
    for (UIButton *button in self.visibleButtons) {
        [button removeFromSuperview];
    }
    [self.visibleButtons removeAllObjects];
    CGRect oldButtonRect = CGRectZero;
    oldButtonRect.origin.x = self.buttonPadding;
    oldButtonRect.origin.y = self.buttonPadding;
    CGFloat maxHeight = 0.0f;
    for (ChipsData *data in self.chips) {
        NSString *autoLayout_orientation = @"H";
        NSLayoutFormatOptions autoLayout_options = NSLayoutFormatAlignAllLeft;
        UIButton *button = [data generateButton];
        CGSize buttonSize = button.bounds.size;
        CGFloat newX = oldButtonRect.origin.x + oldButtonRect.size.width + self.buttonPadding;

        if (newX + buttonSize.width > self.bounds.size.width) {
            newX = self.buttonPadding;
            oldButtonRect.origin.x = newX;
            oldButtonRect.origin.y += maxHeight + self.buttonPadding;
            maxHeight = 0.0f;
            autoLayout_orientation = @"V";
            autoLayout_options = NSLayoutFormatAlignAllTop;
        }

        if (buttonSize.height > maxHeight) {
            maxHeight = buttonSize.height;
        }

        self.minHeight = MAX(self.minHeight, buttonSize.height);
        self.minWidth = MAX(self.minWidth, buttonSize.width);

        button.frame = CGRectMake(
                                  newX,
                                  oldButtonRect.origin.y,
                                  button.frame.size.width,
                                  button.frame.size.height
                                  );

        button.tag = self.visibleButtons.count;
        [button addTarget:self action:@selector(buttonTouchUp:) forControlEvents:UIControlEventTouchUpInside];

        [self addSubview:button];

        oldButtonRect = button.frame;
        [self.visibleButtons addObject:button];
    }
    self.cellSize = CGSizeMake(
                               oldButtonRect.origin.x + oldButtonRect.size.width + self.buttonPadding,
                               oldButtonRect.origin.y + maxHeight + self.buttonPadding
                               );
    //[self setHeight:self.cellSize.height];
    [self invalidateIntrinsicContentSize];
    return self.frame.size;
}

按钮生成逻辑也没有那么复杂:

- (UIButton *)generateButton {
    UIColor *backgroundColor = [UIColor colorWithWhite:0.1f alpha:1.0f];
    UIColor *backgroundColorHighlighted = [UIColor colorWithWhite:0.4f alpha:1.0f];

    UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
    NSMutableAttributedString *attrText = [[NSMutableAttributedString alloc] initWithAttributedString:self.attributedText];

    [attrText addAttributes:@{
                              NSForegroundColorAttributeName: [UIColor whiteColor],
                              NSBackgroundColorAttributeName: backgroundColor,
                              }
                      range:NSMakeRange(0, attrText.length)
     ];

    [button setAttributedTitle:attrText forState:UIControlStateNormal];

    [button setBackgroundImage:[self generateBackgroundWithColor:backgroundColor] forState:UIControlStateNormal];
    [button setBackgroundImage:[self generateBackgroundWithColor:backgroundColorHighlighted] forState:UIControlStateHighlighted];

    [button sizeToFit];
    [button.layer setCornerRadius:8.0f];
    [button.layer setMasksToBounds:YES];
    [button setClipsToBounds:YES];

    return button;
}

我假设我需要一个函数来确定单元格外部的单元格高度，因为在我告诉它它的高度应该是多少之前，我无法获得对单元格的引用来确定它的高度。

PS 是的，我知道当 Swift 可用时我仍在使用 Objective-C。

Answer 1

cell的大小不是由cell决定的，而是由tableView的delegate决定的，具体来说

tableView:heightForRowAtIndexPath:

因此，您必须获取每个单元格的高度大小并返回该高度。此外，如果用户在该 View 中时单元格中每个项目的数据没有更改，我建议在知道每个单独索引的高度后将其存储在数组中，这样您就可以避免昂贵的计算。

- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath
{
    // We are just going to assume a single section for brevity
    // And we also have an array of CGFloats that is the same size as the # of rows
    CGFloat height = knownHeights[indexPath.row];
    if (height == 0) // our default value when we created the array
    {
        // You'll have to write the get custom height function
        height = [self getHeightForItemAtIndexPath:indexPath];
        knownHeights[indexPath.row] = height;
    }
    return height;
}