Upcoming event

Be-Delphi Delphi Developer Day

Be-Delphi is organizing their first (of many) Delphi Developer Day on November 17th in Edegem near Antwerp. That day will be completely dedicated to Delphi and Prism.

At Be-Delphi, Devia will be holding a talk about the new LiveBindings in Delphi XE2, so be sure to grab a hold of me and say hello !

How to use a custom background image in your grouped UITableView

written by Stefaan Lesage on 30/11/2010

For those of you who didn't know it ... a few weeks ago I went to the iOS Bootcamp organized by the folks at Big Nerd Ranch Europe. The course was exactly what I needed to get me started on my own app. Some pieces of the Puzzle came together quite nicely during the course, but ... I wanted more.


Default grouped UITableView

The default Grouped UITableView looks nice but ...

Well, you can use the UITableView in it's Plain mode, but also in a Grouped mode. The Grouped mode uses some kind of pattern as the background for the UITableView. It looks quite nice and is made up of alternating light and darker blue-grayish lines.

I wanted someting a little more 'Special' ...

Although the default look isn't all that bad ... I wanted to have something 'special' for my application. So I was wondering if there was some way to change the color used in that pattern. Since I didn't know the answer myself, I sent out a tweet. I was hoping someone would pick it up and maybe let me know where I could find some more information on this topic.

The feedback I got

I did receive some feedback to my tweet: 'Is there an easy way to create your own UIColor which looks like the 'Group Table View Color' but with another color scheme ? #iphonedev. One of the answers was from Amar Kulo who suggested to supply me with some Photoshop files I could modify.

A few moments later, Amar Kulo even provided me with a complete answer and wrote a blog post about it to help me out. It is actually pretty easy, so I thought i would share it with the world as well.

The Trick

It is actually quite easy to get your own custom background. You simply have to use a custom background image. Amar provides a few samples in his blogpost. The only thing you need to do is open up your favorite Image Editor (in my case Pixelmator), change the colors to you liking and create the necessary versions for your application.

The Code


The result actually looks pretty descent

Once you added the resources to your project, you can simply start using them as the background for your Grouped UITableView. In my case, it was simple a matter of setting the background color in the ViewDidLoad of my UITableViewController :

- (void)viewDidLoad 
    [super viewDidLoad];

    // Uncomment the following line to display an Edit button in the navigation bar for this view controller.
    // self.navigationItem.rightBarButtonItem = self.editButtonItem;
	UIImage *img = [UIImage imageNamed:@"BG_Pink"];
	[[self tableView] setBackgroundColor:[UIColor colorWithPatternImage:img]];


Well ... This might not be the best way to do it, so if you have any suggestions, feel free to let me know. Next time I'll be delving a little deeper into some more things I did with my UITableView and UITableViewCell ... but for now ... feel free to post a comment and have a look at the result :


Commenting is not available in this weblog entry.