How can I set the background image of a grouped TableView correctly?

Question

I am new to iPhone development.

I know that there may be answers related to my question, but no one helped me.

According to the name, I have a UITableView with a Grouped style. I want to set a background image, but I cannot set it correctly.

But the problem is that as described in my screenshot.

Well, I want to display only the image viewing area, which is described by cells UITableView ( grouped )

Here is my code:

 self.tblView = [[UITableView alloc]initWithFrame:CGRectMake(0, 125, 320, 320) style:UITableViewStyleGrouped]; UIImageView *bgTableImageView = [[UIImageView alloc]initWithFrame:CGRectMake(0,0, 320, 320)]; bgTableImageView.image = [UIImage imageNamed:@"bgImage.png"]; self.tblView.backgroundColor=[UIColor clearColor]; [self.tblView setBackgroundView:bgTableImageView]; //self.tblView.backgroundView = nil; // self.tblView.opaque = NO; //self.tblView.bounces = NO; //self.tblView.scrollEnabled = YES; self.tblView.delegate=self; self.tblView.dataSource=self; self.tblView.separatorColor = [UIColor darkGrayColor]; self.tblView.separatorStyle = UITableViewCellSeparatorStyleSingleLine; [self.view addSubview:self.tblView]; 

Everything else worked fine and right, I only have questions about how to set the background image of UITableViewStyleGrouped ?

Answer 1

Try the following:

 UIImageView *av = [[UIImageView alloc] initWithFrame:CGRectMake(20, 20, 277, 58)]; av.backgroundColor = [UIColor clearColor]; av.opaque = NO; av.image = [UIImage imageNamed:@"categorytab1.png"]; cell.backgroundView = av; 

Answer 2

Use the following insatnd code to use UIImageView .

 self.tblView.backgroundView.backgroundColor = [UIColor colorWithPatternImage:[UIImage imageNamed:@"YourImage.png"]]; 

Otherwise,

 self.tblView.backgroundView.inputView.backgroundColor = [UIColor colorWithPatternImage:[UIImage imageNamed:@"tblbg.png"]]; 

Second option (This option is useful if it is not dependent on the UITableView Style)

1) change the style of UITableView , style:UITableViewStylePlain .
2) Add #import <QuartzCore/QuartzCore.h> Framework
3) Change the frame of a UITableView such as, CGRectMake(10, "asYouNeed", 300, "asYouNeed")
4) Give a rounded radius to you UITableView

 self.tblView.layer.cornerRadius = 10; // set Radius as you need 

And set UIImageView as BackGroundView from UITableView . (follow the code you provided in this question)

This above step is created by the UITableView with a rounded corner . I mentioned that this code is used if you were not dependent on UITableView Style, if TableView Style:Gropped important to you, then this option will not help you.

Thanks:)

Answer 3

First, some information on how the table works:

• UITableView has a background. This is what you see behind your cells.
• Each cell has three special views: contentView , backgroundView , selectedBackgroundView .
• backgroundView displayed below the contents of the cell when the cell is selected, selectedBackgroundView used instead.
• Usually your content should be in contentsView . Separating the background from the content allows the table to correctly animate the non-selected / selected transition. It is also important when a cell goes into edit mode - the contents are compressed / moved, and the editing controls (for example, the delete button or cell selection) can be displayed regardless of the content.
• The cell also directly contains the view of the separator (usually 1 or 2px tall view at the bottom of the cell, depending on separatorStyle ). Therefore, a cell is always at least 1 px higher than its contentsView .

Secondly, some information on how a grouped table works.

• The table has a special default background. You can remove / change it with backgroundView and backgroundColor .
• Cells in grouped table views have a smaller contentView . The cell still has the same width as the whole table, but the contentView has an offset on the left and right (about 10 points on the iPhone).
• backgroundView changed and includes a layer that draws borders, depending on the position of the cell (different for the first, last and middle cells). The border has the color specified in the separatorColor table.

Everything can be changed in your code!

