Creating Simple Cells & Managing Retina Images

Topics covered in this iOS Development tutorial:

Creating a Single View Application, Adding cells, Adding images to an app, Retina images

Exercise Preview

Exercise Overview

In the next series of exercises we’ll build an app for the Jive Factory, a music venue. In this exercise, we’ll get started by mocking up a list of upcoming shows. You will also learn how to deal with images for Apple’s high-resolution Retina devices.

Getting Started

1. Launch Xcode if it isn’t already open.

2. Go to File > New > Project or use the shortcut Cmd–Shift–N.

3. Under Application, double–click App to choose this basic starter template.

4. Set the following:
   • Product Name: Jive Factory
   • Team: None (do not change)
   • Organization Name: Your Name
   • Organization Identifier: com.YourName
   • Interface: Storyboard
   • Language: Swift
   • Make sure both options at the bottom (Use Core Data and Include Tests) are unchecked. We do not need these features.

5. Click Next.

6. You’ll now be asked where you want to save the project. Navigate into the Desktop > Class Files > yourname-iOS App Dev 2 Class folder.

7. Check on Create Git repository on My Mac if it is not already.

8. Click Create to finish specifying the location of the new Xcode project.

9. We only want this to be an iPhone app, so under Deployment Info, set the Devices menu to iPhone.

Creating a Single View App

1. In the Project navigator, in the Jive Factory folder, notice that a few files were created automatically. Because we chose Single View App when creating this project, Xcode automatically created a View Controller as well as an AppDelegate.swift file. For this app, we’ll be using a different View Controller, which we’ll create shortly.
2. Click on Main.
3. Make sure the Document Outline is showing. If you don’t see it, click the Show Document Outline button at the bottom left of the Editor area.

4. In the Document Outline, expand View Controller Scene then click on View Controller to select it.

   We want more functionality than what the default View Controller provides. Let’s replace it with a Table View Controller.

5. With the View Controller still selected, hit Delete.
6. At the top right of the window, above the Editor panel, in the Object library , find the Table View Controller object.
7. Drag the Table View Controller onto the Editor.
8. In the Document Outline, select Table View Controller.

9. In the Attributes inspector , under View Controller, check on Is Initial View Controller. This specifies the Storyboard Entry Point, which disappeared when we deleted the first View Controller.

Adding Cells

1. In the Document Outline, expand Table View Controller if it is not already expanded.
2. Click on Table View.
3. In the Utilities area on the right, go to the Attributes inspector tab .

4. Under Table View, from the Content menu, choose Static Cells.

   NOTE: In a later exercise we’ll show you how to create Dynamic Prototype cells using code. In this exercise, we just want to mock up what this View Controller will look like, so we’ll use Static Cells for now.

5. In the Document Outline, expand Table View.
6. Expand Table View Section.
7. Notice there are three Table View Cells listed. Right now we only want to work with one, which we’ll make copies of later, so let’s delete the two extra Table View Cells. Click on the second Table View Cell to select it.
8. Hold Shift and click on the last Table View Cell to select them both.
9. Hit Delete.
10. Click the remaining Table View Cell to select it.
11. In the Attributes inspector , set the Style menu to Subtitle.
12. In the Document Outline, expand Table View Cell then expand Content View.
13. Notice there are two labels: Title and Subtitle. Click on Title.

14. In the Attributes inspector , below the Text menu in the field that currently says Title, delete the text and change it to: Nicole Atkins

15. Click on Subtitle.

16. Underneath the Text menu in the field that currently says Subtitle, change it to: Tue 5/1

Adding Images to an App

We want to add an image of the band to the cell. First we need to add the thumbnail images we will be using to our project.

1. In the Project navigator, click on Assets.xcassets. We want to add the images we need here.

2. Switch to the Desktop and navigate into: Class Files > yourname-iOS Dev Level 2 Class > Band Images > thumbnails

   Notice that each image has three differently named versions. Retina displays are twice the resolution of regular displays. Therefore, an image that is 30x30 on a regular screen will display as 60x60 on a Retina screen. Because of this higher pixel density, to provide crisp images for these devices we also have to include higher-resolution images in the app. This important naming convention allows apps to automatically detect the higher-resolution images and display them instead of the regular images.

3. Press Cmd–A to select all the images in that folder.

4. With Xcode still visible, drag the images to either column of the Editor area.

5. Notice that all the images have been placed in the appropriate 1x, 2x, or 3x spaces automatically.

   NOTE: Ever since the release of iPhone 6 Plus, it is best practice to make three versions of every image for your app (@1x, @2x, @3x). For example, let’s say we start with a @1x image at 29x29. For Retina screens, we’d need @2x versions at 58x58. For Retina HD (iPhone 6 Plus or later), we’d need @3x versions at 87x87.

6. When we add images using the assets catalog, the files are automatically copied over to the project folder. Let’s take a look. In the Project navigator, Ctrl–click or Right–click on Assets.xcassets and choose Show in Finder. This reveals the folder in the Finder.

7. Go into the Assets.xcassets folder and notice all our thumbnail images have been copied into this folder. Sweet!

8. Switch back to Xcode and click on Main.storyboard.

9. Now we’ll add an image to the Table View Cell. In the Document Outline, click on Table View Cell.

10. In the Attributes inspector , from the Image menu, choose thumb-nicole-atkins.

11. Notice the space for a thumbnail image has been added next to the title. Unfortunately Xcode doesn’t show us the image preview unless we run the app. Let’s do so now.

12. Set the active scheme (top-left corner) to Jive Factory > iPhone 8 to preview what the app looks like on an iPhone 8.

    NOTE: The app will automatically choose the higher-resolution images because of the @2x (or @3x) naming convention!

13. Go to the top left and click the Run button .

14. Once the Simulator finishes loading the app, notice that the thumbnail image is a little small. Right now it’s being resized because the cell isn’t tall enough. Let’s make the cell taller.

15. Switch back to Xcode and make sure Table View Cell is selected.

16. In the Utilities area on the right, click the Size inspector tab .

17. Next to Row Height, enter 88 and press Return.

18. Click Run to see the improved look of our cell. Awesome!

Adding More Cells

1. Switch back to Xcode.
2. In the Document Outline, click on Table View Section.
3. In the Utilities area on the right, click the Attributes inspector tab .
4. Next to Rows change 1 to 4 and hit Return. Voilà! We now have four copies of the original cell in the Editor!
5. In the Editor, click on the second Nicole Atkins cell.

6. In the Attributes inspector , from the Image menu, choose thumb-ambulance-ltd.

   We’ll need to run the app to view the new image. We’ll check this shortly.

7. Double–click the Nicole Atkins text in the second cell and change it to: Ambulance LTD
8. Double–click the Tue 5/1 text below that and change it to: Fri 5/4

9. Edit the third and fourth cells for the remaining bands, Sleepies and Black Angels using the details below:

   Band	Date	Image Filename
   Sleepies	Sat 5/5	thumb-sleepies
   Black Angels	Sun 5/6	thumb-black-angels

10. Let’s preview our work so far. Click the Run button.
11. Switch back to Xcode.
12. Click the Stop button.
13. In the Project navigator click on the storyboard, Main.

14. Leave the project open. We’ll continue building this app in the next exercise.