iOS Chips in UITableViewCell with dynamic height - ios

Question

I have tried tirelessly to create a "chips" layout within a table view cell where the height of the cell expands to fill the contents but with no luck.
My research has landed me with this library https://github.com/zoonooz/ZFTokenField but it doesn't quite fill my needs. An example is like the Messages app where the "to" field expands to fill all the contacts, or primarily this image below is what I'm ultimately attempting to achieve:
Where the chips wrap to the next line where appropriate expanding the cell as it goes. The best I have so far is "sort of" working minus the cell height and the label at the start (label should be an easy fix so not the main concern)
I've tried many approaches but with no cigar and any help would be greatly appreciated. (each "chip" needs to be a button so I can tap to remove them). I've tried with a collection view in the table view cell (which I didn't like) and manually laying out each button (show below)
- (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;
}
The button generation logic isn't that complex either:
- (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;
}
I assume I'll need a function to determine the cell height outside of the cell as I can't get a reference to the cell to determine it's height until I tell it what it's height should be.
PS yes I am aware that I am still using Objective-C when Swift is available.

Answer 1

The size of the cell is not determined by the cell, but by the tableView's delegate, specifically
tableView:heightForRowAtIndexPath:
So, you'll have to get the size of how high each cell will be and return that height. Also, if the data for each item in the cell does not change while the user is in that view, I would recommend storing the height for each individual index in an array once it is known so you can avoid expensive calculations.
- (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;
}