I'm using a default UITableViewCell, just its textLabel. My text is multi-line. What's the best way to compute its height?
I know there are various NSString sizing methods, but in order to use those, you have to specify a width. And I don't know the width of the default textLabel, and I suspect it changes based upon which text is placed inside it.
I've tried also using the method described here:
Using Auto Layout in UITableView for dynamic cell layouts & variable row heights
...but it doesn't work (estimated size always comes back 0); there's an implication in that post that that solution only works for UITableViewCell subclasses. (I could subclass, but it's not necessary.)
Suggestions? My app is iOS 7-specific.
Thanks!
UITableView rowHeight property. If you do not explicitly set it, UITableView sets it to a standard value.
I got it working with a standard UITableViewCell - using the github in the question you listed, but replace these functions.
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];
if (cell == nil)
{
cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:CellIdentifier];
cell.textLabel.lineBreakMode = UILineBreakModeWordWrap;
cell.textLabel.numberOfLines = 0;
cell.textLabel.font = [UIFont fontWithName:#"Helvetica" size:17.0];
}
// Configure the cell for this indexPath
//[cell updateFonts];
NSDictionary *dataSourceItem = [self.model.dataSource objectAtIndex:indexPath.row];
cell.textLabel.text =[dataSourceItem valueForKey:#"body"];
return cell;
}
- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath
{
NSDictionary *dataSourceItem = [self.model.dataSource objectAtIndex:indexPath.row];
NSString *cellText = [dataSourceItem valueForKey:#"body"];
UIFont *cellFont = [UIFont fontWithName:#"Helvetica" size:17.0];
CGSize constraintSize = CGSizeMake(280.0f, MAXFLOAT);
CGSize labelSize = [cellText sizeWithFont:cellFont constrainedToSize:constraintSize lineBreakMode:UILineBreakModeWordWrap];
return labelSize.height;
}
- (CGFloat)tableView:(UITableView *)tableView estimatedHeightForRowAtIndexPath:(NSIndexPath *)indexPath
{
if (self.isInsertingRow) {
// A constraint exception will be thrown if the estimated row height for an inserted row is greater
// than the actual height for that row. In order to work around this, we return the actual height
// for the the row when inserting into the table view.
// See: https://github.com/caoimghgin/TableViewCellWithAutoLayout/issues/6
return [self tableView:tableView heightForRowAtIndexPath:indexPath];
} else {
return 500.0f;
}
}
Oh also remove the register to the custom cell class so we get a UITableViewCell instead of RJTableViewCell. Also I think with this in here (even if it was a UITableViewCell) dequeueReusableCellWithIdentifier would never return nil and we wouldn't setup our cell correctly.
- (void)viewDidLoad
{
[super viewDidLoad];
//[self.tableView registerClass:[RJTableViewCell class] forCellReuseIdentifier:CellIdentifier];
...
}
Basically followed this example here - https://stackoverflow.com/questions/129502/how-do-i-wrap-text-in-a-uitableviewcell-without-a-custom-cell. I think the key is to not ask the cell for it's height like you do if you subclass the cell, but instead figure it out based on the text and font. The fact you can't ask the cell for it's hight seems a bit weird to me, and makes me think perhaps #Jeffery Thomas is right, it may be safer in the long run to just create a custom cell. Probably depends on your projet I would guess.
You need to subclass UITableViewCell.
You are asking more from UITableViewCell than it promises to provide. This is a recipe for trouble.
Create a subclass and build a prototype. You will know all the constraints, so this will be easy.
Related
I'm having some troubles with auto-resizing table view cells. I've been able to resize a cell's label based on its amount of text but I'm unable to adjust the cell height accordingly. Here's some code:
(UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
static NSString *CellIdentifier = #"CellIdentifier";
_cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];
if (_cell == nil)
{
_cell = [[TableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:CellIdentifier];
}
PFObject *object = [_postsArray objectAtIndex:indexPath.row];
NSString *nameString = [object objectForKey:#"Name"];
_cell.cellLabel.text = [NSString stringWithFormat:#"Posted by %#", nameString];
_cell.cellPostLabel.text = [NSString stringWithFormat:#" %#", [object objectForKey:#"PostedDream"]];
[_cell.cellPostLabel sizeToFit];
[tableView setAutoresizesSubviews:YES];
NSLog(#"cell post label height: %f", _cell.cellPostLabel.frame.size.height);
return _cell;
}
Things to note are that I am using a custom table view cell called TableViewCell *cell subclassed from UITableViewCell and the cell and its labels were added through IB.
The label that's being adjusted is cellPostLabel and it adjusts perfectly depending on the amount of text, but it gets cut off due to the cell not adjusting as well.
I also tried calling [self.tableView setAutoresizesSubviews:YES]; and
self.tableView.autoresizingMask = UIViewAutoresizingFlexibleHeight; in viewDidAppear: but still nothing. Any suggestions would be appreciated.
Cell height is determined by heightForRowAtIndexPath method.
You can implement that method on your viewcontroller and return height you prefer.
If your cell should have different height you should implement that method and return different value each cells. Or not just return static value or set tableview's property rowHeight, in this case you don't need to implement that method.
I have searched around for any tip for my problem. But I cannot find a solution for this.
I have made a subclass of UITableviewCell (FeedCell). With one image and two labels.
The problem is that the label I need to be multiline does not show up with multilines.
I use autolayot.
This is an app who display the users twitterfeed.
My code:
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
static NSString *CellIdentifier = #"Cell";
FeedCell *tweetCell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];
if (tweetCell == nil) {
tweetCell = [[FeedCell alloc]
initWithStyle:UITableViewCellStyleDefault reuseIdentifier:CellIdentifier];
[tweetCell.tweetText setNumberOfLines:0];
[tweetCell.tweetText setLineBreakMode:NSLineBreakByWordWrapping];
[tweetCell.tweetText setFont:[self fontForCell] ];
}
NSDictionary *tweet = _dataSource[[indexPath row]];
NSString *tweetString = [tweet valueForKey:#"text"];
tweetCell.name.text =[tweet valueForKeyPath:#"user.name"];
[tweetCell.tweetText setText:tweetString];
return tweetCell;
}
I have also set the heigthforRowAtIndexPath:
- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath {
NSDictionary *tweet = _dataSource[[indexPath row]];
NSString *theText=[tweet valueForKey:#"text"];
UIFont *cellFont = [self fontForCell];
CGSize constraintSize = CGSizeMake(280.0f, MAXFLOAT);
CGSize labelSize = [theText sizeWithFont:cellFont constrainedToSize:constraintSize lineBreakMode:NSLineBreakByWordWrapping];
return labelSize.height + 20;
}
The problem is that the tweet cell.tweetText does not show up with multilines. I have not tried this with another CellStyle (I use custom cellstyle).
Any tip anyone?
For mutiline use the following:
tweetCell.tweetText.numberOfLines = 0;
[tweetCell.tweetText sizeToFit];
for testing purpose set the height of row as 46.0f in the following method:
- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath{
I could not get the height issue fixed but this did give me a UILabel with multiple lines
I know this is an old post, but it came up when I was searching.
I got an example like this by following http://www.raywenderlich.com/73602/dynamic-table-view-cell-height-auto-layout.
I think for iOS8 the following is required:
Setting the lines to 0
Setting the word wrap
Setting the label size to be >= 20
Making sure there are enough constraints to determine the cell height (height of title and vertical spacing)
try
[tweetCell.tweetText sizeToFit]
Firstly, if you want to show 2 line of text (minimum 1 and maximum 2), the numberOfLines must be set to 2. Setting it to 0 means no limit.
Secondly, setting just the number of lines is not enough. The label width HAS to be specified. Either use sizeToFit, or set a constant value.
Try putting the code that sets number of lines, linebreakmode, and font OUTSIDE of those curly braces
I have a tableview representing a feed, with three different custom UITableView cells. One (the top one) is solid and should always be there, but the cells underneith that one is either a product or an event cell (loaded from DB). The thing is that the Eventcells have a textview and an imageview that can varie in height, so to view these correctly I calculate the correct height for them and then set the height in heightForRowAtIndexPath. I need to update the cell with its new height somehow, so I do an tableview begin/end update. However when I do this for every cell each time its loaded into view, all the cells start bouncing around and change content when I scroll the tableview.
Here is my CellForRowAtIndexPath
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
if (indexPath.section == 0) {
return [self loadJobInfoCell:indexPath];
} else if (indexPath.section == 1) {
if ([[jobDetailsArray objectAtIndex:indexPath.row] isKindOfClass:[JobProduct class]]) {
return [self loadProductCell:indexPath];
} else if ([[jobDetailsArray objectAtIndex:indexPath.row] isKindOfClass:[JobEvent class]]) {
static NSString *CellIdentifier = #"EventCell";
EventCell *cell = [tableViewRef dequeueReusableCellWithIdentifier:CellIdentifier forIndexPath:indexPath];
if (cell == nil) {
cell = [[EventCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:CellIdentifier];
}
JobEvent *currentEvent = [jobDetailsArray objectAtIndex:indexPath.row];
// setting labels and stuff here
// Is there an image to this event?
if (![currentEvent.EventPicture isEqual:[NSNull null]]) {
[[cell largeImage] setImage:currentEvent.EventPicture];
[[cell largeImageHeightConstraint] setConstant:currentEvent.EventPicture.size.height];
NSNumber *height = [NSNumber numberWithFloat:currentEvent.EventPicture.size.height];
[largeImagesDictionary setObject:height forKey:[NSString stringWithFormat:#"%d", indexPath.row]];
} else {
[[cell largeImageHeightConstraint] setConstant:0.f];
}
// set correct height for the textview
NSDictionary *attributes = #{NSFontAttributeName: [UIFont systemFontOfSize:14]};
CGRect paragraphRect = [cell.tvText.text boundingRectWithSize:CGSizeMake(204.f, CGFLOAT_MAX) options:NSStringDrawingUsesLineFragmentOrigin|NSStringDrawingUsesFontLeading attributes:attributes context:nil];
[[cell tvTextHeightConstraint] setConstant:paragraphRect.size.height+16.f];
NSNumber *height = [NSNumber numberWithFloat:[[cell tvTextHeightConstraint] constant]];
[eventTextHeightDictionary setObject:height forKey:[NSString stringWithFormat:#"%d", indexPath.row]];
[tableViewRef beginUpdates];
[tableViewRef endUpdates];
return cell;
}
}
return nil;
Without the begin/endupdates it works fine, though the cells are not the correct height and get cut of. Can I somehow update the height without reloading the table, or is there a better solution to the whole situation? Ive tried keeping track of which cells have gotten their update but that doesn't work, it still messes up the order, height and content. I've tried every combination of solutions I could possibly think of, but being a novice iOS developer im not even sure im taking the correct approach to this problem.
Thanks very much in advance.
EDIT:
Man, Im stupid.. I've sat and calculated heights in cellforrowatindex insted of in heightforrowatindex and passed the data inbetween with nsdictionaries. I solved this with autolayout and pre-calculating the height of the data in heightforrowatindex.
I'm not exactly sure of your setup, but the way I've done this, is to set up the constraints in IB so that the image view and text view will expand automatically as the cell does. By doing it this way, I don't have to do any size changes for the image view or text view in code, just the cell size. My cell setup looks like this:
The image view is centered in the x direction and has a constraint to the top of the cell and one from the bottom to the top of the text view. The text view has constraints to the sides and to the bottom of the cell. I put a dummy image in the image view, and selected "Size To Fit Content" from the Editor menu -- this cause the height and width constraints for the image view to be deleted.
In code, I calculate the sizes for the image view and text view, then return the sum of their heights (plus a fudge factor) in heightForRowAtIndexPath. Here is the code for a sample app:
- (void)viewDidLoad {
[super viewDidLoad];
self.theData = #[#{#"text":#"jkkjhkj kh k jk h hkj hjkhkjh hjkh jk hhkjhjkh jkh hkj hkjh hkjhjkhhkk jk jkh jkhkhkjhjhkjhkjhkkjhjjhk kjhkjh jkh hk h kj h jkh jkh kjh kh hjkhk jhjk", #"Pic":#"pic1.jpg"},#{#"text":#"fjhg lfkgh gjk gjk glkjfhgjkhgjkgh sjkghsjkgsjgjgk jgk hg hdgjlhjhjgjg fgjklfg fghjgk gjlkg hjgh jg jlkgljsdkggjlglgjdlkg hgjlgjfkghjg ljhfg jlskfdg hjgjlkgjlkdf gjfghjlkfgljkgjlkdgjdfghjdgjglhjkg hljkg ljkgljkfgljkgljksdgljkfgjlfg ljfglldkfjgh ljkgjlkf dgfghslfjdgklfjgljfdfgl", #"Pic":#"pic2.tiff"},#{#"text":#"jdkh lj flfh ljs fajlh ljds f", #"Pic":#"pic3.tiff"}];
[self.tableView reloadData];
}
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
return self.theData.count;
}
-(CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath {
CGSize textViewSize = [self.theData[indexPath.row][#"text"] sizeWithFont:[UIFont systemFontOfSize:14] constrainedToSize:CGSizeMake(280.f, CGFLOAT_MAX) lineBreakMode:NSLineBreakByWordWrapping];
UIImage *pic = [UIImage imageNamed:self.theData[indexPath.row][#"Pic"]];
CGSize imageViewSize = pic.size;
return textViewSize.height + imageViewSize.height + 40;
}
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
RDCell *cell = [tableView dequeueReusableCellWithIdentifier:#"Cell" forIndexPath:indexPath];
cell.tv.text = self.theData[indexPath.row][#"text"];
cell.iv.image = [UIImage imageNamed:self.theData[indexPath.row][#"Pic"]];
return cell;
}
I have a UITableView that uses prototype cells. The cells have a custom class called dataCell. The custom cells also have three UILabels:idLabel, contLabel, and expLabel. The cells properly resize based on the amount of text in expLabel; however, I cannot get the label itself to resize. Some labels resize when I scroll down; however, they also revert to showing only two lines and omitting text when I scroll back up. Here is my code
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
dataCell *cell = (dataCell *)[tableView dequeueReusableCellWithIdentifier:CellIdentifier];
// the rest of your configure cell
// First Cell Label
[cell.idLabel setText:[idData objectAtIndex:indexPath.row]];
cell.idLabel.numberOfLines = 0;
// Second Cell Label
[cell.contLabel setText:[conData objectAtIndex:indexPath.row]];
cell.contLabel.numberOfLines = 0;
// Third Cell Label
[cell.expLabel setText:[expData objectAtIndex:indexPath.row]];
cell.expLabel.numberOfLines=0;
CGSize expectedLabelSize = [cell.expLabel.text sizeWithFont:cell.expLabel.font constrainedToSize:CGSizeMake(220, FLT_MAX) lineBreakMode:cell.expLabel.lineBreakMode];
cell.expLabel.frame=CGRectMake(cell.expLabel.frame.origin.x, cell.expLabel.frame.origin.y, expectedLabelSize.width, expectedLabelSize.height);
return cell;
}
-(CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath*)indexPath {
dataCell *cell = (dataCell *)[tableView dequeueReusableCellWithIdentifier:CellIdentifier];
CGSize maximumLabelSize = CGSizeMake(220, FLT_MAX);
[cell.expLabel setText:[expData objectAtIndex:indexPath.row]];
CGSize expectedLabelSize = [cell.expLabel.text sizeWithFont:cell.expLabel.font constrainedToSize:maximumLabelSize lineBreakMode:cell.expLabel.lineBreakMode];
if (expectedLabelSize.height<43) {
expectedLabelSize.height=43;
}
return expectedLabelSize.height; }
Any help would be much appreciated
If you are using a storyboard and a UITableViewCell then you can just change the auto resizing mask, but if you are doing it programmatically then you will have to set the calculate the text width and height and reset the frame of the labels,
UILabel* label = [[UILabel alloc] init];
UIFont* font = label.font;
CGSize maxContentSizeForText = CGSizeMake(maxTextWidth, maxTextHeight);
CGSize stringTextSize = [string sizeWithFont:font constrainedToSize:maxContentSizeForText lineBreakMode:NSLineBreakByWordWrapping];
[label setFrame:CGRectMake(xPosition, yPosition, stringTextSize.width, stringTextSize.height);
[label setNumberOfLines:1000];
your label is probably a property from a xib file or storyboard, and the number of lines is just saying that you want the label to get really really big, since we can't say "infinite" i just generally use 1000 indicating 1000 lines of text maximum
I'm having problems with my custom UITableView. I was wondering as to how to properly make a group of text into the cell without seeing any ellipses "..." and without the text getting cut off at the end of the cell.
This is what my cell looks like, currently:
It is a part of a UISplitViewController. The problem with this is, before for some reason it would show the whole length of the text but it would get to the end of the cell and the rest of the string is cut off (this happens when I check "AutoLayout").
This is what my code looks like currently:
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
static NSString *CellIdentifier = #"BCell";
BracketTableCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];
if(cell == nil)
{
cell = [[BracketTableCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:CellIdentifier];
[cell.description setLineBreakMode:NSLineBreakByWordWrapping];
cell.description.numberOfLines = 0;
cell.description.font = [UIFont fontWithName:#"Helvetica" size:14.0];
}
Bracket *bracket = [brackets objectAtIndex:indexPath.row];
[cell.description setText:bracket.name];
[cell.bracketId setText:[NSString stringWithFormat:#"%#", bracket.bracketId]];
return cell;
}
I am experimenting on height, but that doesn't seem to matter because I can set the height to whatever, but it still shows truncated text.
Thanks!
Typically my approach to supporting variable height cells is to define a class method that can calculate sizing for a given model object:
+ (CGFloat)heightForBracket:(Bracket*)bracket;
The beauty of making it a class method is that you can share constants (padding values, font sizes, indentation levels, etc) with your code that actually implements the layout without having to expose them to any other classes. If you want to change those constants in the future, you only have to make the change in one place in the cell subclass. An example subclass implementation:
#define kPaddingHorizontal 10.0
#define kPaddingVertical 10.0
#define kFontSizeName 17.0
+ (CGFloat)heightForBracket:(Bracket*)bracket {
// determine the dimensions of the name
UIFont *nameFont = [UIFont systemFontOfSize:kFontSizeName];
CGFloat nameSize = [bracket.name sizeWithFont:nameFont
constrainedToSize:CGSizeMake(300, CGFLOAT_MAX) // 300 is the width of your eventual label
lineBreakMode:NSLineBreakByWordWrapping];
// Apple recommends all cells be at least 44px tall, so we enforce a minimum here
return MAX(44, nameSize.height + 20 + kPaddingVertical*2); // 20 is space for the subtitle label
}
- (id)initWithReuseIdentifier:(NSString *)reuseIdentifier {
self = [super initWithStyle:UITableViewCellStyleSubtitle reuseIdentifier:reuseIdentifier];
if (self) {
// bracket name
self.textLabel.numberOfLines = 0; // 0 makes this variable height
self.textLabel.font = [UIFont systemFontOfSize:kFontSizeName];
self.textLabel.lineBreakMode = NSLineBreakByTruncatingTail;
self.textLabel.backgroundColor = [UIColor clearColor];
// if you wanted to hardcode a specific width, to a subview do it here as a constant and then share it with heightForBracket:
// bracket number
self.detailTextLabel.numberOfLines = 1;
self.detailTextLabel.font = [UIFont systemFontOfSize:14.0];
self.detailTextLabel.lineBreakMode = NSLineBreakByTruncatingTail;
self.detailTextLabel.backgroundColor = [UIColor clearColor];
}
return self;
}
- (void)setBracket:(Bracket*)bracket {
_bracket = bracket;
self.textLabel.text = bracket.name;
self.detailTextLabel.text = [NSString stringWithFormat:#"%#", bracket.bracketId];
}
You can then call heightForBracket: in tableView:heightForRowAtIndexPath::
- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath {
Bracket *bracket = [brackets objectAtIndex:indexPath.row];
return [BracketTableCell heightForBracket:bracket];
}
tableView:cellForRowAtIndexPath: becomes very easy, just set the appropriate bracket on the cell:
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
static NSString *CellIdentifier = #"BCell";
BracketTableCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];
if (cell == nil) {
cell = [[BracketTableCell alloc] initWithReuseIdentifier:CellIdentifier];
}
Bracket *bracket = [brackets objectAtIndex:indexPath.row];
cell.bracket = bracket;
return cell;
}
A few notes:
this assumes the cell is not using Auto Layout
this explicitly hardcodes a width for the cell/label, which may or may not fit your use case
you should never name a property description because that is a method that already exists on the NSObject protocol
other enhancements would be caching the result of heightForBracket: to improve scrolling performance, especially if you start doing sizing logic for a ton of subviews
#gdubs you can use custom UITableViewCells
for reference you can use Customize Table View Cells for UITableView
I guess it would be easy for you to customize UILabels then. like if you want to add mutilple lines then set TitletLabel.numberOfLines=0; and if you want wordwrapping TitleLabel.lineBreakMode=NSLineBreakByWordWrapping;. There are other options in word wrapping as well.
The key to happiness with labels and Autolayout is to set the preferredMaxLayoutWidth property on the label. Without this labels don't wrap properly (or at all, in some cases, which is what you were seeing before, I think?).
Set the value to your maximum line width, and the labels should then behave correctly.
I think the problem has to do with the width of your label, if you are using auto layout expand your label's width to fill the parent cell and add trailing and leading to superview constraints, so that it resizes with it.