Image as background for every view

Question

First of all I'm surprised I couldn't find this question here nor on Google. It seems something others may need this functionality as well. So if it's a duplicate after all, sorry I searched high and low.

I have an application with the following structure in my storyboard :

-> Root Tab Bar controller -> (for each of the tabs) SplitView Controller -> Navigation Controller -> TableView Controller -> Detail View Controller

I want to set a background image that is the same throughout the application. My idea was to set that image in my App Delegate for the Root Tab controller in the:

func application(application: UIApplication, didFinishLaunchingWithOptions launchOptions: [NSObject: AnyObject]?) -> Bool

method. :

var imageView = UIImageView(frame: self.window!.frame)
    var image = UIImage(named: "bg.png")!
    imageView.image = image

    self.window!.rootViewController!.view.backgroundColor = UIColor.clearColor()
    self.window!.rootViewController!.view.addSubview(imageView)
    self.window!.rootViewController!.view.sendSubviewToBack(imageView)

First of all is that the good place to set it ?

The problems I have now if I have that last line of code :

self.window!.rootViewController!.view.sendSubviewToBack(imageView)

I don't see the image. (for my UITableView and UITableViewCells I set opaque to false and BackGroundColor to ClearColor)

If I remove that last line, the image is there but on top of everything and I don't see any content (no tab bars, no split view...)

Please help me fix this or show a better way. TIA

Problem is you don't know what other views are added into the hierarchy by the tab, split and navigation controllers. you'll probably need to come up to navigation controller level — Wain, Sep 08 '15 at 11:13
this would mean 2 things : I would need to implement this for every navigation controller (atm there are 2, but when I add a tab, I would again need to do this). I solved this by creating a custom Class NavControllerWithBackground and are using that one. In the ViewDidLoad I added the var imageView... code. But the problem remains (almost) the same : with the last line the image is invisible, without the last line the image is on top of everything (except for the Tab Bars). — Glenn, Sep 08 '15 at 11:26
My purpose is to create a UIViewController child class where set the background Image and make all your controllers inhereit from It. — Bisca, Sep 08 '15 at 11:28
@Bisca: this would not be nice with the UISplitViewControllers on an iPad because the TableViewController (master) and DetailViewController would each have that image. I want 1 image for the whole screen — Glenn, Sep 08 '15 at 11:30
You have to look at this http://stackoverflow.com/a/4915712/2591603 — M David, Sep 08 '15 at 12:11
Try setting alpha to 0.5 or something rather than setting clearColor as backgroundCOlor — Mihir Mehta, Sep 09 '15 at 09:13

score 1 · Accepted Answer · answered Sep 08 '15 at 11:51

Probably the easiest way would be: Set your image as colorWithPatternImage as backgroundColor of your UITabBarController like this:

[tabbarController.view setBackgroundColor:UIColor colorWithPatternImage:yourImage];

then make sure to set the backgroundColor of the views of all it's viewControllers to clearColor.

score 0 · Answer 2 · answered Sep 09 '15 at 10:10

The suggestion from MarkHim was the base for the solution. It didn't work completely however and I had to add some stuff to make ik look ok. For others who want to achieve the same, here is what I had to do :

subclass my UITabBarController and UINavigationController and implement a ViewDidLoad setting it's background to clearColor :

import UIKit

class TMSplitViewController : UISplitViewController {



override func viewDidLoad() {
    super.viewDidLoad()
    self.view.backgroundColor = UIColor.clearColor()
}

}

This (and setting backgroundColor to clearColor everywhere in IB where I could think of solved most of the troubles.

There was however an issue on iPhones when going from masterView to detailView: the animation was not nice, there were artefacts. After the animation it looked ok. I found not really a good way to solve this, so I fixed it in place by adding the following code to my DetailViewController :

if self.view.traitCollection.horizontalSizeClass == UIUserInterfaceSizeClass.Compact {
        var imageView = UIImageView(frame: self.view.frame)
        var image = UIImage(named: "bg.png")!
        imageView.image = image
        self.view.addSubview(imageView)
        self.view.sendSubviewToBack(imageView)
    } else {
        self.view.backgroundColor = UIColor.clearColor()
    }

So for all horizontal compact layouts (all iPhones, except for iPhone 6+ in landscape) we load the background image, for others we set the transparency.

Things look ok now

Image as background for every view

2 Answers2