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.

Lately I’ve been experimenting with using Swift in my Titanium projects.  Since Titanium is really just a Objective-C app under the covers it is fairly straight forward to mix and match Swift within your project.

I did encounter one surprise the first time I added a Swift module or extension to my project.  Even though the extension or module compiles without issue, as soon as it was added to my Titanium project I started to receive errors similar to dyld: Library not loaded: @path/libswiftCore.dylib.  The root cause was surprising, it seems that Xcode 6.2 does not enable the “Embedded Content Contains Swift Code” Build Setting by default for Swift extension projects.

If you are building Swift extensions for Titanium or any other Objective-C application make sure you update your project to include this.  To do this, go to your Swift Target’s Build Settings, then Build Options.  Alternatively you can just search for embed to find the correct option.  Once you have located the setting you need to toggle the “Embedded Content Contains Swift Code” from No to Yes as illustrated below.