adding subviews to cell view showing strange behavior - iphone

Question

I m trying to add cells to a tableView
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
static NSString *MyIdentifier = #"MyIdentifier";
UITableViewCell *cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:MyIdentifier];
cell.accessoryType = UITableViewCellAccessoryNone;
[cell setSelectionStyle:UITableViewCellEditingStyleNone];
// Set up the cell
cell.backgroundColor = [UIColor clearColor];
UIButton *buyBtn = [UIButton buttonWithType:UIButtonTypeCustom];
UIImageView *img;
UILabel *lbl;
UIImageView *backImage;
UILabel *textLabel;
UILabel *detailTextLabel;
NSInteger val = [indexPath row] * 3;
if (UI_USER_INTERFACE_IDIOM() == UIUserInterfaceIdiomPad)
{
//*buyBtn = [[UIButton alloc] initWithFrame:CGRectMake(x, y, w, h)];
[buyBtn setImage:[UIImage imageNamed:#""] forState:UIControlStateNormal];
//*img = [[UIImageView alloc] initWithFrame:CGRectMake(x, y, w, h)];
[img setImage:[UIImage imageNamed:#""]];
//*lbl = [[UILabel alloc] initWithFrame:CGRectMake(x,y,w,h)];
}
else
{
backImage = [[UIImageView alloc] initWithFrame:CGRectMake(2, 4, 316, 62)];
[buyBtn setFrame:CGRectMake(257, 100, 57, 24)];
img = [[UIImageView alloc] initWithFrame:CGRectMake(257, 75, 57, 24)];
lbl = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, 57, 24)];
textLabel = [[UILabel alloc] initWithFrame:CGRectMake(4, 4, 230, 25)];
detailTextLabel = [[UILabel alloc] initWithFrame:CGRectMake(4, 25, 230, 30)];
backImage.image = [UIImage imageNamed:#"shop-bg.png"];
[buyBtn setImage:[UIImage imageNamed:#"buy_button"] forState:UIControlStateNormal];
[img setImage:[UIImage imageNamed:#"price_button.png"]];
lbl.center = img.center;
lbl.textAlignment = UITextAlignmentCenter;
lbl.text = [self.original_List objectAtIndex:val+2];
lbl.backgroundColor = [UIColor clearColor];
textLabel.font = [UIFont fontWithName:#"Arial Rounded MT Bold" size:14];
textLabel.backgroundColor = [UIColor clearColor];
textLabel.text = [self.original_List objectAtIndex:val];
detailTextLabel.text = [self.original_List objectAtIndex:val+1];
detailTextLabel.backgroundColor = [UIColor clearColor];
detailTextLabel.font = [UIFont fontWithName:#"Arial Rounded MT Bold" size:10];
textLabel.textColor = [UIColor blackColor];
detailTextLabel.textColor = [UIColor whiteColor];
detailTextLabel.numberOfLines = 2;
}
[buyBtn setTag:[indexPath row]];
[buyBtn addTarget:self action:#selector(buyBtnPressed:) forControlEvents:UIControlEventTouchDown];
[cell addSubview:backImage];
[cell addSubview:detailTextLabel];
[cell addSubview:textLabel];
[cell addSubview:buyBtn];
[cell addSubview:img];
[cell addSubview:lbl];
return cell;
}
From figure it can be seen that The first Cell DOES NOT Contain the added image, label and button, however if other cells are scrolled those who lost view turn transparent while those who are in view are okay.
Why is my three subview not getting added from first cell, my textLabel and detailTextLabel are added as they should.

Answer 1

First of all you don't dequeue the cell and always create a new one without reusing. Try adding something like this (not sure if you need autorelease, depends on weather you use ARC or not):
RecentsTableViewCell *cell = [_tableView dequeueReusableCellWithIdentifier:cellIdentifier];
if (cell == nil) {
cell = [[[RecentsTableViewCell alloc] initWithStyle:UITableViewCellStyleSubtitle
reuseIdentifier:cellIdentifier] autorelease];
}
Second, if you are not using ARC (auto ref counting) then you have bunch of lost refs here.
[[Class alloc] init] adds the ref and addSubview also adds the ref. I'm wondering what xcode "analyse" build says on this.
Third, imho all labels you added to the cell need also their "frame" property to set up, not just number of lines, etc.

Answer 2

here is example of how I did it. I created cell class derived what what you need (CopyableCell in my case).
This is *.h file.
#import <UIKit/UIKit.h>
#import "CopyableCell.h"
#interface RecentsTableViewCell : CopyableCell
#property (readonly, retain) UILabel *titleLabel;
#property (readonly, retain) UILabel *detailsLabel;
#property (readonly, retain) UILabel *subdetailsLabel;
#property (readonly, retain) UILabel *subtitleLabel;
#end
Here is *.m file.
#import "RecentsTableViewCell.h"
#interface RecentsTableViewCell ()
// Redeclare property as readwrite
#property (readwrite, retain) UILabel *titleLabel;
#property (readwrite, retain) UILabel *subtitleLabel;
#property (readwrite, retain) UILabel *detailsLabel;
#property (readwrite, retain) UILabel *subdetailsLabel;
#end
#implementation RecentsTableViewCell
#synthesize titleLabel;
#synthesize subtitleLabel;
#synthesize detailsLabel;
#synthesize subdetailsLabel;
- (void) layoutSubviews
{
int leftMargin = 30;
int rightMargin = 6;
[super layoutSubviews];
CGRect cellRect = self.contentView.frame;
int width = cellRect.size.width - (leftMargin + rightMargin);
CGSize constraintSize = CGSizeMake(300, MAXFLOAT);
CGSize titleSize = [titleLabel.text sizeWithFont:titleLabel.font
constrainedToSize:constraintSize
lineBreakMode:UILineBreakModeTailTruncation];
CGSize detailsSize = [detailsLabel.text sizeWithFont:detailsLabel.font
constrainedToSize:constraintSize
lineBreakMode:UILineBreakModeTailTruncation];
if (titleSize.width > titleLabel.frame.size.width ||
detailsSize.width > detailsLabel.frame.size.width) {
CGRect detailsFrame = detailsLabel.frame;
detailsFrame.size.width = detailsSize.width;
detailsFrame.origin.x = cellRect.size.width -
(detailsSize.width + subdetailsLabel.frame.size.width + rightMargin);
CGRect titleFrame = titleLabel.frame;
titleFrame.size.width = width - detailsSize.width - subdetailsLabel.frame.size.width - 5;
titleLabel.frame = titleFrame;
detailsLabel.frame = detailsFrame;
}
}
- (id)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier
{
self = [super initWithStyle:style reuseIdentifier:reuseIdentifier];
if (self) {
CGRect cellRect = self.contentView.frame;
cellRect.size.height = 61;
self.contentView.frame = cellRect;
int leftMargin = 30;
int rightMargin = 6;
int x = cellRect.origin.x + leftMargin;
int y = cellRect.origin.y;
int width = cellRect.size.width - (leftMargin + rightMargin);
int height = cellRect.size.height;
int titleWidth = width * 0.75;
int alldetailsWidth = width - titleWidth;
int detailsWidth = alldetailsWidth * 0.65;
int subdetailsWidth = alldetailsWidth - detailsWidth;
int titleHeight = height * 0.38;
int subtitleHeight = height - titleHeight;
self.titleLabel = [[[UILabel alloc]
initWithFrame:CGRectMake(x, y, titleWidth, titleHeight)] autorelease];
self.titleLabel.font = [UIFont boldSystemFontOfSize:18.0f];
self.titleLabel.highlightedTextColor = self.textLabel.highlightedTextColor;
self.titleLabel.textAlignment = UITextAlignmentLeft;
self.titleLabel.autoresizingMask = UIViewAutoresizingFlexibleWidth |
UIViewAutoresizingFlexibleBottomMargin;
[self.contentView addSubview:titleLabel];
self.detailsLabel = [[[UILabel alloc]
initWithFrame:CGRectMake(cellRect.size.width -
(detailsWidth + subdetailsWidth + rightMargin),
y + 4, detailsWidth, titleHeight - 4)] autorelease];
self.detailsLabel.font = [UIFont boldSystemFontOfSize:13.0f];
self.detailsLabel.textColor = [UIColor colorWithRed:0.12 green:0.439 blue:0.847 alpha:1];
self.detailsLabel.textAlignment = UITextAlignmentRight;
self.detailsLabel.highlightedTextColor = self.textLabel.highlightedTextColor;
self.detailsLabel.autoresizingMask = UIViewAutoresizingFlexibleLeftMargin |
UIViewAutoresizingFlexibleHeight;
[self.contentView addSubview:detailsLabel];
self.subdetailsLabel = [[[UILabel alloc]
initWithFrame:CGRectMake(cellRect.size.width - (subdetailsWidth + rightMargin),
y + 6, subdetailsWidth, titleHeight - 6)] autorelease];
self.subdetailsLabel.font = [UIFont systemFontOfSize:11.0f];
self.subdetailsLabel.textColor = [UIColor colorWithRed:0.12 green:0.439 blue:0.847 alpha:1];
self.subdetailsLabel.textAlignment = UITextAlignmentCenter;
self.subdetailsLabel.highlightedTextColor = self.textLabel.highlightedTextColor;
self.subdetailsLabel.autoresizingMask = UIViewAutoresizingFlexibleLeftMargin |
UIViewAutoresizingFlexibleHeight;
[self.contentView addSubview:subdetailsLabel];
self.subtitleLabel = [[[UILabel alloc]
initWithFrame:CGRectMake(x, y + titleHeight, width, subtitleHeight - 2)] autorelease];
self.subtitleLabel.highlightedTextColor = self.textLabel.highlightedTextColor;
self.subtitleLabel.font = [UIFont systemFontOfSize:13.0f];
self.subtitleLabel.textColor = [UIColor darkGrayColor];
self.subtitleLabel.numberOfLines = 2;
self.subtitleLabel.lineBreakMode = UILineBreakModeTailTruncation;
self.subtitleLabel.autoresizingMask = UIViewAutoresizingFlexibleWidth |
UIViewAutoresizingFlexibleTopMargin;
[self.contentView addSubview:subtitleLabel];
self.accessoryType = UITableViewCellAccessoryDisclosureIndicator;
}
return self;
}
- (id) init
{
return [self initWithStyle:UITableViewCellStyleSubtitle reuseIdentifier:#"RecentsCell"];
}
- (void)setSelected:(BOOL)selected animated:(BOOL)animated
{
[super setSelected:selected animated:animated];
}
- (void) dealloc
{
self.titleLabel = nil;
self.subtitleLabel = nil;
self.detailsLabel = nil;
self.subdetailsLabel = nil;
[super dealloc];
}
#end
Note that I'm not using ARC so if you use this code, modify it accordingly. Here is how I use this class in my table view controller.
- (UITableViewCell *)tableView:(UITableView *)_tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
static NSString *cellIdentifier = #"TransactionCell";
NSMutableArray *data = searching ? searchResult : dataSource;
NSDictionary *object = [data objectAtIndex:[indexPath row]];
RecentsTableViewCell *cell = [_tableView dequeueReusableCellWithIdentifier:cellIdentifier];
if (cell == nil) {
cell = [[[RecentsTableViewCell alloc] initWithStyle:UITableViewCellStyleSubtitle
reuseIdentifier:cellIdentifier] autorelease];
}
cell.selectionStyle = UITableViewCellSelectionStyleBlue;
cell.indexPath = indexPath;
cell.delegate = self;
cell.titleLabel.text = #"Transaction title";
if (pendingTransaction) {
cell.titleLabel.textColor = [UIColor grayColor];
cell.titleLabel.font = [UIFont systemFontOfSize:cell.titleLabel.font.pointSize];
} else {
if (!isGreen)
cell.titleLabel.textColor = [UIColor colorWithRed:0.733 green:0.098
blue:0.098 alpha:1];
else
cell.titleLabel.textColor = cell.textLabel.textColor;
cell.titleLabel.font = [UIFont boldSystemFontOfSize:cell.titleLabel.font.pointSize];
}
cell.subtitleLabel.text = #"Transaction subtitle";
cell.detailsLabel.text = #"Some details like location";
cell.subdetailsLabel.text = #"200 USD";
return cell;
}
This produces table very similar to what you see in iphone call app, that is, title, subtitle, subdetails in blue at rightmost position of the cell, etc.
You can see it in Torchoo app in the appstore. It is free to use and you can use test account to log in and see it as example.
Hope this helps a bit.

Answer 3

Are you continuously adding subView to cell not removing any subView?
Check condition while adding subView like code not exact I have written:
if ([[cell.contentView subviews] count]==0) {
[self.contentView addSubview:imageView];
}
If cell content View doesn't contain that View then add it.

Answer 4

Previous answer is correct although there is more that you could fix.
The part of code that adds subviews should only be called in case when the cell is not dequeued. Otherwise you'll be adding multiple instances of the same buttons, views etc.
[cell addSubview:backImage];
[cell addSubview:detailTextLabel];
[cell addSubview:textLabel];
[cell addSubview:buyBtn];
[cell addSubview:img];
[cell addSubview:lbl];
Also I guess it is better to add to cell.contentView instead of directly to cell. So it should look something like this:
RecentsTableViewCell *cell = [_tableView dequeueReusableCellWithIdentifier:cellIdentifier];
if (cell == nil) {
cell = [[[RecentsTableViewCell alloc] initWithStyle:UITableViewCellStyleSubtitle
reuseIdentifier:cellIdentifier] autorelease];
/*Create your subviews here*/
[cell.contentView addSubview:backImage];
[cell.contentView addSubview:detailTextLabel];
[cell.contentView addSubview:textLabel];
[cell.contentView addSubview:buyBtn];
[cell.contentView addSubview:img];
[cell.contentView addSubview:lbl];
}
// Below just set properties of existing subviews of the cell: color, textColor, text etc.
// You need to retrieve them and one way is to assign them to properties in
// RecentsTableViewCell or set the tag property of the subviews and retrieve
// them using e.g. [cell.contentView viewWithTag:kBuyButtonTag].
if (UI_USER_INTERFACE_IDIOM() == UIUserInterfaceIdiomPad) {
...
}
else {
...
}