Problem with transparent text background in UITableView - iphone

I've got an annoying problem in my tableview. I was able to achive color-changing cells (blue/white/blue/...), but now I'm in trouble with my text, which has a white background on the blue cells.
I've tried for testing to set a background color to red:
// try to set the backgroundcolor of the text ???
cell.textLabel.text.backgroundColor = [UIColor redColor];
which doesn't work; hmph.
Please have a look at my code below; can anybody tell me what's wrong and how I can solve my problem by giving the text a transparent background?
// Customize the appearance of table view cells.
- (UITableViewCell *)tableView:(UITableView *)tableView
cellForRowAtIndexPath:(NSIndexPath *)indexPath {
static NSString *CellIdentifier = #"Cell";
UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];
if (cell == nil) {
cell = [[[UITableViewCell alloc] initWithStyle:UITableViewCellStyleSubtitle reuseIdentifier:CellIdentifier] autorelease];
}
// Set up the cell
cell.textLabel.text=[RssFeedNodes objectAtIndex:indexPath.row];
// try to set the backgroundcolor of the text ???
cell.textLabel.text.backgroundColor = [UIColor redColor];
// show image in cell
NSString *imageName=#"rss.png";
cell.imageView.image=[UIImage imageNamed:imageName];
// changing colors in cells
NSInteger row = [indexPath row];
if (row % 2){
cell.contentView.backgroundColor = [UIColor whiteColor];
}
else {
cell.contentView.backgroundColor = [UIColor colorWithRed:0.90f green:0.95f blue:1.0f alpha:1.0f];
}
return cell;
}

Your answer is found (and described very well) here: http://undefinedvalue.com/2009/11/02/easy-gradient-backgrounds-uitextviewcells
My brief summary of the solution: Subclass the UITableViewCell, and then use your subclass when creating instances in cellForRowAtIndexPath.
You then need to override just one method (setSelected) in your subclass UITableViewCell:
(void)setSelected:(BOOL)selected animated:(BOOL)animated {
[super setSelected:selected animated:animated];
// Configure the view for the selected state
for (UIView *view in self.contentView.subviews) {
view.backgroundColor = [UIColor clearColor];
}
}
The reason appears to be that the built-in UITableViewCell class will set the label background to white (or selected color) when being displayed based on the selection state in the table in the setSelected method. Substitute your own, call the base class implementation, then set your subview backgrounds to clear in order to let your contentView background shine through.

text has no background, but textLabel has. so
[[cell textLabel] setBackground:[UIColor redColor]];

You'll need to add your own UILabel label onto the cell, and set the background colour of that to transparent. For some reason the label that a table cell has does not have a settable background colour.
Something like:
UILabel* label = [[UILabel alloc] init];
label.frame = CGRectMake( 20, 10, 200, 22 );
label.backgroundColor = [UIColor clearColor];
label.opaque = NO;
label.text = #"your text here:";
[cell addSubview:label];
[label release];
In this example I've set the frame for the label fairly arbitrarily (well not, actually, this was modified from some of my own real code). You may need to be more dynamic with the sizing, in which case you'll probably need to subclass the cell and override setFrame to keep the label's frame in sync. But hardcoded values should get you going for now.

#define LABEL_TAG 99
// whatever your label rect size should be... change as appropriate
UIlabel = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, 300.0, 30.0)];
label.tag = LABEL_TAG;
// set up alignment, font, autoresizemask, etc.
label.backgroundColor = [UIColor clearColor];
label.opaque = NO;
[cell.contentView addSubview:label];
[label release];
Something to watch out for is that you're not adding your own label to a reuseable table cell more than once. By setting a known view.tag property you can get at (or discover existence of) the UILabel view. [cell viewWithTag:LABEL_TAG]
Whenever you dequeue a reuseable cell, first get the reference to your label view, then do what you would normally do if you were using the UITableCell's textLabel.

Related

Cannot change indicatorView.backgroundColor in a tableView

