establecer un ImageView como fondo para las secciones en una vista uitable agrupada

is there any possible way to set a UIImageView as a background for a section (let's say section #3) in a grouped UITableView? I'm not asking about viewForHeaderInSection 'coz I tried it but didn't work as expected. thanks so much in advance ...

preguntado el 10 de marzo de 12 a las 14:03

When you say "background" for a section, does that mean that you are setting the background of cells in a section, or setting the background of the tableview behind a section? -

4 Respuestas

My guess is that if you were to think very creatively, you could come up with a way to essentially swap the UITableView's backgroundView property as different sections are visible. This doesn't strike me as particularly elegant given that multiple sections might occupy the visible screen at one time, but perhaps I don't understand the question clearly.

The short answer is that there is not a defined/simple way to achieve this. The composition of a section is far removed from the background of a UITableView, and essentially the architecture isn't setup for what you want. I wouldn't assume to know the details of your implementation, but I would also urge caution: The visual and architectural characteristics of UITableView's are pretty well-considered. My personal opinion (again, I haven't seen what you're working on), is that different section backgrounds might overwhelm the user experience in many cases. I can also see cases where it may be a nice UI touch if executed properly.

In this case, if you still want to do it, here is the approach I'd take:

Essentially you're going to watch the position of your tableview's cells. You could do this in scrollViewDidScroll, or tableViewWillDisplay cell - or other places, I'm sure. But you need to know which cells are scroll on and off the screen, and you then need to be able to ask the upper-most-visible cell what it's section is. Once you've established which section it is you should currently be displaying, you can use that to scroll your own set of views representing each section's background.

Essentially, you're going to create each of your dynamic section background views in code, just UIView's, each with it's backgroundProperty set to a repeating pattern (obviously, heights will be dynamic). Add all your section background subviews (or preferably do it lazily) to your UITableView's backgroundView.

Now, as your scroll view scrolls, you're going to observe which rows and sections are coming in and out of the table's view. As rows in sections are scrolled, calculate the height of the section background (multiply the quantity of rows in the section by their heights) and adjust it's Y axis, which is sitting in but clipped by your tableView's backgroundView. As sections scroll on, you'll update the Y offset of the relevant section's background view. Phew!

Another idea might be to toss all your section background views, laid out vertically, in a UIScrollView, user interaction disabled. Place that scroll view in your table view's backgroundView, and then figure out the math to essentially "forward" scroll events from the tableview's scrolling view to your background scrolling view.

This will probably take a bit of work to find an implementation that keeps your animations all smooth and in sync, but, it's an approach that I think could be made to work.

respondido 10 mar '12, 16:03

thanks for the explanation, my implementation is simply a grouped table view with dynamic section creation (with dynamic number of cells in each section), each section must have a background image that will vastly enhance the look and feel of the page. - JAHelia

See new approach suggestion in answer. - isaac

nice and deep thinking, I like the second idea more because it is i guess simpler and easier but in general this will consume a lot of time but worth trying .. thanks a million dude ... you rock.. - JAHelia

Utilizan myTable.tableHeaderView = customHeaderView if your table has only one section.

viewForHeaderInSection might not have worked if you didn't return an object of type UIView or a subclass in your method. Add some code from your viewForHeaderInSection method to your question for a more precise answer.

EDITAR- Si por viewForHeaderInSection didn't work as expected, you mean that the header was clipped, then it might be because you have not have implemented the following method:

- (CGFloat)tableView:(UITableView *)tableView heightForHeaderInSection:(NSInteger)section

If not implemented, each section's height is set to an iOS valor por defecto.

respondido 10 mar '12, 15:03

viewForHeaderInSection didn't work as expected ( i have updated question text above), it returns a uiview but it will not look as expected for the implenetation. - JAHelia

create a custom headerView that looks something like this.


@interface CustomViewForHeader: UIView


#import "CustomViewForHeader.h"
@implementation CustomViewForHeader

-(id)initWithFrame:(CGRect)frame {
   self = [super initWithFrame:frame];

if (self != nil) {
    UIImageView *bgImage = [[UIImageView alloc]initWithFrame:self.frame];
    bgImage.image = [UIImage imageNamed:@"bill_headerBg.png"];
    [self addSubview:bgImage];
return self;

úsalo como:

- (CGFloat)tableView:(UITableView *)tableView heightForHeaderInSection:(NSInteger)section {
    return 50.0;

-(UIView*)tableView:(UITableView*)tableView viewForHeaderInSection:(NSInteger)section {
   CustomViewForHeader *customView = [[CustomView alloc]initWithFrame:CGRectMake(0,0,320,50)]
    return customView;

respondido 10 mar '12, 16:03

this view will cover the header area only, it will not cover the whole section giving that the section height it dynamic according to number of cells ... - JAHelia

I recall something about methods to find the rectangles of each section. Having those, you could appropriate sized images to the scroll view underlying the table view.

Aside from that, you could put the background image into the background of the cells themselves. When the tableview calls for a cell in a given section, you can pick the appropriate image or image tile.

respondido 11 mar '12, 22:03

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.