Problems with UITableViewCell heights with a UILabel and random text lengths - objective-c

I'm currently trying to get a UITableView to use custom cell heights based on text in an array. The problem I'm seeing is that the text seems to squish together at point rather than filling the full length of a custom cell. This results in the text overlapping over cells, sometimes disappearing under them.
Here's the code I have for determining the cell height, I'm not sure of the standard UILabel text height but this seemed to work well at the height I for the font.
if (indexPath.section == 0) {
NSString *text = [[self.recipeDict objectForKey:#"Ingredients"] objectAtIndex:[indexPath row]];
CGSize constraint = CGSizeMake(320 - (10 * 2), 20000.0f);
CGSize size = [text sizeWithFont:[UIFont systemFontOfSize:12] constrainedToSize:constraint lineBreakMode:UILineBreakModeWordWrap];
CGFloat height = size.height;
return height + 20;
}
Also just in case the creation of the cells is either a hinderance to my problem or just helps you know what's going on, here's that too.
UITableViewCell *cell;
UITableViewCell *ingredientCell;
UITableViewCell *methodCell;
if (indexPath.section == 0) {
UILabel *ingredientText;
static NSString *ingredientCellIdentifier = #"Ingredient Cell";
ingredientCell = [tableView dequeueReusableCellWithIdentifier: ingredientCellIdentifier];
if (ingredientCell == nil)
{
ingredientCell = [[[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier: ingredientCellIdentifier] autorelease];
ingredientText = [[UILabel alloc] initWithFrame:CGRectMake(15, 7, 290, 44)];
[ingredientText setLineBreakMode:UILineBreakModeWordWrap];
[ingredientText setNumberOfLines:0];
[ingredientCell.contentView addSubview:ingredientText];
ingredientText.tag = 1;
[ingredientText release];
ingredientCell.contentMode = UIViewContentModeRedraw;
}
ingredientText = (UILabel*)[ingredientCell viewWithTag:1];
ingredientText.text = [[self.recipeDict objectForKey:#"Ingredients"] objectAtIndex: indexPath.row];
[ingredientText sizeToFit];
return ingredientCell;
}
This is my second attempt at solving this issue but it seems to be beyond my current ability so I welcome wisdom gained through experience.
UPDATE -
After further investigation it seems that the UILabel ingredientText being resized is causing the issue.
It starts out as tall as it needs to be for the text shown, however when that label is redrawn with a larger height for another piece of text which requires more lines it's never shrunk down again. It seems that the sizeToFit method is prioritising using the available height rather than taking up the width and shrinking the height.
Right now I've set the width again after the sizeToFit which works around the issue but it leads to odd spacing depending on the height of the label.

A couple of things:
You have not set the font for the UILabel, which means you're sizing to an unknown height
You need to set your UILabel autoresizing mask, so that it sizes when the cell height changes
Here is working code (tested):
-(CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath {
if (indexPath.section == 0) {
NSString *text = [_items objectAtIndex:[indexPath row]];
CGSize constraint = CGSizeMake(320 - (10 * 2), 20000.0f);
CGSize size = [text sizeWithFont:[UIFont systemFontOfSize:12] constrainedToSize:constraint lineBreakMode:UILineBreakModeWordWrap];
CGFloat height = size.height;
return height + 20;
}
return tableView.rowHeight;
}
#pragma mark - UITableViewDatasource
-(UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
UITableViewCell *cell;
UITableViewCell *ingredientCell = nil;
UITableViewCell *methodCell;
if (indexPath.section == 0) {
UILabel *ingredientText;
static NSString *ingredientCellIdentifier = #"Ingredient Cell";
ingredientCell = [tableView dequeueReusableCellWithIdentifier: ingredientCellIdentifier];
if (ingredientCell == nil)
{
ingredientCell = [[[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier: ingredientCellIdentifier] autorelease];
ingredientText = [[UILabel alloc] initWithFrame:ingredientCell.bounds];
ingredientText.font = [UIFont systemFontOfSize:12.0f];
ingredientText.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight;
[ingredientText setLineBreakMode:UILineBreakModeWordWrap];
[ingredientText setNumberOfLines:0];
[ingredientCell.contentView addSubview:ingredientText];
ingredientText.tag = 1;
[ingredientText release];
ingredientCell.contentMode = UIViewContentModeRedraw;
}
ingredientText = (UILabel*)[ingredientCell viewWithTag:1];
ingredientText.text = [_items objectAtIndex: indexPath.row];
return ingredientCell;
}
}
Be sure you are always be returning a values for tableView:cellForRowAtIndexPath: and tableView:heightForRowAtIndexPath: methods

The solution to this issue was that the width specified in the constant in the cell height method didn't match the frame for the cell text specified later in the cellForRowAtIndexPath method.
Once these are the same the problem resolves itself.
The different constant size led to inconsistent and inaccurate UILabel heights being reported. This led to incorrect table row heights being set.

Related

UITableView overlaps cells after scrolling

All, I have a UITableView to which I add cells on user input. My cells have a slight transparency, and I recently noticed that after I have more cells than fit the screen, when I scroll down and back up, the cells which were momentarily off-screen now have new cells positioned behind them!
This shows up in my app, and also is evidenced in the view hierarchy debugger.
Interesting to note that it only happens when two or more cells scroll off screen (notice the count skips cell 7, which is at the bottom, just off the screen at the moment.
I figure this has something to do with caching the UIScrollView data for quicker loads? How do I stop it?
Adding a cell:
NSArray *indexPaths = [NSArray arrayWithObjects:[NSIndexPath indexPathForRow:numberOfCounters inSection:0], nil];
[counterTable insertRowsAtIndexPaths:indexPaths withRowAnimation:UITableViewRowAnimationBottom];
numberOfCounters++;
[counters addObject:[[CKCounter alloc] init]];
cellForRowAtIndexPath: method
-(UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{
static NSString *simpleTableIdentifier = #"CKCounter";
UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:simpleTableIdentifier];
if (cell == nil){
cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:simpleTableIdentifier];
}
CKCounter *counter = [counters objectAtIndex:indexPath.row];
[counter setCurrentCount:indexPath.row];
[counter setIndex:indexPath.row];
[cell.contentView addSubview:[counter view]];
[cell.contentView setAutoresizesSubviews:TRUE];
[cell setBackgroundColor:[UIColor clearColor]];
/** Sets up the bounds for the subcounters **/
CGRect frame = cell.contentView.bounds;
frame.size.height -= counterMargins; // This will give the counters an inset
frame.size.width -= counterMargins; // The gap will be split to each side
frame.origin = cell.contentView.bounds.origin;
counter.view.frame = frame;
counter.view.opaque = false;
counter.view.center = cell.contentView.center;
//[NSString stringWithFormat:#"%lu", (unsigned long)[indexPath indexAtPosition:0]]
return cell;
}
See also: This Question

Add subview to UITableViewCell on selection

I'm trying to add a UIView that is supposed to strikethrough the text (don't worry about the horizontal misplacement).
However, when selecting a row, the line is added several rows below. Why?
Here's my code:
-(void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath
{
NSLog(#"%#", indexPath);
UITableViewCell *cell = [tableView cellForRowAtIndexPath:indexPath];
UILabel *label = cell.textLabel;
CGSize textSize = [[label text] sizeWithAttributes:#{NSFontAttributeName:[label font]}];
CGFloat strikeWidth = textSize.width;
UIView *lineView = [[UIView alloc] initWithFrame:CGRectMake(self.view.bounds.size.height / 2, 200, strikeWidth, 2)];
lineView.backgroundColor = [UIColor redColor];
lineView.tag = 100;
[cell.contentView addSubview:lineView];
}
Instead of using a UIView and adding a subview to the cell, you should use an NSAttributedString for the cell text and the NSStrikethroughStyleAttributeName to strike through with an NSStrikethroughColorAttributeName for the strikethrough colour.
Your problem is here:
UIView *lineView = [[UIView alloc] initWithFrame:CGRectMake(self.view.bounds.size.height / 2, 200, strikeWidth, 2)];
In this case, "self" is the tableViewController, not the label or the cell. What you're doing is setting the x origin of the view as half the height of the screen, the y origin down 200 points, with a width of strikeWidth and a height of 2.
Because the line view you are adding is going to be a subview of the cell, you always want to make the frame relative to it's superview, which in this case is the cell itself. You likely want to use something like similar to below:
CGRectMake(CGRectGetMinX(cell.textLabel.frame), CGRectGetHeight(cell.contentView.frame) / 2, strikeWidth, 2)
You'll likely want to tweak values to make it line up, but you get the idea...
EDIT: Better frame added and here's more code that does it nicely:
- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath {
[tableView deselectRowAtIndexPath:indexPath animated:YES];
UITableViewCell *cell = [tableView cellForRowAtIndexPath:indexPath];
UILabel *label = cell.textLabel;
CGSize textSize = [[label text] sizeWithAttributes:#{NSFontAttributeName:[label font]}];
CGFloat strikeWidth = textSize.width;
UIView *lineView = [[UIView alloc] initWithFrame:CGRectMake(CGRectGetMinX(label.frame), CGRectGetHeight(cell.contentView.frame) / 2, strikeWidth, 2)];
lineView.backgroundColor = [UIColor redColor];
[cell.contentView addSubview:lineView];
[tableView reloadRowsAtIndexPaths:#[indexPath] withRowAnimation:UITableViewRowAnimationAutomatic];
}
I think your line is appearing outside of your cell because you set an y origin of 200 in your frame, which seems pretty high.
Moreover, if you want to play with strikethrough in a UITableviewCell, you'd better not do it this way, because on multiple selection this 'strikethroughView' will be added multiple times, and never removed. Also on a tableview reloadData, or scrolling the cells are reused, and you don't want to see these strikethroughViews randomly displayed.
Here are two ways to do it properly :
Use the NSAttributedString framework. Basically if allows you to do all sorts of things to a string, like setting color, background color, paragraph style, but also strikeThrough.
Here is what i would write in the didSelect delegate method :
-(void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath {
UITableViewCell *cell = [tableView cellForRowAtIndexPath:indexPath];
NSString *string = cell.textLabel.text;
NSDictionary *attributes = #{NSStrikethroughStyleAttributeName: #(NSUnderlineStyleThick)};
NSMutableAttributedString *attributedString = [[NSMutableAttributedString alloc] initWithString:string attributes:attributes];
cell.textLabel.attributedText = attributedString;
}
The other solution would be to add a Category on UICollectionViewCell and implement a "setStrikeTrough" method in it.
Hope it'll help.

How to change the bounce-region's color/background for a horizontal UITableView

I'm working on a custom "Pulse style" UITableView according to this tutorial, and everything is going great. I've made some modifications and extensions but there is one feature I'd like to implement that I need some help with: the color of the horizontal bounce regions.
This is the method that creates my cell with a table view in it:
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
NSString *cellIdentifier = [#"TableViewCell" stringByAppendingFormat:#"%i", self.content.indexInArrayOfViews];
UIView *view = [self.content viewAtIndex:indexPath.row];
UITableViewCell *cell = [self.horizontalTableView dequeueReusableCellWithIdentifier:cellIdentifier];
if (cell == nil) {
cell = [[[UITableViewCell alloc] initWithStyle:UITableViewCellStyleSubtitle reuseIdentifier:cellIdentifier] autorelease];
view.center = CGPointMake(view.center.y,view.center.x);
view.contentMode = UIViewContentModeCenter;
view.transform = CGAffineTransformMakeRotation(M_PI_2);
cell.selectionStyle = UITableViewCellSelectionStyleNone;
}
[cell addSubview:view];
return cell;
}
I'm aware there is a reuse cell issue, but for right now I want to change this color here [IMG].
I can control the color of the vertical table view bounce areas, but I am having difficulty replicating this success for my horizontal view.
This is how I do it vertically:
CGRect frame = self.tableView.bounds;
frame.origin.y = -frame.size.height;
UIView* topBack = [[UIView alloc] initWithFrame:frame];
topBack.backgroundColor = [self.delegate backgroundColorForTopOfTableView];
[self.tableView addSubview:topBack];
[topBack release];
This was according to this StackOverflow question.
How do I change the color/background of my horizontal table view (which is nested in a table view cell)?
Here is an album with some relevant iPhone screenshots and IB screenshots.
I discovered a solution:
if (indexPath.row == 0){
UIView *bounce = [[UIView alloc] initWithFrame:CGRectMake(-320, 0, 320, 150)];
bounce.backgroundColor = [self.delegate colorForBounceRegionAtRow:self.content.indexInArrayOfViews];
[view addSubview:bounce];
}
if (indexPath.row + 1 == self.content.viewCount){
UIView *bounce = [[UIView alloc] initWithFrame:CGRectMake([self.content widthOfViewAtIndex:self.content.viewCount - 1], 0, 320*2, [self.content greatestHeight])];
bounce.backgroundColor = [self.delegate colorForBounceRegionAtRow:self.content.indexInArrayOfViews];
[view addSubview:bounce];
}
This adds a full screen's worth of colored rectangle to the first and last elements, giving the illusion of a bounce region.

UILabel text alignment right

I want that my text should be align right.
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{
UITableViewCell *cell=[tableView dequeueReusableCellWithIdentifier:#"lisn"];
cell=[[[UITableViewCell alloc] initWithStyle:UITableViewCellStyleSubtitle reuseIdentifier:#"lisn"] autorelease];
CGSize textSize = { 210.0, 10000.0 };
CGSize size = [[gMessageArray objectAtIndex:indexPath.row] sizeWithFont:[UIFont systemFontOfSize:12] constrainedToSize:textSize lineBreakMode:UILineBreakModeWordWrap];
UILabel *lisnerMessage=[[[UILabel alloc] init] autorelease];
lisnerMessage.backgroundColor = [UIColor clearColor];
[lisnerMessage setFrame:CGRectMake(75 ,20,size.width + 5,size.height+2)];
lisnerMessage.numberOfLines=0;
lisnerMessage.textAlignment=UITextAlignmentRight;
lisnerMessage.text=[gMessageArray objectAtIndex:indexPath.row];
[cell.contentView addSubview:lisnerMessage];
return cell
}
but my text is not align right Please Help
Because you are using sizeWithFont and then setting your frame to that size, your text is aligned right. Try added a background color of light gray to your label to see what I'm talking about. Your label should be set to the same size as your table cell and allow the text to flow inside it. Then it will align to the right.
Update with sample
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{
UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:#"lisn"];
cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleSubtitle reuseIdentifier:#"lisn"];
UILabel *lisnerMessage = [[UILabel alloc] init];
lisnerMessage.backgroundColor = [UIColor clearColor];
[lisnerMessage setFrame:cell.frame];
lisnerMessage.numberOfLines = 0;
lisnerMessage.textAlignment = NSTextAlignmentRight;
lisnerMessage.text = [gMessageArray objectAtIndex:indexPath.row];
[cell.contentView addSubview:lisnerMessage];
return cell
}
Right alignment for label
yourLabel.textAlignment = NSTextAlignmentRight;
Finally I have fix my problem. I was doing small mistake
[lisnerMessage setFrame:CGRectMake(75 ,20,size.width + 5,size.height+2)];
I just remove size.width and give my specific coordinate 200 after that the text is align right.
[lisnerMessage setFrame:CGRectMake(75 ,20,200,size.height+2)];
Thanks all for your response
Why don't you just make the label in interface builder/storyboard and select the "align right" option? Then connect it as a property named lisnerMessage and
lisnerMessage.text=[gMessageArray objectAtIndex:indexPath.row];
That would significantly cut down on how much code you're writing and definitely work.

iOS - heightForRowAtIndexPath does not fire during scrolling

I am writing a simple iOS app using Xcode4, which uses a table view to display a list of stories (fetched from a URL). I'm displaying the story titles as UILabels, and as a subview of the table cell.
I am over-riding heightForRowAtIndexPath to calculate the correct height for the cells according to the length of each story title. I'm adding the label to the cell in cellForRowAtIndexPath. When I run the app in the simulator, everything is rendered well. However: when I scroll down and scroll up, the labels get messed up. They get truncated and over-run. I debugged a little, and found that the heightForRowAtIndexPath method is not fired during scrolling, so the cell heights are not re-calculated, and therefore the label text overflows, and gets rendered ugly. Here is the relevant code:
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
UITableViewCell* cell = [tableView dequeueReusableCellWithIdentifier:#"Cell"];
if (cell == nil) {
cell = [[UITableViewCell alloc] initWithFrame:CGRectZero reuseIdentifier:#"Cell"];
cell.accessoryType = UITableViewCellAccessoryDisclosureIndicator;
[cell autorelease];
}
/* NOTE: code to load trimmedTitle dynamically is snipped */
NSString* trimmedTitle;
UIFont *cellFont = [UIFont fontWithName:#"Georgia" size:14.0];
CGSize constraintSize = CGSizeMake(280.0f, MAXFLOAT);
CGSize labelSize = [trimmedTitle sizeWithFont:cellFont constrainedToSize:constraintSize
lineBreakMode:UILineBreakModeWordWrap];
UILabel* tempLabel = [[UILabel alloc] initWithFrame:CGRectMake(60, 0, 230, labelSize.height)];
tempLabel.lineBreakMode = UILineBreakModeWordWrap;
tempLabel.text = trimmedTitle;
tempLabel.numberOfLines = 0;
[cell.contentView addSubview:tempLabel];
[tempLabel release];
return cell;
}
- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath
{
NSString* cellText; // code to load cellText dynamically is snipped off
UIFont *cellFont = [UIFont fontWithName:#"Georgia" size:14.0];
CGSize constraintSize = CGSizeMake(230.0f, MAXFLOAT);
CGSize labelSize = [cellText sizeWithFont:cellFont constrainedToSize:constraintSize lineBreakMode:UILineBreakModeWordWrap];
return labelSize.height + 20;
}
In situations like these I typically pre-calculate the heights of all of my rows, store them in an array, and then just returns those heights in heightForRowAtIndexPath. This way the tableview knows the height of each cell and cells be conform to that height even after reuse. I don't know of a way to force a calculation of the cell height beyond looking for when a cell will be viewable and reloading it, which seems too costly.
Update: some example code:
I have a method called - (void)calculateHeights which does the same calculation you had in heightForRowAtIndexPath, but stores the result in my mutable array heights_ ivar:
- (void)calculateHeights {
[heights_ removeAllObjects]
for (Widget *myWidget in modelWidgetArray) {
NSString* cellText; // code to load cellText dynamically is snipped off
UIFont *cellFont = [UIFont fontWithName:#"Georgia" size:14.0];
CGSize constraintSize = CGSizeMake(230.0f, MAXFLOAT);
CGSize labelSize = [cellText sizeWithFont:cellFont constrainedToSize:constraintSize lineBreakMode:UILineBreakModeWordWrap];
[heights_ addObject:[NSNumber numberWithFloat:labelSize.height + 20.0f]];
}
}
And then in heightForRowAtIndexPath, given a 1-section table view:
- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath
{
return [heights_ objectAtIndex:[indexPath row]];
}
If your table view has more than one section you'll need to do some math to convert to the one-dimensional heights_ array and back again. Also, any time you -reloadData you'll need to -calculateHeights as well.
The -tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath method is invoked before the scroll view is composed.
The purpose of calling this method before calling -tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath and not fired during the scrolling is that the table view (Which is inherited from UIScrollView) need to know the whole height of the contentView. Once the table view knows all the height, it cached the height before you call -reloadData
Your problem means you need to clear the content in the cell's -prepareForReuse and call -setNeedLayout to layout all the new contents.
you can use tag for your label to avoid messed up to each other
UILabel *label= (UILabel*)[cell viewWithTag:2];
label.lineBreakMode = UILineBreakModeWordWrap;
label.numberOfLines = 0;