I changed the backgroundColor of my UITableView (with a pattern image) and I want my cells entirely white, I assigned a backgroundColor to cell.contentView. I cannot change the backgroundColor of accessoryType. How can I do that ?
Here is an illustration of what I have for the moment:
- (void)viewDidLoad
{
[super viewDidLoad];
UIImage *bgImg = [UIImage imageNamed:#"backgroundPattern.png"];
self.tableView.backgroundColor = [UIColor colorWithPatternImage:bgImg];
}
- (UITableViewCell *)tableView:(UITableView *)tableView
cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
static NSString *CellIdentifier = #"Cell";
UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];
if (cell == nil) {
cell = [[[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:CellIdentifier] autorelease];
// Put an arrow
cell.accessoryType = UITableViewCellAccessoryDisclosureIndicator;
// In order to have my cell with a white background. I assign a whiteColor
// to my contentView because assign color to the cell.backgroundColor property doesn't
// to work..
cell.contentView.backgroundColor = [UIColor whiteColor];
// HERE is my problem, I would assign a backgroundColor of my accessoryType.
// Because for the moment, just behind the accessoryType this is a the color of the
// tableView.backgroundColor
cell.accessoryView.backgroundColor = [UIColor whiteColor];
}
// Configure the cell...
return cell;
}
Set the table view cell's background color, not the content view's.
cell.backgroundColor = [UIColor whiteColor];
The content view is only for the content your table view cell manages. Any additional views (like the accessor view or the reordering views when the table is in edit mode) are handled internally by the table view and table view cell class. They resize the content view as necessary, so you can't rely on the content view to set the background color.
EDIT: Sorry, this is incorrect. The correct place to set state-based properties on the table view cell is in the -tableView:willDisplayCell:forRowAtIndexPath: method of UITableViewDelegate. Set the cell's background color here.
I don't think you can change the background color of a standard accessory view. Instead of using UITableViewCellAccessoryDisclosureIndicator, set cell.accessoryView to an UIImageView, using your custom image.

Delete confirmation issue on iPhone

