Adding Images to the UI

Still, doesn’t this look a little…plain? Those three labels at the top leave an awful lot of whitespace below them. And depending on the size of the device, that space could get really big—it will be a lot more noticeable on iPhone 7 Plus than iPhone SE.

Until we have more controls or displays that need space, one way we could use this space would be with an image. Most podcasts supply their own artwork, and later on when we’re parsing podcast feeds, we can put an episode- or show-specific logo in this space. For now, we’ll significantly beautify our app just by adding a generic image.

Image Views

In the Object Library, find the icon for an image view (it looks like a palm tree), and drag it to the empty space in the bottom of the scene. This will create a rectangle called UIImageView. This view will display any bitmap image we provide it with.

As you might recall from the last section, we will need to give the view some autolayout constraints if we want it to fill up the space below the title label and extending out to the sides and bottom of the scene. Select the UIImageView, click the Pin menu button to bring up the Auto Layout pop-over, and give it top, bottom, left, and right constraints of 0, with the Constrain To Margin check box selected. Click Add Constraints to finish with the pop-over, and then click Update Frames to apply the layout to the scene. This causes the image view to extend to the bottom and both sides of the scene.

Image Assets

Now we need some artwork. Later on, we’ll download podcasts’ logos from the Internet, but for now, we could really use a default; otherwise, this image view will be empty. Fortunately, we can add images directly to the app itself.

Back in the Project Navigator in the left pane, select the Assets.xcassets file. This kind of assets file is a collection of different kinds of image assets that will be included as part of our application: static images, app icons, 3D textures, etc. By default, it’s empty but for an entry called AppIcon, which has a bunch of empty image wells; we will populate those much later, in Chapter 12, ​Publishing and Maintaining the App​.

Right now, what we want is a new image to be included with our app. At the bottom left of this view, click the Plus (+) button to bring up a pop-up menu, and choose New Image Set. This creates an entry in the list called “Image.” If we select it, there are three image wells, labelled 1x, 2x, and 3x.

These wells represent the three pixel depths supported by iOS Retina displays, Apple’s marketing term for displays of such a high resolution that the eye can’t see individual pixels. On the first iPhones, there was one physical pixel for each virtual “point” in the coordinate system. Then the first Retina displays used four pixels for each point. This is represented by the “2x” (since the four pixels are arranged 2-by-2). Then with the large “Plus” models, we got an even higher resolution, indicated by the “3x”.

For static images, we need to match pixel sizes to these multipliers. For example, if we want an image to appear as 100x100 on screen, then its 1x image file should actually be 100x100, but the 2x should be 200x200, and so on. If a given resolution isn’t supplied, iOS will scale up or down from whatever image is available.

If you’re working with our download code, you’ll see that we have provided a generic podcast image at sizes 512x512, 1024x1024, and 1536x1536, as shown in the following figure. If you want to work with your own image or images, that’s great; just drag them to the image wells to add them to the project.

Of course, the default name of Image is not great, since we might want to add more images to the app. In the asset list, select Image, and then click again to edit it. Change its name to default-logo. The asset library should now look like the following figure (minus 2x or 3x if you didn’t have your own graphics for those sizes).

Populating the Image View

Now we can use this image in our UI. Go back to Main.storyboard, select the UIImageView, and bring up its Attributes Inspector ⌥⌘4. In the Image text field, type default-logo as shown in the following figure. Once you press Enter, the image view in the scene will immediately fill in with the image.

But there’s a problem. Pretty much any layout of the view will be rectangular, and podcast artwork is typically square. In all likelihood, the image in the scene is being stretched vertically or horizontally to fill the entire view. We don’t want that—we want it to respect its original aspect ratio—i.e., to stay square.

Still in the Attributes Inspector, look down a few lines and notice the pop-up menu for Content Mode. This defines how the contents of certain views, like image views, should be adapted to fit their size. The default choice is Scale To Fill, which stretches in both directions to fill the image view. Obviously, we don’t want that.

There are two choices that perform scaling while respecting the image’s aspect ratio. Aspect Fit will scale to fill either horizontally or vertically, while leaving empty space in the other dimension if necessary. Aspect Fill is similar, but it will fill both dimensions, by allowing part of the image to go beyond the image’s boundaries if needed. We’d rather have empty space than risk cutting off parts of our image, so choose Aspect Fit. The image regains its proper shape.

There’s one other problem, a fairly obscure one, but obvious if you used a big image like we did. Image views are a little weird with autolayout if you don’t specify an explicit width or height—which we didn’t, since we used constraints around the sides instead. Image views will try to honor the “intrinsic size” of their contents, so even if we want our 512x512 image to scale with Aspect Fit, the image view will try to get big enough to fit it. If you try switching the device type or orientation, the layout of the Play buttons and the labels may now be messed up.

The fix here is under the Size Inspector, the little ruler icon in the right pane’s toolbar (also available with the shortcut ⌥⌘5). Scroll down and you’ll see there are properties for Content Hugging Priority and Content Compression Resistance Priority. These refer, respectively, to how much the image view allows itself to be stretched or squished to suit other layout constraints. High values here mean the size of the contents’ size always wins. We want the opposite of that, to always allow our image to be scaled, so set all of these values to 1.

With that fixed, the scene should now preview just fine for all devices and orientations, and you can run the app to see the default icon smartly using our whitespace in the bottom portion of the screen. Later on, we’ll put each podcast’s logo in here and it’ll look really great.