I have a UITableView and would like to apply a background image to all cells. My height for each cell is variable. How should I go about creating the background image?
cell.contentView.backgroundColor = [UIColor alloc] initWithPatternImage:[UIImage imageNamed:#"background.png"]];
One idea is to place a UIImage with a stretchable image on it. That way, it doesn't matter what the row height is, the image can stretch to match.
You can also do something similar to what Matt has done here with a gradient layer
In cellForRowAtIndexPath method you can give cell background color
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
static NSString *cellIdentifier = #"Cell";
UITableViewCell *cell = (UITableViewCell *)[tableView dequeueReusableCellWithIdentifier:cellIdentifier];
if (cell == nil)
{
cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:cellIdentifier];
}
// for cell background color
cell.backgroundView =[[UIImageView alloc] initWithImage:[ [UIImage imageNamed:#"tab2.png"] stretchableImageWithLeftCapWidth:0.0 topCapHeight:5.0] ];
// for selection color
cell.selectedBackgroundView =[[UIImageView alloc] initWithImage:[ [UIImage imageNamed:#"selected.png"] stretchableImageWithLeftCapWidth:0.0 topCapHeight:5.0] ];
return cell;
}
Related
I have following code of cellForRowAtIndexPathmethod:
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
static NSString *CellIdentifier = #"champion cell";
UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];
UIImage *cellIcon = [UIImage imageNamed:[arrayOfChampionPictures objectAtIndex:indexPath.row]];
[[cell imageView] setImage:cellIcon];
cell.imageView.frame = CGRectMake(0.0f, 0.0f, 70.0f, 70.0f);
cell.imageView.layer.cornerRadius = 7;
[cell.imageView.layer setMasksToBounds:YES];
cell.textLabel.text = [arrayOfChampionNames objectAtIndex:indexPath.row];
return cell;
}
Where arrayOfChampionNames is local database stored in NSMutableArray that contains pictures names. It's about 103 cells with images in my UITableView. It lags at first scroll from beginning to end, after that it's scrolling smoothly. There's no lags on simulator.
Possible solutions I came up with, but i don't know how to realise them
Load images after scrolling,
Preload image data into UITableView.
I'll tell you where the lag is coming from - corner radius. Pre compute the images rounded corners. Doing them dynamically kills scrolling performance.
You forgot something:
static NSString *CellIdentifier = #"champion cell";
UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];
if (cell == nil) {
cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleSubtitle reuseIdentifier:CellIdentifier];
}
This way you'll actually utilize the reusable identifier that you created.
So I had the following code:
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
NSString *CellIdentifier = #"FriendsCell";
FriendData * fd = [self.friendsDataSource_ objectAtIndex:indexPath.row];
UITableViewCell *cell = (UITableViewCell *)[tableView dequeueReusableCellWithIdentifier:CellIdentifier];
if (cell == nil) {
cell = [[[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:CellIdentifier] autorelease];
cell.selectionStyle = UITableViewCellSelectionStyleNone;
}
[cell.imageView setImageWithURL:[NSURL URLWithString:fd.imageUrl_]];
[cell.imageView setFrame:CGRectMake(0, 0, 30, 30)];
[cell.textLabel setText:fd.name_];
return cell;
}
However, I am not seeing the imageView in the cell. What am I doing wrong?
I got the same problem with SDImageCache as well. My solution is to put a placeholder image with the frame size you want.
UIImage *placeholder = [UIImage imageNamed:#"some_image.png"];
[cell.imageView setImage:placeholder];
[cell.imageView setImageWithURL:[NSURL URLWithString:fd.imageUrl_]];
1) Set Image with URL is not an iOS method. It's something custom and that may be the problem. But until you publish it can't help there.
2) I think cell.imageView will ignore "setFrame". I can't get that to work in any of my table cells using an image. It always seems to default to width of the image.
3) Typically you set the image using cell.imageView.image = your_Image. The ImageView is READONLY and probably the ImageView frame is private.
4) I think you are going to need to create a custom cell of your own.
Usage of a method with placeholder will fix it.
[cell.imageView setImageWithURL:[NSURL URLWithString:fd.imageUrl_]placeholderImage:[UIImage imageNamed:#"placeholder"]];
you need to return cell at the end of the method
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
NSString *CellIdentifier = #"FriendsCell";
FriendData * fd = [self.friendsDataSource_ objectAtIndex:indexPath.row];
UITableViewCell *cell = (UITableViewCell *)[tableView dequeueReusableCellWithIdentifier:CellIdentifier];
if (cell == nil) {
cell = [[[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:CellIdentifier] autorelease];
cell.selectionStyle = UITableViewCellSelectionStyleNone;
}
[cell.imageView setImageWithURL:[NSURL URLWithString:fd.imageUrl_]];
[cell.imageView setFrame:CGRectMake(0, 0, 30, 30)];
[cell.textLabel setText:fd.name_];
return cell;
}
I am having a problem setting a UIImageView or UIView on the cell of the Grouped table on the iPhone.
For this I am using this code
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
static NSString *SimpleTableIdentifier = #"SimpleTableIdentifier";
NSArray *listData =[self.tableContents objectForKey:[self.sotreKeys objectAtIndex:[indexPath section]]];
UITableViewCell * cell = [tableView
dequeueReusableCellWithIdentifier:SimpleTableIdentifier];
if(cell == nil) {
cell = [[[UITableViewCell alloc]
initWithStyle:UITableViewCellStyleDefault
reuseIdentifier:SimpleTableIdentifier] autorelease];
}
if(indexPath.section == 1 && indexPath.row ==1)
{
UIImageView *imageView = [[UIImageView alloc] initWithFrame:CGRectMake(240, 14, 40, 40)];
imageView.image = [UIImage imageNamed:[NSString stringWithFormat:#"Back.png",nil]];
[cell.contentView addSubview:imageView];
[imageView release];
}
NSUInteger row = [indexPath row];
cell.textLabel.text = [listData objectAtIndex:row];
return cell;
[tableView deselectRowAtIndexPath:indexPath animated:YES];
}
But it is not placed on the cell . When ever I select the row it will display for that time only, what is the problem?
Does anyone have any idea what the problem is. I think the image is getting overwritten by the cell .
Thanks in advance
try making
cell.accessoryType = UITableViewCellAccessoryNone;
It seems that you are adding image on accessory view.
If yes, you can add cell.accessoryView = imageView;
I do have some ideas of what might be happening.
You are adding an image view to the contentView then you are setting the text of the textLabel which is a part of the contentView and is probably sitting on top of the image. Try this and see if you can at least see your image on the left side.
cell.imageView.image = [UIImage imageNamed:#"Back.png"];
Now when you dequeue cells you need to remember that all the views you added last time you created the cell are still there, so as you scroll you will just be stacking back buttons on top of each other.
Also the following line [tableView deselectRowAtIndexPath:indexPath animated:YES]; is dead code because it occurs after a return statement. You might want to place that in the delegate call – tableView:willDisplayCell:forRowAtIndexPath:
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
static NSString *SimpleTableIdentifier = #"SimpleTableIdentifier";
NSArray *listData =[self.tableContents objectForKey:[self.sotreKeys objectAtIndex:[indexPath section]]];
UITableViewCell * cell = [tableView dequeueReusableCellWithIdentifier:SimpleTableIdentifier];
if(cell == nil) {
cell = [[[UITableViewCell alloc]
initWithStyle:UITableViewCellStyleDefault
reuseIdentifier:SimpleTableIdentifier] autorelease];
}
if(indexPath.section == 1 && indexPath.row ==1)
{
UIImageView *imageView = [[UIImageView alloc] initWithFrame:CGRectMake(240, 14, 40, 40)];
imageView.image = [UIImage imageNamed:#"Back.png"];
[cell.contentView addSubview:imageView];
[imageView release];
}
cell.textLabel.text = [listData objectAtIndex:indexPath.row];
return cell;
}
Make sure that your image is named "Back.png" not "back.png" because the iOS on the phone is key sensitive.
I have a table-cell which has all default settings. And I put an image on the ImageView on the left, and I put some random text on TextLabel.
and I adjust cell's height using below method.
(CGFloat)tableView:(UITableView *) tableView heightForRowAtIndexPath: (NSIndexPath *)indexPath
The problem is the left ImageView's frame size is different depend on the cell's height.
See the below image, the 4th cell's height is bigger than others and it's image is slightly right compare to other images.
What causes this and how can I solve this probelm??
-- added
This is my cellForRowAtIndexPath method.
static NSString *CellIdentifier = #"Cell";
UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];
if (cell == nil) {
cell = [[[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefaultt reuseIdentifier:CellIdentifier] autorelease];
}
cell.textLabel.numberOfLines = 0;
cell.textLabel.text = [self GetSelectionForRowAtIndexPath:indexPath];
NSString *path = [[NSBundle mainBundle] pathForResource:#"icon_notSelected" ofType:#"png"];
UIImage *theImage = [UIImage imageWithContentsOfFile:path];
cell.imageView.image = theImage;
This shows the imageView does not get bigger even if I put more height on the cell.
UIImage *image = [UIImage imageNamed:#"your_image.png"];
cell.imageView.image = image;
put this code in - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
If will show the image in each cell of the table in same line.
You can do it only by Code. No need of IB for this.
Give the imageview a fixed frame and then center it vertically in the cell.
Something along these lines:
imageview.frame = CGRectMake(5, floor(cellHeight/2)-20, 40, 40);
Or just use the imageview property of UITableViewCell.
When selecting, and holding, one of my custom cells for a UITableView plain-style table, it displays my custom selection color (redColor in this case), but then if I keep it held down and scroll, the custom selection color and the custom background disappear (showing through to the UIImageView behind the table.
The UITableView is created in IB and has a background set to clearColor to allow an image to show through.
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:kCellIdentifier];
if (cell == nil)
{
cell = [[[UITableViewCell alloc] initWithStyle:UITableViewCellStyleSubtitle
reuseIdentifier:kCellIdentifier]
autorelease];
cell.selectionStyle = UITableViewCellSelectionStyleBlue;
/* Background */
cell.backgroundView = [[[UIImageView alloc] init] autorelease];
cell.selectedBackgroundView = [[[UIImageView alloc] init] autorelease];
}
cell.backgroundView.backgroundColor = [[UIColor alloc] initWithPatternImage:[UIImage imageNamed:#"customBackground"]];
cell.selectedBackgroundView.backgroundColor = [UIColor redColor];
return cell;
}
Can anyone help? Thanks!
Ok I solved this. Basically you cannot use initWithPatternImage when customizing a UITableViewCell. After it is selected, it's background view must either go transparent, or be removed from the view hierarchy.
Use the following:
((UIImageView*)cell.backgroundView).image = [UIImage imageNamed:#"customBackground"];
((UIImageView*)cell.selectedBackgroundView).image = [UIImage imageNamed:#"selectedBackground"];