Fade Views In/Out with Fadeable – A Swift Protocol Extension

During the production of my Pluralsight course on Managing Xcode Project Dependencies with CocoaPods, I wanted to provide viewers of the course the opportunity to see how to create and deploy a simple library out to the CocoaPods Trunk.

Inspiration

A simple idea came to mind: Create something that allows client developers of the pod to easily fade views in or out on any UIView instance. If you’ve read andrewcbancroft.com for a long time, you might remember that I wrote on this very subject already, but there, I used an extension to UIView, because protocol extensions hadn’t been invented yet!

For my course, I borrowed an idea that I first saw done by @NSFlexMonkey when he built the Rotateable protocol extension. Only instead of rotating, I’m fading, so I named it “Fadeable”!

Demo

Fadeable code sample

The “library’s” source can be found over at GitHub:

Here’s a snippet from the repository so you can see what the extension’s doing:

 1import UIKit
 2
 3public protocol Fadeable {
 4    var alpha: CGFloat {get set}
 5    
 6    mutating func fadeIn(duration: NSTimeInterval, delay: NSTimeInterval, completion: (Bool) -> Void)
 7    mutating func fadeOut(duration: NSTimeInterval, delay: NSTimeInterval, completion: (Bool) -> Void)
 8}
 9
10public extension Fadeable {
11    public mutating func fadeIn(duration: NSTimeInterval = 1.0, delay: NSTimeInterval = 0.0, completion: ((Bool) -> Void) = {(finished: Bool) -> Void in}) {
12        UIView.animateWithDuration(duration, delay: delay, options: UIViewAnimationOptions.CurveEaseOut, animations: {
13            self.alpha = 1.0
14            }, completion: completion)  }
15    
16    public mutating func fadeOut(duration: NSTimeInterval = 1.0, delay: NSTimeInterval = 0.0, completion: (Bool) -> Void = {(finished: Bool) -> Void in}) {
17        UIView.animateWithDuration(duration, delay: delay, options: UIViewAnimationOptions.CurveEaseOut, animations: {
18            self.alpha = 0.0
19            }, completion: completion)
20    }
21}
22
23extension UIView: Fadeable {}

In the code snippet above, I define the Fadeable protocol as [Some Type] that has an alpha property, and a fadeIn() and fadeOut() function.

Then I create an extension to the Fadeable protocol and provide a simple, default implementation which will animate the alpha to 0, or to 1, depending on whether or not the client developer is fading in or out.

Finally, I extend UIView to conform to Fadeable. And that’s it! Any UIView instance can now fade in or out by simply calling the appropriate function:

 1class ViewController: UIViewController {
 2    
 3    @IBOutlet weak var box: UIView!
 4    
 5    // ... Omitted for brevity   
 6
 7    // The storyboard has a button that can be tapped to toggle the fade action
 8    @IBAction func fadeToggleTapped(sender: UIButton) {
 9        if(box.alpha == 0) {
10            box.fadeIn()
11        } else {
12            box.fadeOut()
13        }
14    }
15}

Creating CocoaPod libraries

If you’re interested in seeing a full walk-through of how I created and published the Fadeable Library to the CocoaPods Trunk, I would love it if you gave Module 3 of my Pluralsight course, titled a watch! It’s titled Creating CocoaPod Libraries and covers from beginning to end, the process of creating a library that’s compatible with CocoaPods.