Setting an image background on a UITableView using Monotouch

Here’s a simple technique to set a background image on a UITableView such that the background doesn’t scroll with the table view. Instead on loading the table view directly load it as a subview of a UIImageView. When creating the UIImageView, set its frame to the dimensions of the iPhone, 320X480. Then, after adding the UITableViewController’s view as a subview of the UIImageView, set the table view’s background to be transparent. When you load the image view, you’ll have your table view with the image as it’s background.

Here’s a simple example (table view controller code omitted for brevity):


using System;
using System.Collections.Generic;
using System.Linq;
using MonoTouch.Foundation;
using MonoTouch.UIKit;

namespace TableBackgroundDemo
{
  public class Application
  {
    static void Main (string[] args)
    {
      UIApplication.Main (args);
    }
  }

  // The name AppDelegate is referenced in the MainWindow.xib file.
  public partial class AppDelegate : UIApplicationDelegate
  {
    // This method is invoked when the application has loaded its UI and its ready to run
    public override bool FinishedLaunching (UIApplication app, NSDictionary options)
    {
      UIImageView imgView = new UIImageView(UIImage.FromFile("background.jpg"));
      imgView.Frame = new System.Drawing.RectangleF(0,0,320,480);
      imgView.UserInteractionEnabled = true;
      imgView.AddSubview(someTableViewController.View);
      someTableViewController.TableView.BackgroundColor = UIColor.Clear;

      window.AddSubview (imgView);

      window.MakeKeyAndVisible ();

      return true;
    }

    // This method is required in iPhoneOS 3.0
    public override void OnActivated (UIApplication application)
    {
    }
  }
}

And here’s the final result:

8 thoughts on “Setting an image background on a UITableView using Monotouch

  1. Pingback: MonoTouch.Info
  2. Hi Mike
    Thanks for the article, this may be a really stupid question, but I haven’t been able to find any information online… Where exactly do you put the image so that it can be picked up via the UIImage.FromFile method? I tried putting it in the same directory as the code, but no luck. Do you need to register it somewhere?

    Thanks

    Jacob

  3. Hi Mike,
    nice solution – but what if I want the background to scroll with the table view?
    And it is a grouped one – so background color from pattern doesn’t work.

    Manfred

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s