UITableView GridLayout Problems with Reusable UITableViewCells - ios

I am creating a Grid (spreadsheet) like layout for iPad app using UITableView. I got the grid part working but since I am dynamically adding UILabels to the cells the reusable portion is not working fine. Here is the code:
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:#"FundCell"];
Fund *fund = [funds objectAtIndex:[indexPath row]];
float labelWidth = 1024 / ([columnNames count] -1 );
for(NSString *columnName in columnNames)
{
UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(x, 0, labelWidth, 44)];
label.backgroundColor = [UIColor clearColor];
label.text = [fund valueForKey:columnName];
x += label.bounds.size.width;
[cell addSubview:label];
}
x = 0;
return cell;
}
Result:

You're adding new labels in every reuse. You should only add the labels once, store references to them (usually as properties of a custom cell subclass) and just set the text value thereafter.
You may find it easier to define a custom cell in a xib and position your labels there, creating outlets. You can register this for reuse with the table, it will create or dequeue a cell as needed.

Related

iOS, UICollectionViewCell malformed UILabel

I've got a UICollectionViewController which displays blocks of telephone numbers (see image). When the view loads they all appear fine however when i either begin scrolling, changing rotation, or execute a search function which alters the (mutable) array in which the data is sourced, i see these malformed labels. I did think it might be the iOS simulator however from looking at it, it appears to be an issue with the positioning of UICollectionViewCells.
-(UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath{
static NSString *identifier = #"cell";
UICollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:identifier forIndexPath:indexPath];
cell.backgroundColor = [UIColor grayColor];
cell.layer.cornerRadius = 5;
[cell setClipsToBounds: YES];
CGRect cellBound = CGRectMake(25, 12.5, 150, 12.5); // x, y, w, h
UILabel *title = [[UILabel alloc] initWithFrame:cellBound];
NSString *number = [[searchNumbers objectAtIndex:indexPath.row] valueForKey:#"number"];
number = [number stringByReplacingOccurrencesOfString:#"+44" withString: #"0"];
title.text = number;
[cell addSubview:title];
return cell;
}
It should be noted that i am using UICollectionViewFlowLayout
As #Woodstock mentioned, this is due to "over-adding" UILabel objects to your cell.
Rather than his solution, which still adds the UILabel to the cell in -collectionView:cellForRowAtIndexPath:, the better MVC solution is this:
// A UICollectionViewCell subclass
// Make sure to pick the correct "init" function for your use case
- (instancetype)init... {
self = [super init...];
if (self != nil) {
[self setupCell];
}
return self;
}
- (void)setupCell {
self.backgroundColor = [UIColor grayColor];
self.clipsToBounds = YES;
self.layer.cornerRadius = 5;
CGRect cellBound = CGRectMake(25, 12.5, 150, 12.5); // x, y, w, h
// Assumes you've set up a UILabel property
self.titleLabel = [[UILabel alloc] initWithFrame:cellBound];
[cell addSubview:self.titleLabel];
}
- (void)configureWithNumber:(NSString *)number {
number = [number stringByReplacingOccurrencesOfString:#"+44" withString: #"0"];
self.titleLabel.text = number;
}
// In your UICollectionViewDataSource/Delegate implementation
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath {
static NSString *identifier = #"cell";
UICollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:identifier forIndexPath:indexPath];
NSString *number = [[searchNumbers objectAtIndex:indexPath.row] valueForKey:#"number"];
[cell configureWithNumber:number];
return cell;
}
Basically, you want to set up and add views only when setting up the cell initially. After that, you should pass in a data value/object and configure the cell. If you have cells that need different controls (2 labels vs. 1, etc.), then make multiple subclasses. This way, you encapsulate your classes for cleaner code and better reuse.
I believe this is happening because you are adding more and more UILabel subviews to your cell (over and over again as cellForItemAtIndexPath is called). You need to add a check and only add a label subview if the cell doesn't already have one. The dequeued cells already have the label subview if they're being reused, if this label already exists you simply need to set it's text from your datasource.
Pseudocode:
for subview in subviews {
if subview.isKindOfClass(UILabel) {
// assign the new text label.
}
else
{
// create and add the UILabel subView.
}
}
This is an easy mistake to make as dequeueReusableCellWithReuseIdentifier can either give you a previously used cell OR as you've seen give you a fresh one initially. Which is why the app works correctly when you start, but gets messy as you scroll.

TableView rows get mixed up when scrolling

I am using a tableview in a UIViewController and I have subclass of UITableViewCell.
I register the cell in viewDidLoad;
- In cellForRowAtIndexPath, I use dequeueReusableCellWithIdentifier to get the cell and I reset all the labels to the right values; However, when the table scrolls, the top rows and the bottom rows get mixed up and the labels get interchanged. I don't know why this would happen when I am resetting the cells to the right values for each row. Do you have any idea why the mix up happens.
[self.myFoldersTableView registerClass:[QConnectFoldersTVCell class] forCellReuseIdentifier:QMY_FOLDERS_CELL_ID];
and
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:NSIndexPath *)indexPath
{
QConnectFoldersTVCell *cell = (QConnectFoldersTVCell *)[tableView dequeueReusableCellWithIdentifier:cellId forIndexPath:indexPath];
NSMutableDictionary *cellDataDict = [self findCellDataAtIndexPath:indexPath];
// Configure the cell...
cell.mainLabel.text = cellDataDict[FOLDER_CELL_DICT_KEY_MAIN_TEXT];
cell.detailLabel.text = cellDataDict[FOLDER_CELL_DICT_KEY_DETAIL_TEXT];
cell.folderCellType = [cellDataDict[FOLDER_CELL_DICT_KEY_TYPE] intValue];
return cell;
}
I want to add that I have printed out the label values being set for the row and the data is right for each row. The cells are being reset to the correct data in the above function. So I don't know why something else is displayed on screen.
I found the reason for the mixup. In my tableViewCell subclass, I was using layoutSubviews to do initialization for the labels because the actual size of the cell isn't available in init but is available in layoutSubviews. Removing layoutSubviews override seems to have stopped the row mixup of data/values.
- (void)layoutSubviews
{
[super layoutSubviews];
CGSize size = self.contentView.frame.size;
CGFloat mainHeight = ((size.height * 6)/10) - 6.0;
CGFloat detailHeight = ((size.height*4)/10) - 6.0;
self.mainLabel = [[UILabel alloc] initWithFrame:CGRectMake(8.0, 4.0, size.width - 16.0, mainHeight)];
self.detailLabel = [[UILabel alloc] initWithFrame:CGRectMake(8.0, 4.0+(self.mainLabel.frame.size.height)+4.0, size.width - 16.0, detailHeight)];
}

How to set the same width between custom UITableViewCells and UITableView?

I created several cells with Interface Builder, and I'm using them to fill a UITableView. In other words, I have 3 classes for 3 different kinds of cell, and an other view which contains a UITableView.
- My UITableView containing different kinds of cells :
Here's my problem :
On the iPhone emulator, it looks great. But on the iPad emulator, the custom cells width is fixed. The UITableView width fits to the screen width, so it's good, but the UITableViewCells does not fit to the UITableView. I want to force the custom UITableViewCells to take the UITableView width.
Is there anything to do in - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPathmethod, where I instanciate my custom cells ?
Or do I have to write a thing like self.fitToParent; in the custom cells header file ?
EDIT (schema) :
EDIT 2 (cellForRowAtIndexPath method) :
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
static NSString *cellIdentifierType1 = #"cellType1";
static NSString *cellIdentifierType2 = #"cellType2";
NSString *currentObjectId = [[myTab objectAtIndex:indexPath.row] type];
// Cell type 1
if ([currentObjectId isEqualToString:type1])
{
CelluleType1 *celluleType1 = (CelluleType1 *)[tableView dequeueReusableCellWithIdentifier:cellIdentifierType1];
if(celluleType1 == nil)
celluleType1 = [[CelluleType1 alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:cellIdentifierType1];
celluleType1.lblAuteur.text = #"Type1";
return celluleType1;
}
// Cell type 2
else if ([currentObjectId isEqualToString:type2])
{
CelluleType2 *celluleType2 = (CelluleType2 *)[tableViewdequeueReusableCellWithIdentifier:cellIdentifierType2];
if(celluleType2 == nil)
celluleType2 = [[CelluleType2 alloc]initWithStyle:UITableViewCellStyleDefault reuseIdentifier:cellIdentifierType2];
celluleType2.lblAuteur.text = #"Type2";
return celluleType2;
}
else
return nil;
}
}
I think uitableviewcell's width is the same as the tableview's width.You can try to set cell's background color to test it. cell.backgroundColor = [UIColor redColor] ;
You should create a class which inherit from UITableViewCell and override it's method - (void)layoutSubviews , adjust your content's frame there.
I resolved my problem using the following code in each custom cell class. It's not very clean, but I can't spend one more day on this issue...
- (void)layoutSubviews
{
CGRect contentViewFrame = self.contentView.frame;
contentViewFrame.size.width = myTableView.bounds.size.width;
self.contentView.frame = contentViewFrame;
}
Thank you for your help KudoCC.
- (void)awakeFromNib {
[super awakeFromNib];
// anything you write in this section is taken with respect to default frame of width 320.
}
awakeFromNib is called when [tableView dequeueReusableCellWithIdentifier:CellIdentifier forIndexPath:indexPath]; is processed- anything you write in section is taken with respect to default frame of width 320.
You need to make another custom function and call it after cell gets initialized.
For eg:-
#implementation CheckinTableViewCell{
UILabel *NameLabel;
UILabel *rollLabel;
}
- (void)awakeFromNib {
[super awakeFromNib];
NameLabel = [[UILabel alloc] initWithFrame:CGRectZero];
rollLabel = [[UILabel alloc] initWithFrame:CGRectZero];
[self.contentView addSubview:NameLabel];
[self.contentView addSubview:rollLabel];
}
-(void) bindView{
NameLabel.frame = CGRectMake(10, 10, self.contentView.frame.size.width-20, 20);
rollLabel.frame = CGRectMake(10, 30, NameLabel.frame.size.width, 20);
}
and call this function in tableview cellForRowAtIndex:-
-(UITableViewCell*) tableView: (UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{
static NSString *CellIdentifier = #"Cell";
CheckinTableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier forIndexPath:indexPath];
if(cell ==nil){
cell = [[CheckinTableViewCell alloc]initWithStyle:UITableViewCellStyleDefault reuseIdentifier:CellIdentifier];
}
cell.name = #"Harry";
cell.rollno = #"123456";
[cell bindView];
return cell;
}