One of the easiest ways to remove borders is to set separatorColor to [UIColor clearColor] . This will remove the cell separators, but you can add your own separator, for example

 cell = ... UIView* separator = [[UIView alloc] init]; separator.backgroundColor = ... separator.frame = CGRectMake(0.0f, table.bounds.size.width, table.rowHeight - 1.0f, 1.0f); separator.autoresizingMask = (UIViewAutoresizingMaskFlexibleTopMargin | UIViewAutoresizingMaskFlexibleWidth); [cell addSubview:separator]; //note we are adding it directly to the cell, not to contentsView 

You can also use an image ( UIImageView ) as a separator instead of a monochrome representation.

Another method is to set the backgroundView to nil for each cell.

Actually, you can completely ignore contentsView and directly add everything to the cell. You can then configure the following cell methods to update your cell when its state changes.

 - (void)setSelected:(BOOL)selected animated:(BOOL)animated { //update the cell text colors, backgrounds etc for the selected/not selected state //you don't have to call super // (the default implementation changes between backgroundView and selectedBackgroundView) } - (void)setHighlighted:(BOOL)highlited animated:(BOOL)animated { //update the cell text colors, backgrounds etc for the selected/not highlighted state //you don't have to call super // (the default implementation changes between backgroundView and selectedBackgroundView) //by giving empty implementation, you will block highlighting of cells } - (void)setEditing:(BOOL)highlited animated:(BOOL)animated { //you can use this method to add custom editing controls } - (void)willTransitionToState:(UITableViewCellStateMask)state { //use this method to change the layout of your contents //when the cells goes into one of the editing states } - (void)layoutSubviews { //update the frames of cell contents to match the new cell size //note that the cell doesn't have the correct size until it is added to the table, //this method is called when the cell already has the final size //you can also use this method to change the size/position of the `contentsView` } 

Edit: To solve your specific problems, the best solution is probably the following:

• Remove the default backgroundView from the table and add your own background (e.g. pure color, white, the color created from the template, or from UIImageView to backgroundView .
• Remove the default backgroundView from each cell and replace it with a UIImageView . You need three special images for the first, last and middle cells.

Answer 4

If you want to create your own user interface, try using

  _tblNews.backgroundColor = [UIColor clearColor]; _tblNews.backgroundView = nil; _tblNews.separatorColor = [UIColor clearColor]; _tblNews.separatorStyle = UITableViewCellSeparatorStyleNone; 

And create a nib for your cell, how you want to make your cell and load that cell into your data source method.

to download xib

 + (id)loadNibNamed:(NSString *)NibName { NSObject *cl = nil; if (NSClassFromString(NibName) != nil) { NSArray *arr = [[NSBundle mainBundle] loadNibNamed:NibName owner:self options:nil]; for (id cls in arr) { if([cls isKindOfClass:NSClassFromString(NibName)]) { cl = cls; break; } } } return cl; } 

make sure in xib you set the id to reuse the cell. Using this, you can easily customize the layout of the cells.

Answer 5

Set the UITableView background view to nil to make it transparent.

 [tableView setBackgroundColor:[UIColor colorWithPatternImage:[UIImage imageNamed:@"backgroundImage.png"]]]; tableView.opaque = NO; tableView.backgroundView = nil; 

Hope this helps you.

Answer 6

Do you want like this

Here is the code: -

Customize the background view of a UITableView anywhere. I did this in viewDidload.

 [_tblView setBackgroundView:[[UIImageView alloc] initWithImage:[UIImage imageNamed:@"url.jpg"]]]; 

And set the color of tableViewCellBackground to transparent in cellForRowAtIndexPath

  static NSString * cellIdentifier=@ "cellIdentifier"; UITableViewCell *cell=[tableView dequeueReusableCellWithIdentifier:cellIdentifier]; if (cell ==nil) { cell=[[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:cellIdentifier]; } cell.backgroundColor=[UIColor clearColor]; cell.textLabel.text=@ "goup styled"; return cell; 

Answer 7

Try it,

 UIView *backgroundView = [[UIView alloc] init]; [backgroundView setBackgroundColor:[UIColor colorWithPatternImage:[UIImage imageNamed:@"imageName.png"]]]; 

and in the table view, please set this property.

 UITableView *tableView = [[UITableView alloc] init]; [tableView setBackgroundView:backgroundView]; 

Hope this works for you.