I'm coding a universal iOS app (iPhone & iPad) that's mostly based on a TableView. Every cell has multiple text zones that I need to resize in height depending on the content. I define all the tables and cells in Storyboard and I really want to keep it that way (much easier to play with the sizes graphically see what it's going to be).
The problem is that I need a lot of info to compute the final size of the cell (storyboard heights of cell and subviews, label widths, font size..). I used to just have constants in my code where I would hand write the values but:
it's a pain to change every time I make a storyboard change
my labels can have different width (different type of cells, iPhone/iPad) and I have many of them so in that case it's really a ton of constants to keep track of
I use that solution:
In the Cell I have static variables that are set once to remember the sizes (it's taken from storyboard then so that's nice):
static float cellDefaultHeight;
static float contactsLabelDefaultHeight;
static float contactsLabelDefaultWidth;
static float contactsLabelFontSize;
-(void) awakeFromNib
{
static dispatch_once_t onceToken;
dispatch_once(&onceToken, ^{
// instantiate static variables with the constants
cellDefaultHeight = self.contentView.bounds.size.height;
contactsLabelDefaultHeight = self.contacts.bounds.size.height;
contactsLabelDefaultWidth = self.contacts.bounds.size.width;
contactsLabelFontSize = self.contacts.font.pointSize;
});
}
+ (CGFloat) heightForCellWithData:(NSDictionary *)data
{
// use constants and data to compute the height
return height
}
In the Table before computing any cell size I have to instantiate one to set the static variables:
- (CGFloat)tableView:(UITableView *)tableView
heightForRowAtIndexPath:(NSIndexPath *)indexPath
{
// get one instance before any size computation
// or the constant won't be there
static dispatch_once_t onceToken;
dispatch_once(&onceToken, ^{
static NSString *CellIdentifier = #"identifier";
[tableView dequeueReusableCellWithIdentifier:CellIdentifier];
});
return [MyCell heightForCellWithData:theData];
}
It feels so hackish I feel I'm completely missing something, but I couldn't think of something else. Is there a good way to do it?
Thanks!
First of all I think you should use custom cell for doing such things. Now every time if you need to change the width/height you just need the bounds of that cell. And regarding label and text fields width/height you can do like (self.textview.bounds) and then you can set the offset according to your need. This is not the hack but pure coding according to logic as every time if you change the device it will take the bounds accordingly so no need to remember anything.
Hope this works :)
Related
If you want to to pack the cells neatly together even if some of the other content in another cell is bigger, how do one do that?
If you look at the picture below, the first string is the biggest, but if I want to pack the other cells as neatly and tightly together as the first one, regardless of the size, how is this done?
I want to do this regardless of the size both from the sides and up and down.
I want the cells to be laid out as the arrows in this picture are pointing.
UPDATE: the first line of text is two cells packed togheter.
You have to use UICollectionViewFlowLayout to achieve this
Note: Below information's are taken from Raywenderlich blog
You can subclass UICollectionViewLayout to create your own custom layouts , but Apple has graciously provided developers with a basic “flow-based” layout called UICollectionViewLayout. It lays elements out one after another based on their size, quite like a grid view. You can use this layout class out of the box, or subclass it to get some interesting behavior and visual effects.
You can see a good example in Raywenderlich blog
Example code:
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath {
NSString *searchTerm = self.searches[indexPath.section]; FlickrPhoto *photo =
self.searchResults[searchTerm][indexPath.row];
CGSize retval = photo.thumbnail.size.width > 0 ? photo.thumbnail.size : CGSizeMake(100, 100);
retval.height += 35; retval.width += 35; return retval;
}
- (UIEdgeInsets)collectionView:
(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout insetForSectionAtIndex:(NSInteger)section {
return UIEdgeInsetsMake(50, 20, 50, 20);
}
There are more delegate methods you can implement than this. Examples are given below
collectionView:layout:sizeForItemAtIndexPath
collectionView:layout:insetForSectionAtIndex:
Two UITableViewCell related questions:
In my custom UITableViewCell I loop through an array (of which I do not know how many objects it holds) and add a UILabel displaying some text for each object in that array.
This means I have to adjust the height of the cell so that these labels fit in. How can I do this?
When going into edit mode, I have the cells indent, however I do not want this. I have tried the following:
cell.shouldIndentWhileEditing = NO;
and
-(BOOL)tableView:(UITableView *)tableView shouldIndentWhileEditingRowAtIndexPath:(NSIndexPath *)indexPath
{
return NO;
}
Both sadly failed, I have I no idea why. How could I possible remedy this?
Any help is much appreciated with either of these issues, thanks.
You can specify the height for every row with the delegate method [UITableViewDelegate tableView:heightForRowAtIndexPath:].
Just change what the method returns and the reload your table.
This method actually has nothing to do with the indendation of cell content:
Asks the delegate whether the background of the specified row should be indented while the table view is in editing mode.
You can try to set indentationWidth but I never managed to make it work.
Fortunately, it's easy to change everything you want in [UITableView layoutSubviews] method.
Example:
- (void)layoutSubviews {
[super layoutSubviews];
self.contentView.frame = self.bounds;
}
You may also need to set
- (UITableViewCellEditingStyle)tableView:(UITableView *)tableView editingStyleForRowAtIndexPath:(NSIndexPath *)indexPath;
{
return UITableViewCellEditingStyleNone;
}
For the dynamic height part there are plenty of other answers and a quick google found a tutorial here
I have a UITableView, and custom cells on it. On cell I have a UILabel, but before I set text to UILabel I did really hard work on text...like find the text in another text, highlight some words on it, and only then I set it to label. So when I scroll my list, it has delay because of this hard work. Any idea how to improve performance ? Maybe to do all hard work in another thread ??
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:
(NSIndexPath *)indexPath {
static NSString *customCellIdentifier =
#"CellIdentifier";
UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:
customCellIdentifier];
if (cell == nil) {
NSArray *nib = [[NSBundle mainBundle] loadNibNamed:#"CustomTableRow"
owner:self options:nil];
if (nib.count > 0) {
cell = self.customTableRow;
}
}
self.myLabel.text = [self giveMeTheTextThatINeed];
return cell;
}
[self giveMeTheTextThatINeed] - did a hard work on text that takes some time.
Make a new thread for every cell. this thread calls [self giveMeTheTextThatINeed:indexPath], and resets the label(s) in the cell. I'm assuming you can't get your data any faster, so you want to maintain the scrolling in the table and spin the hard work out to the thread. When the thread is finished, update the cell. You see this a lot in cells with a thumbnail image where the thumbnail only gets uploaded after a while, and is blank or has a placeholder there first.
Any way for you to precompute the values you'll need? In other words, start doing your "hard work" (in another thread) when the app starts, and store it somewhere so that, if it's ready, you can just grab it when the table view asks for it. It's hard to answer without more detail about what the hard work is and how much data we're talking about.
I don't know about just doing the hard work on another thread as you suggested, since you still have to give something to tableView:cellForRowAtIndexPath:. I suppose you could return some kind of template cell at first, and then update it with reloadRowsAtIndexPaths:withRowAnimation: when the hard work is done.
I believe the method giveMeTheTextThatINeed needs to take the current cell as one of the parameters (or another parameter dependent on the cell content), e.g.: [self giveMeTheTextThatINeed:indexPath]. Otherwise you could store the text as an instance variable and set it in all cells from that variable.
So, with that in mind, the easiest way is to store the result of the computation in an additional dictionary, where indexPath (or the other parameter) would be the key:
self.myLabel.text = [self->myDictionary objectForKey:indexPath];
Now, you could either pre-populate that dictionary before the cells are drawn (e.g. in viewWillAppear), or cache them once they are calculated so that they are not recalculated when the cells are scrolled, e.g.:
NSString* calculatedText = [self->myDictionary objectForKey:indexPath];
if(calculatedText == nil)
{
calculatedText = [self giveMeTheTextThatINeed:indexPath];
[self->myDicationary setValue:calculatedText forKey:indexPath];
}
self.myLabel.text = calculatedText;
Is it possible to create a custom UITableViewCell that resizes depending on the length of the text that I want to put into? If possible, how do I do this?
#EquinoX yes it is possible through heightForRowAtIndexPath delegate....Please have a look on this and Dynamic Height UITableViewCell they have same thing you are asking.
Good Luck!
Absolutely,
I like to set all the data on my cell by passing it a model (just an NSObject with data in it). Then I create a custom cell that can have its data set by the model, and I add a class level function to return the size. It looks like this.
TableViewDelegate:
-(float)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath {
XTableViewCellModel *model = [self modelForIndexPath:indexPath];
return [XTableViewCell cellHeight:model];
}
XTableViewCell:
+(CGFloat)cellHeight:(XTableViewCellModel*)model {
CGSize titleSize = [model.title sizeWithFont:model.titleFont
constrainedToSize:CGSizeMake(280, 9999)
lineBreakMode:UILineBreakModeTailTruncation];
return titleSize.height;
}
Note that setting lineBreakMode to UILineBreakModelTailTruncation only takes effect after the height of 9999 points is reached. Until then the text wraps normally.
Check out my open source framework around this stuff. It has a lot of resizable cell types built by default: https://github.com/andrewzimmer906/XCell
Look at this Sample Code it uses exactly what you looking for.
The standard Grouped UITableView style allows UITableViewCells to be drawn with rounded corners at the top and bottom of each section. How is this accomplished? How does the cell know its own location within its section, and how does it know when to change its rounded edges?
I want to make my own rounded cells, and I have images to use, but don't know when to show which image
Note: I already know how the UITableView works, and I know how to use it. I just thought that since a UITableView is able to automatically draw rounded corners at the correct places, I should be able to as well, without needing to add anything to my data source or delegate.
NSIndexPath *indexPath = [(UITableView *)self.superview indexPathForCell: self];
int rows = [(UITableView *)self.superview numberOfRowsInSection:indexPath.section];
if (indexPath.row == 0 && rows == 1) {
// the one and only cell in the section
}
else if (indexPath.row == 0) {
//top
}
else if (indexPath.row != rows - 1) {
//middle
}
else {
//bottom
}
It's very simple. suppose cell is the object, whose position is to be found out.
UITableView* table = (UITableView *)[cell superview];
NSIndexPath* pathOfTheCell = [table indexPathForCell:cell];
NSInteger sectionOfTheCell = [pathOfTheCell section];
NSInteger rowOfTheCell = [pathOfTheCell row];
There is sectionLocation method of UITableViewCell that returns integer telling you what you need:
1 - middle cell
2 - top cell
3 - bottom cell
4 - single cell
I had no issues using this in several production apps since 2010.
UPDATE: one of our binaries was automatically rejected recently (end of 2018) because we were using 'sectionLocation' property, so it's not a good option anymore.
Add something like this into your header files and you can use it:
typedef NS_ENUM(NSInteger, MMMTableViewCellLocation) {
MMMTableViewCellLocationUndefined = 0,
MMMTableViewCellLocationMiddle = 1,
MMMTableViewCellLocationTop = 2,
MMMTableViewCellLocationBottom = 3,
MMMTableViewCellLocationSingle = 4
};
#interface UITableViewCell ()
/** Undocumented method of UITableViewCell which allows to know where within section the cell is located,
* so the cell can draw its borders properly. */
- (MMMTableViewCellLocation)sectionLocation;
/** Override this one to know when the value of sectionLocation changes. */
- (void)setSectionLocation:(MMMTableViewCellLocation)sectionLocation animated:(BOOL)animated;
#end
You can use
- (NSIndexPath *)indexPathForCell:(UITableViewCell *)cell
for this issue. In my example I am using this to scroll the cell (with custom content) to the top of the view.
If you need more robust and general stuff, take a look at http://cocoawithlove.com/2009/04/easy-custom-uitableview-drawing.html - Matt Gallagher shows what you need, pretty effectively. He basically recreates UITableViewController from UIViewController, while adding ability to use your own custom graphics. I'm just working on applying this to one my projects, so far it looks it would do the job.
Unfortunately, I have found no solution to this problem, and have resorted to subclassing UITableViewController and UITableViewCell into a generic solution that I can extend as necessary.
You don't do this in cell. Rounded corners are drawn in [tableView viewForHeaderInSection] and viewForFooterInSection.
The way I do it is to use Plain tableview style, then use these two views for roundness and cells are normal, no rounds.
Without getting into who draws what, you can know which cell is the last cell in its section inside of cellForRowAtIndexPath very easily.
You're passed in the indexPath of the cell you need to provide, right? You're also passed the tableView.
call [tableView numberofRowsInSection:indexPath.section] and if it's == ([indexPath.row]-1) you know you're being asked to supply the last cell in that section.
At the time that cellForRowAtIndexPath is being called, the cell is guaranteed to be at the indexPath passed in.
To expand upon Darren's answer (which I found most useful, thanks Darren!), what you can do is to iterate through all of the superviews' until you find the parent UITableView. This should be future proof since you do not rely on a fixed hierarchy of views.
I use a recursive method that will return the UITableView if it finds one or return nil if there is none.
- (UITableView *)parentTableViewOf:(UIView *)view {
Class class = [view.superview class];
NSLog(#"Class : %#", NSStringFromClass(class));
if([view.superview isKindOfClass:[UITableView class]]) {
return (UITableView *)view.superview;
} else {
return [self parentTableViewOf:view.superview];
}
return nil;
}
So far I've used this one and it seems to work without hiccups. Hope it helps! :)
The cells dont know where they go...The table view has cells, You are the one telling the table view WHAT goes in the cell. You do this in the DataSource where you implement cellForRowAtIndexPath...The way this works :
An index path has a row and a section
For a grouped table view
A section pertains to a group, and a row pertains to 1 entry in that section,
the way UITableView knows how many rows are in a section and how many sections there are is the DataSources methods numberOfSectionInTableView and the method numberOfRowsInSection, this will make the right calls to cellForRowAtIndexPath, it is up to you to recognize which section and row is being queried and you need to build your cell according to these specifications.
A good way to do this i s you can have a Dictionary with keys of section names and values of NSArray with the values that go in that section.
So you implementation for numberOfSectionsInRows would look like
return [[dictionary allKeys] count]
And the implmentation of numberOfRowsInSection would look like
NSString* key=[[dictionary allKeys] objectAtIndex:sectionNumber]
return [[dictionary objectForKey:key] count]
You can always refer to the UITableView programming guide at http://developer.apple.com/iphone/library/documentation/UserExperience/Conceptual/TableView_iPhone/Introduction/Introduction.html
Hope that helps
Simply add a property to your custom UITableViewCell (depending on implementation) class that contains an int, NSNumber, or an NSIndexPath specifying which one it is. In you're using a data structure instead, then put it in you element in that data structure. Then you simply set the property when you create the data structure, something like elt.id=i, and then you access it in the cellForRowAtIndexPath, something like if (elt.id == 0 || elt.id == n-1) where n is the number of rows in your section.
I might have totally missed your question, but if I did, just comment and I'll post again.