Day 17 - 100 Days of Swift

Project 1 (part 2)

Day 17 is the second part of the first project. You add a detail screen to actually display the photos that the user. You add a detailViewController to handle the logic for the new screen. And you make a few various tweaks to polish things up a bit.

The first thing you do is make a new subclass of UIViewController called detailViewController, and then add a UIViewController to the Main.storyboard to be the detail view. You set its class and give it a storyboard id. Then you add a UIImageView to this and constrain it to fill the screen.

Next you add an outlet from the UIImageView to the detailViewController:

Then you create a place in detailViewController to hold the name of the image it should load:

var selectedImage: String?

Then you adopt a UITableViewDelegate method in the viewController to make a new detailViewController when a cell is tapped on, give it the image name, and then push it on to the navigation stack:

override func tableView(_ tableView: UITableView,
                          didSelectRowAt indexPath: IndexPath) {
    if let detailViewController = storyboard?
           .instantiateViewController(withIdentifier: "DetailVC")
           as? DetailViewController {
        detailViewController.selectedImage = pictures[indexPath.row]

        navigationController?
            .pushViewController(detailViewController, animated: true)
    }
}

Then, back in the detailViewController, you add a couple of lines to load the image in viewDidLoad:

if let imageToLoad = selectedImage {
    imageView.image = UIImage(named: imageToLoad)
}

At this point the app builds and runs. You can tap on any of the image names in the list and a detail view displaying the image will be pushed in. But you don’t stop here. You go on to polish things up a little bit. You change the content mode of the image view to be “Aspect Fill”:

You override a couple of lifecycle methods in the detailViewController to allow the navigation controller to hide on taps:

override func viewWillAppear(_ animated: Bool) {
    super.viewWillAppear(animated)
    navigationController?.hidesBarsOnTap = true
}

override func viewWillDisappear(_ animated: Bool) {
    super.viewWillDisappear(animated)
    navigationController?.hidesBarsOnTap = false
}

You add a couple of lines to the viewDidLoad of the viewController to give it a title and set it to display as a large title:

title = "Storm Viewer"
navigationController?.navigationBar.prefersLargeTitles = true

And similar lines in viewDidLoad of the detailViewController to handle the same things:

title = selectedImage
navigationItem.largeTitleDisplayMode = .never

You can find my version of the project so far on GitHub here.

Reflections

Boom! I’d call that an MVP. It is a small and simple little app, but it can do everything we set out for it to do. You get a list of all the pictures available in the app, and you can tap on any of them to view the image. Not the most exciting thing I’ve ever seen. Or even the most exciting thing I’ve ever built. But it is enough for me to check off another day in this process.