Wednesday, January 6, 2016

Modularize your UIImagePickerController usage in Swift

When you run across quick tutorials or answers on using UIImagePickerController the majority have you When you run across quick tutorials or answers on using UIImagePickerController the majority have you simply instantiating, containing, delegating and using it inside your UIViewController. As with most coding examples this is for demonstration purposes only, you should always, always abstract out functionality into reusable pieces in any application. The most obvious reason is that if one view controller needs the image picking functionalities, it's a safe bet that another will at some point. If not, well you'll probably run across another need for it in another application, much easier to strip out the code if it's self-containined in one class.
The history of this code has been in Objective-C and it's served me well in more than one app, here I'm converting and using it in Swift for the first time in an app I'm currently building.
To start, create a class, I like using Controller at the end of most classes or structs of this nature.
class PhotoPickerController : NSObject, UIImagePickerControllerDelegate, UINavigationControllerDelegate { }
You do need to inherit from NSObject, if you don't the compiler will tell you that you either need to mark the delegate methods for UIImagePickerControllerDelegate with the prefix @objc or inherit from NSObject.
Now setup your instance variables/properties (now the same thing in Swift remember)
var alertController: UIAlertController?
weak var buttonToPresentPopoverForiPad: UIButton?
weak var viewController: UIViewController?
lazy var pickerController = UIImagePickerController()
1) You'll need a UIAlertController (ActionSheet) to ask the user if they want to take a picture or load from the device/cameraroll.
2) You need to have a weak reference to the button that will start the photo picker workflow so that if an iPad is used, the popOver functionality will work properly, remember on iPhone it's a modal popup, on iPad it's a pop-over.
3) You need a weak reference to the UIViewController that will be presenting the workflow.
4) Finally you need the core of all of this, an instance of UIImagePickerController, and because of swift lazy instantiation awesomeness, you can do it in one simple line. Create it when you first call it.
Now comes the init for your custom container class. This will be the largest method and I suggest breaking it into smaller pieces, but for the sake of clarity,
init(buttonToPresentPopoverForiPad button: UIButton, viewControllerToPresent viewController: UIViewController) {

    super.init()

    self.alertController = UIAlertController(title: "Select a Photo", message: nil, preferredStyle: .ActionSheet)
    self.buttonToPresentPopoverForiPad = button
    self.viewController = viewController

    let cancelAction = UIAlertAction(title: "Cancel", style: .Cancel) { (action) in
        self.alertController?.dismissViewControllerAnimated(false, completion: nil)
    }

    alertController?.addAction(cancelAction)

    let photoAlbumAction = UIAlertAction(title: "Photo Album", style: .Default) { (action) in
        self.selectPicture(.PhotoLibrary)
    }

    alertController?.addAction(photoAlbumAction)

    let cameraAction = UIAlertAction(title: "Take a photo", style: .Default) { (action) -> Void in
        self.selectPicture(.Camera)
    }

    alertController?.addAction(cameraAction)
    alertController?.modalPresentationStyle = .Popover
    if UIDevice.currentDevice().userInterfaceIdiom == .Pad {
        let popOverPresenter = alertController?.popoverPresentationController
        popOverPresenter?.sourceView = self.buttonToPresentPopoverForiPad
        popOverPresenter?.sourceRect = self.viewController?.view.bounds as CGRect!
        popOverPresenter?.permittedArrowDirections = .Any
    }
} 
First, init the super which is NSObject like always, next setup your AlertController to be an ActionSheet with the proper actions, cancel, photo album and take a photo. Again the benefit of the newer UIAlertController API is that you can set the action results for each action inline with blocks, no more delegating to other methods.
For Cancel, just dismiss the alert all together, nothing to see here, just move on.
For Photo Album and Take a picture, you create a method that will open the appropriate modal workflow for each selection.
Finally finish up your AlertController for dealing with the iPad.
Now, here is the selectPicture helper method:
private func selectPicture(pickerType: UIImagePickerControllerSourceType) {
    if UIImagePickerController.isSourceTypeAvailable(pickerType){
        pickerController.delegate = self
        pickerController.sourceType = pickerType;
        pickerController.mediaTypes = [kUTTypeImage as String]
        pickerController.allowsEditing = false
        pickerController.navigationBar.tintColor = UIColor.whiteColor()
        self.viewController?.presentViewController(pickerController, animated: true, completion: nil)
    }
}
I generally now make my methods private that I obviously don't want available in the classes API. That's just my personal preference.
Follow the standard practices now for setting up the UIImagePickerController outlined in Apple's documentation. Choose what will suit you for colors of the navbar, the mediatTypes, etc.
Notice we set the delegate of the UIImagePickerControllerDelegate to self, this container class will handle the callbacks for the UIImagePickerController, instead of the more common example of a UIViewController bloated and dirty with all sorts of tasks assigned to it.
Here's then how you handle those callbacks:
Make sure you use the proper MARK: so indicating the delegate methods
// MARK: - UIImagePickerControllerDelegate methods

func imagePickerControllerDidCancel(picker: UIImagePickerController) {
    self.pickerController.dismissViewControllerAnimated(true, completion: nil)
}

func imagePickerController(picker: UIImagePickerController, didFinishPickingMediaWithInfo info: [String : AnyObject]) {
    let mediaType = info[UIImagePickerControllerMediaType] as! NSString;
    var originalImage, editedImage, imageToUse: UIImage?

    if (CFStringCompare(mediaType as CFStringRef, kUTTypeImage, .CompareCaseInsensitive) == CFComparisonResult.CompareEqualTo) {
        editedImage = info[UIImagePickerControllerEditedImage] as? UIImage
        originalImage = info[UIImagePickerControllerOriginalImage] as? UIImage

        if editedImage != nil {
            imageToUse = editedImage
        } else {
            imageToUse = originalImage
        }

        if let validDelegate = delegate, let validImage = imageToUse {
              validDelegate.photoPicker(self, didSelectImage: validImage)
        }
        picker.dismissViewControllerAnimated(true, completion: nil)

    }
 }
imagePickerControllerDidCancel is pretty straightforward, the only other method that you need would be imagePickerControllerDidFinishPickingMediaInfo, here you handle the image handed back to the delegate. Following standard documentation, you determine the mediatype that was selected, remember it could be a movie file, not just a photo. In our case we just want images. Then decide do you care about the edited image, did you allow image editing in the setup of the controller? Here's where you deal with that. Finally cast the image you want to an optional UIImage. Notice I then call another delegate (of this container class), indicating the image is ready to go and is valid. Now, here's really the last piece of functionality needed.
The user of your container class needs a way to get the image when it's all said and done and ready to give to a viewController and View. So lets go back to the top of your class file and create a protocol that declares a delegate method for use with your new class.
protocol PhotoPickerDelegate: class {

    func photoPicker(picker: PhotoPickerController, didSelectImage image: UIImage)
}
Now all you need to do is simply make your UIViewController or whatever else is using your class abide by this protocol. You could also use NSNotifications as well for even looser coupling, but I think the delegate pattern works fine for this.
Lastly, you need to implement this one method for the UINavigationControllerDelegate
/** UINavigationControllerDelegate is required to ensure the UIImagePickerController has a light status bar instead of black */
func navigationController(navigationController: UINavigationController, willShowViewController viewController: UIViewController, animated: Bool) {
    UIApplication.sharedApplication().statusBarStyle = UIStatusBarStyle.LightContent
}

No comments:

Post a Comment

Mvvm on Mobile?

Here's my talk from Houston Tech Fest 2017. Recorded Talk: Slides: https://speakerdeck.com/markawil/mvvm-and-mobile-dont-do-it...