Your first step is to have the DetailViewController get and display an image. An easy way to display an image is to put an instance of UIImageView on the screen.

Open LootLogger.xcodeproj and Main.storyboard. Drag an Image View from the library onto the detail view controller’s view, positioning it as the last view within the stack view.

Select the image view and open its size inspector. You want the vertical content hugging and content compression resistance priorities for the image view to be lower than those of the other views. Change the Vertical Content Hugging Priority to 248 and the Vertical Content Compression Resistance Priority to 749. Your layout will look like Figure 15.2.

Figure 15.2  UIImageView on DetailViewController’s view

A UIImageView displays an image according to the image view’s contentMode property. This property determines where to position and how to resize the content within the image view’s frame. For image views, you will usually want either aspect fit (if you want to see the whole image) or aspect fill (if you want the image to fill the image view). Figure 15.3 compares the result of these two content modes.

Figure 15.3  Comparing content modes

With the UIImageView still selected, open the attributes inspector. Find the Content Mode attribute and confirm it is set to Aspect Fit.

Next, Option-click DetailViewController.swift in the project navigator to open it in another editor. Control-drag from the UIImageView to the top of DetailViewController.swift. Name the outlet imageView and make sure the storage type is Strong (Figure 15.4). Click Connect.

Figure 15.4  Creating the imageView outlet

The top of DetailViewController.swift should now look like this:

    class DetailViewController: UIViewController, UITextFieldDelegate {

        @IBOutlet var nameField: UITextField!
        @IBOutlet var serialNumberField: UITextField!
        @IBOutlet var valueField: UITextField!
        @IBOutlet var dateLabel: UILabel!
        @IBOutlet var imageView: UIImageView!