Itamar
Itamar

Reputation: 1338

How to use a custom background on grouped UITableView cells?

I am trying to set a custom background for the rows of a grouped UITableView and I have absolutely no idea how to achieve that.

The table design I am trying to apply on my table looks like this:

Custom Designed Grouped UITableView

And I have sliced it into 3 cell types: top, middle and bottom. How can I apply the custom background for each of the table's cells?

Upvotes: 5

Views: 5238

Answers (6)

Jakub Gert
Jakub Gert

Reputation: 63

You can set UIImageView as cell backgroundView for first, middle and last cell in function:

-(void)tableView:(UITableView *)tableView willDisplayCell:(UITableViewCell *)cell  forRowAtIndexPath:(NSIndexPath *)indexPath

Check good (and simple) example at: http://www.planet1107.net/blog/tips-tutorials/custom-grouped-cell-tutorial/

Upvotes: 6

Mahesh
Mahesh

Reputation: 662

Instead of assigning separate image for each, Create one custom cell and assign background image as cell has above. And Crop above image other than inner cells assign that one to UITableView's background view (Plain table view) i.e you dont need to create grouped table view.

Upvotes: 0

Martin Gjaldbaek
Martin Gjaldbaek

Reputation: 3025

Ray Wenderlich has a very good tutorial on how to do this with Core Graphics: http://www.raywenderlich.com/2033/core-graphics-101-lines-rectangles-and-gradients

Upvotes: 3

matzino
matzino

Reputation: 3564

UITableViewCell has an property backgroundView. Set this value in your tableView:cellForRowAtIndexPath:-method.

https://developer.apple.com/library/ios/#documentation/uikit/reference/UITableViewCell_Class/Reference/Reference.html

Upvotes: 0

Kirby Todd
Kirby Todd

Reputation: 11566

This tutorial will give you exactly what you're looking for.

http://cocoawithlove.com/2009/04/easy-custom-uitableview-drawing.html

Upvotes: 1

Hanon
Hanon

Reputation: 3927

In cellForRowAtIndexPath, check the type of current row and then assign the corresponding background to it.

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {

    //  Create cell
    //  ...

    //  Configure cell

    switch (cellType)  {
       case TOP:
           cell.backgroundView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"top.png"]];  
           break;
       case MIDDLE:
           ...
    }
}

Upvotes: 4

Related Questions