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.

 

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()

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()

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()

 

Gist to the example code is available here.

I use Google Analytics to collect usage statistics across both my web and mobile applications.  There are a few great AngularJS and other libraries that track page usage automatically when a controller is initialized.  Using these concepts I wanted to create my own similar approach in Swift.  The end result of this is the creation of a simple BaseController which makes an analytics call when viewDidLoad is called.

class BaseController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        Analytics().screenView(self.controllerName)
    }

}

Deconstructing this simple one line method call you will notice there are an extension method called controllerName passed into a static method on the analytics struct.  The controllerName references the below extension method and simply is used to get the name of the UIViewController so that we can track usage by the screen name.  Below is a snippet with the code for this extension method.

extension UIViewController {

    var controllerName: String {
        return NSStringFromClass(self.classForCoder).componentsSeparatedByString(".").last!
    }

}

The analytics struct is an anti corruption layer that I’ve added to my app to wrap the underlying Google Analytics code.  This also provides a layer of abstraction which helps combat the fact that Xcode randomly makes the Google Analytics Objective-C references invalid.  The Analytics struct is used in two places in my app. First it is initialized in my app delegate, then it is used within my BaseController to record feature usage.

Before we get to the Analytics struct code below is the snippet using in my app delegate used to create a default tracker with our Google Analytics key.

Analytics.createTracker(Analytics.GAToken.QAKey.rawValue)

Once initialized the Analytics struct method screenView is used on each viewDidLoad call to record that a UIViewController has been viewed.

import Google

public struct Analytics {

    enum GAToken: String {
        case QAKey = "UPDATE-WITH-QA-KEY"
        case ProdKey = "UPDATE-WITH-PROD-KEY"
    }

    public static func createTracker(key: String) {
        GAI.sharedInstance().trackerWithTrackingId(key)
        GAI.sharedInstance().logger.logLevel = GAILogLevel.None
        GAI.sharedInstance().trackUncaughtExceptions = true
    }

    private func getTracker() -> GAITracker {
        return GAI.sharedInstance().defaultTracker
    }

    public func screenView(name: String) {
        let tracker = getTracker()
        tracker.set(kGAIScreenName, value: name)
        let builder = GAIDictionaryBuilder.createScreenView()
        tracker.send(builder.build() as [NSObject : AnyObject])
    }
}

Although there are more comprehensive Analytics (Google or other) approaches I’ve found this straightforward approach provides the basics in away that works for me.

Helpful Links:

• gist with source code available here
• Google Analytics on CocoaPods here
• Google Analytics for iOS resources

For my current project we’ve got a design requirement that all screens have a simple “Back” button instead of the default text that iOS provides when pushing a new controller.

I found that Swift’s inheritance model combined with extensions methods make this simple to implement in a re-usable fashion.  To start this approach, I implemented a based controller which I called  BaseController that manages the title of the backBarButtonItem.  This is automatically handled by just inheriting from the BaseController.  In the below example we create a new NotificationController using this pattern.

import UIKit

class NotificationController: BaseViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
    }

}

The BaseController only has two lines of code.  The first creates a string with the title of the back button. The second calls an extension method that manages the back button title information.

import UIKit

class BaseViewController: UIViewController {

    override func viewDidLoad() {

        super.viewDidLoad()

        let backTitle = NSLocalizedString("Back", comment: "Back button label")
        self.addBackbutton(backTitle)

    }

}

The heavy lifting is performed in the UIViewController extension.  Using the addBackbutton method to add a new UIBarButtonItem or update the current one’s title.  If a new UIBarButtonItem is added the backButtonAction method is added to dismiss the controller on press.

import UIKit

extension UIViewController {

    func backButtonAction() {
        self.dismissViewControllerAnimated(true, completion: nil)
    }