Using dequeueReusableCellWithIdentifier for custom cells

Let's say that I have
- (UITableViewCell*)tableView:(UITableView*) cellForRowAtIndexPath:(NSIndexPath*)indexPath
{
static NSString *cellID = #"Cell Identifier";
UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:cellID];
if (!cell)
{
cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleSubtitle reuseIdentifier:cellID];
cell.selectionStyle = UITableViewCellSelectionStyleNone;
}
else
{
return cell;
}
UILabel * nameLabel = [[UILabel alloc] initWithFrame: CGRectMake( 0, 15, box.size.width, 19.0f)];
nameLabel.text = name;
[nameLabel setTextColor: [UIColor colorWithRed: 79.0f/255.0f green:79.0f/255.0f blue:79.0f/255.0f alpha:1.0f]];
[nameLabel setFont: [UIFont fontWithName: #"HelveticaNeue-Bold" size: 18.0f]];
[nameLabel setBackgroundColor: [UIColor clearColor]];
nameLabel.textAlignment = NSTextAlignmentCenter;
[cell addSubview: nameLabel];
}
What is that going to do?
If cell is not nil, and let's say you are at row 5, will it return the cell for row 5 with the exact text labels, etc?
Basically, my question is, if you have custom cells with labels, imageviews, etc. How do you use cellForRowAtIndexPath with dequeueReusableCellWithIdentifier?
You attempt to dequeue a cell. If the attempt failed (cell is nil), then you create a cell and configure it it's views (not the data inside the view). Afterwards, you populate the views with any data or settings that change cell-to-cell. Also, you should add any custom views to the cell's contentView, not the cell itself.
#define NAME_LABEL_TAG 1234
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
static NSString *cellID = #"Cell Identifier";
UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:cellID];
if (!cell) {
cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleSubtitle reuseIdentifier:cellID];
cell.selectionStyle = UITableViewCellSelectionStyleNone;
UILabel * nameLabel = [[UILabel alloc] initWithFrame: CGRectMake( 0, 15, box.size.width, 19.0f)];
nameLabel.tag = NAME_LABEL_TAG;
[nameLabel setTextColor: [UIColor colorWithRed: 79.0f/255.0f green:79.0f/255.0f blue:79.0f/255.0f alpha:1.0f]];
[nameLabel setFont: [UIFont fontWithName: #"HelveticaNeue-Bold" size: 18.0f]];
[nameLabel setBackgroundColor: [UIColor clearColor]];
nameLabel.textAlignment = NSTextAlignmentCenter;
[cell.contentView addSubview: nameLabel];
}
// Populate views with data and retrieve data for "name" variable
UILabel *nameLabel = (UILabel *)[cell.contentView viewWithTag:NAME_LABEL_TAG];
nameLabel.text = name;
// Return fully configured and populated cell
return cell;
}
If you have a complex cell, it's often easier to create it in Interface Builder and subclass UITableViewCell so you can have custom properties that refer to your Labels, Buttons, etc.
Yes, dequeueing a cell that you have already added those labels to will still have them and their text just as you left it when you created that particular cell.
Create a UITableViewCell subclass, let's call it MyTableViewCell that has properties holding the labels/imageViews/etc that it will need. Once you have either dequeued or alloc init'ed one of your MyTableViewCell, you can then set the text/images/etc on these properties. Like this:
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
static NSString *CellIdentifier = #"identifier";
MyTableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];
if (cell == nil) {
cell = [[MyTableViewCell alloc] initWithStyle:UITableViewStylePlain reuseIdentifier:CellIdentifier];
}
cell.nameLabel.text = name;
cell.imageView.image = anImage;
return cell;
}
One major issue with your method is the conditionals surrounding dequeueing and creating. In your method you only set up the cell the label when it is alloc init'ed (you instantly return a dequeued cell without formatting it). However, you want this set up to occur for both dequeued and manually instantiated cells. Notice how this happens in my method, the return statement is at the very bottom. This will ensure that both created and reused cells have the appropriate data.
EDIT: One important thing I left out, you will instantiate the properties of your cell in its initWithStyle: reuseIdentifier: method and add them as subviews to the cell. This is so when you go to set the text of the label (or whatever) in your cellForRowAtIndexPath method, it has already been created. Basically the cell manages creating its own views and the UITableView delegate only has to worry about filling those views with data.
UITableView at first ask you for number of expected cells. Then it's load through - tableView:cellForRowAtIndexPath: method cells which is will be displayed + some to smooth scrolling, more objects it doesn't create. Created objects (by user) stored in table view and you can access not used through dequeueReusableCellWithIdentifier: method. TableView ask user for modifying currently created cells when it's scrolling. If here is free object - take it from dequeueReusableCellWithIdentifier: another - create new one.
in order to not have to allocate every single table cell, a table only allocates what is needed. If only 8 cells fit on a page then a table view will only allocate 8 cells or 9 i don't remember if it has a padding. When you scroll a tableview and the cell goes off the page the cell is queued up to be re-used, instead of re-allocating a new cell the table view takes an existing one this process is called dequeue-ing. When you make/allocate your cells you give it an identifier, this identifier is used to retrieve a cell that is marked with that string.
You can either use this
- (id)dequeueReusableCellWithIdentifier:(NSString *)identifier forIndexPath:(NSIndexPath *)indexPath
This is available after iOS 6
Or you can also register your class somewhere in ViewDidLoad and use ResuseIdentifier, so you don't have to write the ResuseIdentifier part in CellForRowAtIndexpath
- (void)registerClass:(Class)cellClass forCellReuseIdentifier:(NSString *)identifier NS_AVAILABLE_IOS(6_0)
Hope this helps you...

Incorrect text wrapping in a UITableViewCell

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.

Resources