Day 52 - 100 Days of Swift

2 minute read

Project 13 (part 2)

Day 52 is the first part of the thirteenth project. It will be an app where the user can load an image from their library, apply some filters and then save it back to their photo library. Today you pretty much just lay out the UI and then add in the code for the user to pick a photo. Almost nothing new.

First you layout the UI. He has you lay things out with exact frame dimensions on an iPhone 8 and then have auto layout generate the missing constraints for you. My guess is that he just did this to show you that it was possible, but I can’t imagine that it is a reliable way to build your UI most of the time. I won’t repeat all the values here, but this is what it ends up looking like:

Screenshot of storyboard once it is laid out.

Then you add outlets from the image view and the slider and actions from the two buttons and the slider:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
@IBOutlet weak var imageView: UIImageView!
@IBOutlet weak var intensitySlider: UISlider!

@IBAction func changeFilter(_ sender: Any) {

}

@IBAction func save(_ sender: Any) {

}

@IBAction func intensityChanged(_ sender: Any) {

}

And that’s the UI.

Next, you add a variable to hold the image you’re currently working on:

1
var currentImage: UIImage!

You add a function for importing an image:

1
2
3
4
5
6
@objc func importPicture() {
    let picker = UIImagePickerController()
    picker.allowsEditing = true
    picker.delegate = self
    present(picker, animated: true)
}

And you add it as the action for a bar button item:

1
2
3
4
5
title = "Instafilter"
navigationItem.rightBarButtonItem =
    UIBarButtonItem(barButtonSystemItem: .add,
                    target: self,
                    action: #selector(importPicture))

Then you conform to the necessary protocols to be the delegate for a UIImagePickerController:

1
2
3
class ViewController: UIViewController,
                      UINavigationControllerDelegate,
                      UIImagePickerControllerDelegate {

And add the didFinishPickingMediaWithInfo method:

1
2
3
4
5
6
7
8
func imagePickerController(_ picker: UIImagePickerController,
                           didFinishPickingMediaWithInfo info: [UIImagePickerController.InfoKey : Any]) {
    guard let image = info[.editedImage] as? UIImage else { return }

    dismiss(animated: true)

    currentImage = image
}

Nothing really new today, just setting the foundation for the work tomorrow. But here is what it looks like:

Screenshot of app in its current state at end of part 1.

You can find my version of this project at the end of day 52 on Github here.