    func addBackbutton(title: String) {
        if let nav = self.navigationController,
            let item = nav.navigationBar.topItem {
            item.backBarButtonItem  = UIBarButtonItem(title: title, style: UIBarButtonItemStyle.Plain, target: self, action:
                #selector(self.backButtonAction))
        } else {
            if let nav = self.navigationController,
                let _ = nav.navigationBar.backItem {
                self.navigationController!.navigationBar.backItem!.title = title
            }
        }
    }
}

The full code is available as a gist here.

As part of a recent project I’ve been spending more time then I’d like with time zones.  In my case a variety of dates and time zone details are provided by a remote service. Having spent the last few years solving this type of problem with moment.js I was excited to see that NSTimeZone contained many of the same features.

The time zone information is provided in the IANA time zone database format.  I was really existed to see that you can create a new NSTimeZone using an IANA time zone name.  Below is an example using the Kuala Lumpur time zone.

let timeZone = NSTimeZone(name: "Asia/Kuala_Lumpur")
//What is the abbreviation
timeZone?.abbreviation
//Get the description with everything
timeZone?.description

So my first experiment was to parse the IANA time zones into a Swift String Array so that I could write a few Playground tests.  For this blog post we will show a few of the time zone names, instead of the full 417 item array.

let IANAtimeZones = ["Europe/Andorra","Asia/Dubai","Asia/Kabul",...]

* You can see the full array here

Next I found that the NSTimeZone method knownTimeZoneNames provides a list of all time zones iOS supports out of the box.  This gives me an easy way for me to later compare the IANA time zone database with those supported by iOS.  I use the below to get a list of those time zones known by iOS.

let iOStimeZones = NSTimeZone.knownTimeZoneNames()

To make writing any comparison testing alittle easier we create a method called tzExists.  This will allow us to compare a provided time zone name against all of those known by iOS.  In your production code you will want to cache the knownTimeZoneNames array for performance reasons.

func tzExists(name : String) -> Bool {
    return NSTimeZone.knownTimeZoneNames().contains(name)
}

Now that we have everything setup a simple loop can be used to compare our IANA time zones with those known to iOS.

for tz in IANAtimeZones {
    if(!tzExists(tz)) {
        print(tz + " not available")
    }
}

Oddly enough there are differences.  It could be I have an incomplete version of the IANA time zone database as iOS has 10 more known time zones then my IANA test harness.  Even with these differences the straight forward usage of NSTimeZone solves my problem perfectly.

Additional Resources:

• Playground : A playground which shows the above objects, tests, and methods is available here.
• Gist : The playground is available as a gist here.

I continue to explore a few of the basics around using UIImageView and Swift to create interface elements.  In this post I will discuss how you can apply a tint to an UIImageView image.  The example I will use to show the image tint is to toggle on and off the selected state of a favorite “star” icon as shown below.

There are many techniques for applying a tint to an image.  In this example, I’ll discuss the two approaches I like to use.

Just add two lines of code…

The easiest way to apply a tint to an UIImageView image is to set the imageWithRenderingMode of the image to AlwayTemplate and then apply a tint.  This only takes two lines of code to get the desired results.  The below snippet shows how to turn the UIImageView image blue.

myImageView.image = myImageView.image!.imageWithRenderingMode(UIImageRenderingMode.AlwaysTemplate)
myImageView.tintColor = UIColor.blueColor()

Or use an extension

Coding your image tint operations inline as discussed above works for most cases.  If you have a large number of image elements or different use cases you might want to explore using an extension method.  An extension method allows you to encapsulate the tint operating and make your code more readable.  For example, the snippet below turns the UIImageView image blue in just one line.

myImageView.tintImageColor(UIColor.blueColor())

To accomplish this we added the UIImageView+ImageTint extension to our project.  This extension simply encapsulates our inline code from above in a convenience method named tintImageColor.  The full extension method is shown below.

extension UIImageView {
    func tintImageColor(color : UIColor) {
        self.image = self.image!.imageWithRenderingMode(UIImageRenderingMode.AlwaysTemplate)
        self.tintColor = color
    } 
}

You can also find the extension method on Github here.

An example of both…

I’ve put together an example project ImageViewTintImage-Example here that walks you through how to apply both of these techniques to star and unstar UI elements.

Recently I’ve been exploring Swift and really been enjoying both the syntax and extension points.  Although still getting my legs under me with Swift and interface builder it has been a great deal of fun. For a recent project, I had to provide a subtle progress cue when the application was synchronizing information.  This cue was accomplished by simply replacing the UIImage of our existing UIImageView, then rotating the UIImageView using CABasicAnimation.  The below shows the end result in action.

Rotation Extension – UIView+Rotation.swift

A majority of the logic behind this rotation effect is encapsulated in the UIView+Rotation extension class shown below.  The following shows the full extension method.  You can also view the extension method on github here.

extension UIView {
    func startRotating(duration: Double = 1) {
        let kAnimationKey = "rotation"
        
        if self.layer.animationForKey(kAnimationKey) == nil {
            let animate = CABasicAnimation(keyPath: "transform.rotation")
            animate.duration = duration
            animate.repeatCount = Float.infinity            
            animate.fromValue = 0.0
            animate.toValue = Float(M_PI * 2.0)
            self.layer.addAnimation(animate, forKey: kAnimationKey)
        }
    }
    func stopRotating() {
        let kAnimationKey = "rotation"
        
        if self.layer.animationForKey(kAnimationKey) != nil {
            self.layer.removeAnimationForKey(kAnimationKey)
        }
    }
}

Start Rotating

The first step in starting the rotation animation is to replace the existing UIImage with the one we will be animating.  In our case we do this by loading an image from our Asset Catalog, as shown below.

syncImage.image = UIImage(named:”sync-spinning”)

Next, since we have the UIView+Rotation extension method added to your project, you simply have to call the startRotating method on your UIImageView to start animating the UIImageView.  The following shows how to call the startRotating extension method.

syncImage.startRotating();

In our example project, we have encapsulated this into the startSpinning shown below.

func startSpinning() {
    syncImage.image = UIImage(named:"sync-spinning")
    syncImage.startRotating()
}

Stop Rotating

The process of stopping the animation is similar to that of starting the rotation process.  First we stop the rotation animation of the UIImageView by calling the stopRotating extension method as shown below.

syncImage.stopRotating()

Next, we replace the UIImage with our initial non rotating image.  As shown below we do this by loading an image from the Asset Catalog.

syncImage.image = UIImage(named:”sync-not-spinning”)

In our example project, we have encapsulated this into the stopSpinning shown below.

func stopSpinning() {
    syncImage.stopRotating()
    syncImage.image = UIImage(named:"sync-not-spinning")
}

Ok, so show me the code

The following shows the code used to call both the start and stop rotating animations. For demonstration purposes, a delay is added to trigger the stop rotating event to illustrate the full animation life cycle.

func startSpinning() {
    syncImage.image = UIImage(named:"sync-spinning")
    syncImage.startRotating()
}

func stopSpinning() {
    syncImage.stopRotating()
    syncImage.image = UIImage(named:"sync-not-spinning")
}

func handleSyncTap(sender: UITapGestureRecognizer? = nil) {
    startSpinning()

    let dispatchTime: dispatch_time_t = dispatch_time(DISPATCH_TIME_NOW, Int64(3 * Double(NSEC_PER_SEC)))
    
    dispatch_after(dispatchTime, dispatch_get_main_queue(), {
        self.stopSpinning()
    })
}

A full working example of how to create a rotating UIImageView is available on github at https://github.com/benbahrenburg/SpinningImageView-Example

Walk Through

The following video tutorial walks through the UIImageView rotation example in great detail outlining everything from how the Storyboard UI elements are created through the UIGestureRecognizers added to trigger the rotation animations.