iPhone - Setting background on UITableViewController

Question

Is there any way to set a background view on a UITableViewController?

I try with the code I am using on a UIViewController, but the view comes over all the contents of the table view. If I add the background view in the cellForRowAtIndexPath-method, it is not showing at all. Has anyone done this before or have an idea on how it can be done? Here is the code I am using:

UIImage *image = [UIImage imageNamed: @"background.jpg"];
UIImageView *backImage = [[UIImageView alloc] initWithImage: image];
[self.view addSubview: backImage];
[self.view sendSubviewToBack: backImage];

score 72 · Answer 1 · answered Feb 29 '12 at 16:46

72

I know it's been a long time, but just for the record.. I Think I found a better solution using UITableView.backgroundView:

UIImageView *imageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"lisbon.png"]];

self.tableView.backgroundView = imageView;
[imageView release];

I tried with an image size of 320x480 on iPhone, and works perfect (I have tried with .jpg also).

answered Feb 29 '12 at 16:46

Frade

2,938
4
28
39

1

This is better, goes behind the header as well – powerj1984 Jun 06 '13 at 19:06
agreed, used this solution over the one using a color pattern. – Pork 'n' Bunny Aug 10 '13 at 06:03
@MárioCarvalho ainda bem que funcionou! ;) – Frade May 26 '15 at 20:47
This method works but it inserts the background to the ViewController, instead i need to add a background just to the content of the TableView (I don't want the background to be inserted behind the header or the footer of the TableView) – Heysem Katibi Oct 27 '16 at 09:33

score 68 · Accepted Answer · edited Dec 13 '12 at 19:19

68

(This is basically the same as Hans Espen's solution above, but uses convenience methods for brevity)

Put this in your -[UITableViewControllerSubclass viewDidLoad] method:

self.tableView.backgroundColor = [UIColor colorWithPatternImage:[UIImage imageNamed:@"BackgroundPattern.png"]];

There's no point in avoiding a couple of autoreleases in a viewDidLoad method, since it only gets called rarely (when the view actually loads) and will therefore have negligible impact on performance.

N.B. You should always use PNG images on the iPhone, not JPEG or any other format.

edited Dec 13 '12 at 19:19

iDev

23,310
7
60
85

answered Mar 17 '10 at 02:38

Nick Forge

21,344
7
55
78

13

I should clarify - use PNG for everything that isn't photographic. PNGs are hardware accelerated by the GPUs on iOS devices, so all of your UI images should be in PNG format. PNG supports alpha transparency, which is a necessity for a lot of UI graphics. For anything photographic, JPEG compression will give you smaller file sizes, so that may be a benefit. – Nick Forge Aug 20 '10 at 03:51
2

This sets the background of each group when the table is set to a grouped style though, is there a way to solve this? – Donal Rafferty May 30 '11 at 10:40
1

As of iOS 3.2, there's a `UITableView.backgroundView` property, which AFAIK makes the color/pattern workaround redundant (if you can drop pre-3.2 support). – Nick Forge May 31 '11 at 03:09
Where can we find an answer to this question that utilizes UITableView.backgroundView? I'll upvote if you add a new answer and tag me. – AWrightIV Jun 13 '11 at 16:26
initWithNibName is not god, need on didLoad or willAppear! God answer – Aug 31 '12 at 15:35
This will make background to scroll with content and repeat in succession. Use `self.tableView.backgroundView` instead as noted in answer by Frade. – Martin Berger Oct 09 '13 at 12:36
one question, what about view mode? I mean, "aspect fit", "scale fill"... how can I control those properties when using the color pattern? (if possible). Otherwise, what do you recommend me? – Ricardo Nov 11 '13 at 16:12

score 6 · Answer 3 · answered May 22 '09 at 15:10

Actually, I got it working! :)

NSString *backgroundPath = [[NSBundle mainBundle] pathForResource:@"background" ofType:@"jpg"];
UIImage *backgroundImage = [UIImage imageWithContentsOfFile:backgroundPath];
UIColor *backgroundColor = [[UIColor alloc] initWithPatternImage:backgroundImage];
self.tableView.backgroundColor = backgroundColor; 
[backgroundColor release];

score 5 · Answer 4 · answered Dec 29 '14 at 06:51

5

For Swift use this,

self.tableView.backgroundView = UIImageView(image: UIImage(named: "backgroundImage.png"))

answered Dec 29 '14 at 06:51

Mohammad Zaid Pathan

16,304
7
99
130

This solution is working for me, but I found out, that the properties for opaque, bgcolor... in xcode 8 aren't accepted for older builds (iOS 9 for example). I don't know, if I missed something, but I built a solution, referencing the tableviewcells as outlets to the code and made them opaque and the backgroundview nil. Maybe this will help someone else :) – Tristan G Apr 20 '17 at 11:56

score 0 · Answer 5 · answered Jan 23 '18 at 05:07

In C# for a static UITableViewController with sections you can use:

using System;
using Foundation;
using UIKit;
using CoreGraphics;
using CoreAnimation;

namespace MyNamespace
{
    public class CustomTableViewController : UITableViewController
    {
        public override void ViewDidLoad()
        {
            base.ViewDidLoad();

            SetGradientBackgound();
        }

        private void SetGradientBackgound()
        {
            CGColor[] colors = new CGColor[] {
                UIColor.Purple.CGColor,
                UIColor.Red.CGColor,
            };

            CAGradientLayer gradientLayer = new CAGradientLayer();
            gradientLayer.Frame = this.View.Bounds;
            gradientLayer.Colors = colors;
            gradientLayer.StartPoint = new CGPoint(0.0, 0.0);
            gradientLayer.EndPoint = new CGPoint(1.0, 1.0);

            UIView bgView = new UIView()
            {
                Frame = this.View.Frame
            };
            bgView.Layer.InsertSublayer(gradientLayer, 0);

            UITableView view = (UITableView)this.View;
            view.BackgroundColor = UIColor.Clear;
            view.BackgroundView = bgView;
        }

        // Setting cells background transparent
        public override UITableViewCell GetCell(UITableView tableView, NSIndexPath indexPath)
        {
            var cell = base.GetCell(tableView, indexPath);
            cell.BackgroundColor = UIColor.Clear;
            return cell;
        }

        // Setting sections background transparent
        public override void WillDisplayHeaderView(UITableView tableView, UIView headerView, nint section)
        {
            if (headerView.GetType() == typeof(UITableViewHeaderFooterView))
            {
                UITableViewHeaderFooterView hView = (UITableViewHeaderFooterView)headerView;
                hView.ContentView.BackgroundColor = UIColor.Clear;
                hView.BackgroundView.BackgroundColor = UIColor.Clear;
            }
        }

    }
}

The result can be something like this:

score 0 · Answer 6 · edited Oct 19 '13 at 14:49

0

self.parentViewController.view.backgroundColor = [UIColor colorWithPatternImage:[UIImage imageNamed:@"yourImage.png"]];

edited Oct 19 '13 at 14:49

Adrian P

6,479
4
38
55

answered Sep 29 '11 at 09:02

Sandip Patel - SM

3,346
29
27

iPhone - Setting background on UITableViewController

6 Answers6

Linked