UIWebView is one of the most useful controls in UIKit and has almost a limitless amount of options you can configure. My use case isn’t all that unique I’m simply displaying snippets of HTML email messages in a full screen UIViewController. The need to set the background color of the UIWebView is the only thing that makes this more than just a simple drag and drop in Interface Builder. Although this can all be done in 2-3 lines of code I thought it would be fun to share the combinations.
The Starting Snippet…
The code we are using for this experiment couldn’t be simpler consisting of a UIWebView that takes up most of the screen. We’ll use this snippet for our background experiments.
import UIKit
class ViewController: UIViewController {
@IBOutlet weak var webView: UIWebView!
let html = "<div>Lorem ipsum dolor sit amet...</div>"
override func viewDidLoad() {
super.viewDidLoad()
self.view.backgroundColor = UIColor.lightGrayColor()
self.webView.delegate = self
self.webView.loadHTMLString(html, baseURL: nil)
}
}
UIWebView Default Behavior
Let’s start with our default behavior. When you overscroll you can see the linen background. For my use case I want to replace the background linen with a solid color.
Image may be NSFW.
Clik here to view.
UIWebView White Background
By adding two lines of code, the background linen has been replaced with a white background.
self.webView.opaque = true self.webView.backgroundColor = UIColor.whiteColor()
Image may be NSFW.
Clik here to view.
UIWebView Underlying UIView
Since the background UIView for our UIViewController is lightGrayColor we can set the backgroundColor of the UIWebView to clearColor to have our overscroll exposure the underlying UIView. This is a nice option if you have a background image or treatment you want to expose to the user when they overscroll.
self.webView.opaque = true self.webView.backgroundColor = UIColor.clearColor()
Image may be NSFW.
Clik here to view.
UIWebView Transparent Background
By changing opaque to false we show the background view under the contents of the UIWebView. This is outside my use case but can see where this could be a useful technique for overlaying text.
self.webView.opaque = false self.webView.backgroundColor = UIColor.clearColor()
Image may be NSFW.
Clik here to view.
Gist to the example code is available here.
Image may be NSFW.
Clik here to view.
Image may be NSFW.Clik here to view.
