Set striped background in iOS 3.1 

I’ve finally begun looking into iOS development on my spare time. It’s good fun and I will write about my experiences here, as my work progresses.

I first started to play around with this good tutorial. After completing it, I thought I’d just replace the plain white background with the striped background that is so common in iPhone apps.

Beautiful, striped background

Beautiful, striped background

However, no matter where I looked in Interface Builder, I could not find a way to set this striped background. Sure, you could insert a table view, set its style to Grouped and let it fill the window…but I want the view itself to have the background.

After searching around, I found that many developers set the striped background with either an image (which I will not cover since I do not want to use images when not absolutely necessary) or programatically.

Option 1 – set the striped background programatically (“bad”)

It is really simple to set the striped background programatically. Just do the following:

   //If you have a controller with the view, do this
   theController.view.backgroundColor = [UIColor groupTableViewBackgroundColor];

   //If you have the view directly, do this
   theView.backgroundColor = [UIColor groupTableViewBackgroundColor];

However, is this as good as it gets? This way of setting the background means that the stripes will only show when you run the application and not if you open the view in Interface Builder…and that just don’t do it for me 🙂

Thus, I mark this option as a “bad” way of setting the default background. Naturally, you may want to change the background programatically for various reasons, but maybe not the default background.

Option 2 – set the striped background in the .xib file (“good”)

Well, I did not find a way to set the striped background in Interface Builder (if you do know how, please leave a comment), but it is really easy to set it by modifying the .xib file in a text editor.

To do so, just right click the .xib file you want to modify and select “Open As > Plain Text File”. Then, in the text editor, search for the following tag:


For a plain, white view, the section should look something like this:

   
      1
      MC45ODQ3MTEyMDQ3IDAuOTg4NTMzNDAzNSAxAA

Now, just add the following line as a sub tag to the object tag

   <string key="IBUIColorCocoaTouchKeyPath">groupTableViewBackgroundColor</string>

so that the complete section looks something like this:

   
      1
      MC45ODQ3MTEyMDQ3IDAuOTg4NTMzNDAzNSAxAA
      groupTableViewBackgroundColor

That’s it – if you open the view in Interface Builder, you will now have a beauuutiful striped background.