I have added a light white/gray color to the background to see what happens when the "Delete Confirmation" is on. My problem is that when the delete button animates on screen, it does not reposition the content of my cell so I have this strange overlapping issue. Could anybody please help me? Do I have to make my own animation etc for this? Thank you.
EDIT ADDED CODE: (I have removed the autoresizing because I don't get it to work..)
- (UITableViewCell *)tableView:(UITableView *)tv cellForRowAtIndexPath:(NSIndexPath *)indexPath {
static NSString *LogCellId = #"LogCellId";
UITableViewCell *cell = [tv dequeueReusableCellWithIdentifier:LogCellId];
UILabel *lblSummary;
if (cell == nil) {
cell = [[[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:LogCellId] autorelease];
lblSummary = [[[UILabel alloc] initWithFrame:CGRectMake(10.0, 10.0, 260.0, 30.0)] autorelease];
lblSummary.font = [UIFont fontWithName:#"Helvetica-Bold" size:13];
lblSummary.tag = SUMMARY_TAG;
lblSummary.lineBreakMode = UILineBreakModeTailTruncation;
lblSummary.opaque = YES;
lblSummary.backgroundColor = [UIColor colorWithRed:240.0/255.0 green:240.0/255.0 blue:240.0/255.0 alpha:1.0];
[cell.contentView addSubview:lblSummary];
cell.contentView.backgroundColor = [UIColor colorWithRed:240.0/255.0 green:240.0/255.0 blue:240.0/255.0 alpha:1.0];
} else {
lblSummary = (UILabel *)[cell viewWithTag:SUMMARY_TAG];
}
lblSummary.text = [self.logList objectAtIndex:[indexPath row]];
return cell;
}
You have most likely added your control/s to the cell-view itself. Dont do that but add your control/s to the UITableViewCell.contentView - that will make sure that your cell gets properly animated when switching to edit-mode.
Added after seeing the updated question
Also make sure your just control/s have autoresizingMask = UIViewAutoresizingFlexibleWidth; set.
Depends how you did you cell. But the autoresizeMask property might help ;)
"The content view of a UITableViewCell object is the default superview for content displayed by the cell. If you want to customize cells by simply adding additional views, you should add them to the content view so they will be positioned appropriately as the cell transitions into and out of editing mode."
http://developer.apple.com/library/ios/#documentation/uikit/reference/UITableViewCell_Class/Reference/Reference.html#//apple_ref/occ/instp/UITableViewCell/contentView

Autoresizing of UILabels in a UITableViewCell

I am adding my own UILabels to the contentView of a UITableViewCell because I need more control over the layout than the default UITableViewCellStyles provide. In essence I want the detailLabel have priority over the textLabel so the textLabel gets truncated.
I have the following code in my UITableViewController:
- (UITableViewCell *)tableView:(UITableView *)tableView
cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
static NSString * const kCellIdentifier = #"CustomCell";
UITableViewCell * cell =
[tableView dequeueReusableCellWithIdentifier:kCellIdentifier];
UILabel * titleLabel, * dateLabel;
if(cell == nil)
{
cell = [[[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault
reuseIdentifier:kCellIdentifier] autorelease];
cell.accessoryType = UITableViewCellAccessoryDisclosureIndicator;
titleLabel = [[[UILabel alloc] init] autorelease];
titleLabel.tag = kTitleLabelTag;
titleLabel.autoresizingMask = UIViewAutoresizingFlexibleWidth;
dateLabel = [[[UILabel alloc] init] autorelease];
dateLabel.tag = kDateLabelTag;
dateLabel.textColor = [UIColor blueColor];
dateLabel.autoresizingMask = UIViewAutoresizingFlexibleLeftMargin;
[cell.contentView addSubview:titleLabel];
[cell.contentView addSubview:dateLabel];
}
[self configureCell:cell atIndexPath:indexPath];
return cell;
}
- (void)configureCell:(UITableViewCell *)pCell
atIndexPath:(NSIndexPath *)pIndexPath
{
const float kHeight = 44.0, kLeftIndent = 8.0, kOverallWidth = 293.0,
kGap = 1.0;
UILabel * titleLabel, * dateLabel;
titleLabel = (UILabel *)[pCell.contentView viewWithTag:kTitleLabelTag];
dateLabel = (UILabel *)[pCell.contentView viewWithTag:kDateLabelTag];
NSString * dateText = #"9:39 AM";
// Calculate the size of dateLabel
CGSize dateSize = [dateText sizeWithFont:[dateLabel font]
constrainedToSize:CGSizeMake(kOverallWidth, kHeight)];
const float dateXPos = kOverallWidth - dateSize.width;
dateLabel.frame = CGRectMake(dateXPos, 0.0, dateSize.width, kHeight);
titleLabel.frame = CGRectMake(kLeftIndent, 0.0,
dateXPos - kLeftIndent - kGap, kHeight);
titleLabel.text = #"Some potentially very long text which will be wrapped.";
dateLabel.text = dateText;
pCell.contentView.backgroundColor = [UIColor purpleColor];
}
The code above produces incorrect results. When the table view is initially shown, it looks like figure 1) in this image of the renderings.
So there is a unwanted gap on the right of all the dateLabels. (the purple background is just for better visibility what is going on)
When dragging the tableview up like in 2) in the image, it then bounces back and looks like 3).
The first row has now exactly the layout I wanted and which calculated in configureCell:atIndexPath:. I guess this behavior happens because the cells get re-used and then configured again.
So it feels like I am missing some kind of initialization, I have tried calling setNeedsLayout and layoutSubviews of pCell and pCell.contentView but never achieved an initial correct rendering.
Only when I set the autoresizingMask of titleLabel and dateLabel to UIViewAutoresizingNone I get a correct initial rendering, then however the swipe to delete does not work because the delete button gets rendered over the dateLabel.
What do I have to change in my code so that all cells get rendered initially like the first cell in the third picture?
Thanks!
PS: I would like to have inlined the pictures but unfortunately I do not have enough reputation for that.
A good, and maybe simpler way to do this is to:
First Create a custom UITableViewCell subclass which you can setup using Interface Builder. If "MyTableViewCell" is your custom cell view you initialize it in CellForRowAtIndexPath like this:
MyTableViewCellClass *cell = (MyTableViewCellClass *)[tableView dequeueReusableCellWithIdentifier:#"MyTableViewCellClass"] autorelease];
if (!cell)
cell = [[[MyTableViewCellClass alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:#"MyTableViewCellClass"] autorelease];
// Call specific methods on your cell to pass information to it, not for display
[cell setProperties:...];
Then implement the layoutSubviews method in your custom UITableViewCell subclass. For instance:
-(void) layoutSubviews
{
// You must call this first to make sure your cell gets current parent information
[super layoutSubviews];
// Retrieve the content view bounds. This will include the edit symbols when present (delete button and ordering symbol
float inset = 5.0;
CGRect bounds = [[self contentView] bounds];
// Keep on going here with your own view layout.
}
Doing this you basically separate the cell model (CellForRowAtIndexPath) from the cell view (your custom implementation of cell drawing). If you later change the implementation (layout) of your cell you can do this easily simply by changing your cell layout without worrying about the CellForRowAtIndexPath method.
If you work with a storyboard , you should disable the "Use Auto Layout" in the File Inspector!
Then set the cell's property autoresizesSubviews
- (void)awakeFromNib
{
// Initialization code
self.autoresizesSubviews=YES;
}
The final step is configure the frame of the Label , overriding the method layoutSubviews of the UITableViewCell class
-(void)layoutSubviews{
[super layoutSubviews];
CGFloat top=VerticalPadding;
CGFloat left=HorizentalPadding;
CGFloat width=CGRectGetWidth(self.frame)-2*HorizentalPadding;
CGFloat height=CGRectGetHeight(self.frame)-2*VerticalPadding;
CGRect rect=CGRectMake(left, top, width, height);
self.Label.frame=rect;
}

UITableView is loading every cell

UITableview should only load cells that is visible at first right? My tableview is loading every cell initially which slows it down a lot. I'm using around 1000 rows. Only want it to load a cell when it has to (like user scrolling down). Anyone have any ideas why it's doing this?
I know cellForRowAtIndexPath is getting called initially for every cell. The height of the cells is 89.
-(UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
static NSString *CellIdentifier = #"Cell";
UILabel *textName = nil;
UIImageView* image = nil;
unsigned int DATA_TAG = 1001;
unsigned int IMG_TAG = 1002;
// Retrieve a cell is Available
cell = [aTableView dequeueReusableCellWithIdentifier:CellIdentifier];
// Check if no new cell was available
if (cell == nil)
{
cell = [[[UITableViewCell alloc] initWithFrame:CGRectZero reuseIdentifier:CellIdentifier] autorelease];
// Set the Accessory Data
textName = [[[UILabel alloc]initWithFrame:CGRectMake(cell.frame.origin.x, 80, cell.frame.size.width, 20)]autorelease];
textName.tag = DATA_TAG;
textName.textAlignment = UITextAlignmentCenter;
textName.backgroundColor = [UIColor clearColor];
textName.highlightedTextColor = [UIColor colorWithRed:1.0 green:1.0 blue:0.9 alpha:1.0];
textName.textColor = [UIColor colorWithRed:0.0 green:0.0 blue:0.0 alpha:1.0];
textName.lineBreakMode = UILineBreakModeWordWrap;
[cell.contentView addSubview:textName];
//Set the Image Data
image = [[[UIImageView alloc]initWithFrame:CGRectMake(cell.frame.origin.x, cell.frame.origin.y, cell.frame.size.width, 80)]autorelease];
image.tag = IMG_TAG;
image.contentMode= UIViewContentModeScaleAspectFit;
[cell.contentView addSubview:image];
}
Accessory* acc= [[AccessoryManager sharedManager].currentList objectAtIndex:indexPath.row];
if(acc == nil)
return cell;
textName= (UILabel*)[cell.contentView viewWithTag:DATA_TAG];
textName.text= acc.accessoryName;
image= (UIImageView*)[cell.contentView viewWithTag:IMG_TAG];
[image setImage:acc.accessoryImage];
return cell;
}
Can you please post some code? The method -tableView:cellForRowAtIndexPath is only called when a new "slot" for a potential cell opens up, so you'd need to be doing something majorly wrong to be "loading every cell" initially!
Do you perhaps mean that you're loading all the data initially, and wish to do that in batches?
That's right - it should only load the ones it has to. What is your UITableView's rowHeight? If that was extremely low, the Table might expect to have to load all the cells
If that's not the problem, can you paste in your tableView:cellForRowAtIndexPath: code?
Are you invoking cellForRowAtIndexPath yourself, for example from heightForRowAtIndexPath? If so, you don't need to create the cell to determine its height.

UITableView section header is all black

For an iPhone, I've got a UITableView that is grouped, has one section, and in which I've set up a section header that's a UILabel object from the nib. When the table view displays, the header shows up as a stripe of solid black -- no text.
In heightForHeaderInSection I've set the height to be the frame.size.height of the UILabel object. When I change the height in IB, the black stripe's height changes. So I know that the .m file has latched on to the right UILabel object.
In the debugger, in viewForHeaderInSection, it seems that the width of the UILabel object is zero, and the height is 1079574528, and the text is null.
Any thoughts on what I'm doing wrong?
Not sure what you're doing wrong, but here is some example code that might help (from a post on my blog):
#define SectionHeaderHeight 40
- (CGFloat)tableView:(UITableView *)tableView heightForHeaderInSection:(NSInteger)section {
if ([self tableView:tableView titleForHeaderInSection:section] != nil) {
return SectionHeaderHeight;
}
else {
// If no section header title, no section header needed
return 0;
}
}
- (UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section {
NSString *sectionTitle = [self tableView:tableView titleForHeaderInSection:section];
if (sectionTitle == nil) {
return nil;
}
// Create label with section title
UILabel *label = [[[UILabel alloc] init] autorelease];
label.frame = CGRectMake(20, 6, 300, 30);
label.backgroundColor = [UIColor clearColor];
label.textColor = [UIColor colorWithHue:(136.0/360.0) // Slightly bluish green
saturation:1.0
brightness:0.60
alpha:1.0];
label.shadowColor = [UIColor whiteColor];
label.shadowOffset = CGSizeMake(0.0, 1.0);
label.font = [UIFont boldSystemFontOfSize:16];
label.text = sectionTitle;
// Create header view and add label as a subview
UIView *view = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 320, SectionHeaderHeight)];
[view autorelease];
[view addSubview:label];
return view;
}
I had the same issue and haven't quite figured why the black bar..
BUT, instead of providing the header and footer views in delegate methods,
if i set values for tableView.tableHeaderView and tableView.tableFooterView, its all fine !
Can you post the code for your heightForHeaderInSection and your viewForHeaderInSection functions? The theory behind what you're doing sounds correct, but without seeing the code, it would be nearly impossible to figure out the issue...
It sounds like you place a label on the view in IB and are trying to use that as your header view - which is not the proper way of doing things. If you aren't using viewForHeaderInSection, then give that a try.. like this:
- (UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section
{
UILabel *lbl;
lbl.text = #"Header for The Only Section";
//define other properties for the label - font, shadow, highlight, etc...
return lbl;
}
3.1.3 doesnt like [UIColor clearColor]; try using the same background color as your tableview
I observed same behavior when refreshing after datasource is loaded.
I noticed this was due to the way i was refreshing table view.
//[self loadView]; this caused the section header to go black.
[self.tableView reloadData]; // this works!