Build an App Like Lego — Tutorial 10

Create an Outlet and Attribute

Photo by Zhen Hu on Unsplash

1. Introduction

In Tutorial 9 we connected existing outlets in NewsTableViewCell and entered the attributes we needed.

In this Tutorial 10, we will create our own outlet for the second image view and an attribute where we can set its image.

This is about as close as we need to get to real coding. Most of the coding work is already done for us. The template code that we write in this tutorial will be fundamentally the same for any other outlet and attribute we create going forward. This is as hard as it gets — and it’s not that hard.

2. Show the Xib and Code

👉 In Xcode, select the NewsTableViewCell.xib in the Project Navigator.

We need to view both this xib file and the corresponding code file at the same time.

👉 In the toolbar, click on the Assistant Editor.

👉 You should see the NewsTableViewCell.swift code one the right hand side. If not, check that the right hand side’s file is set to Automatic, by clicking on the popup menu, as shown.

👉 If you need more room on your screen, hide the Inspector Panel using the top right button in the toolbar or by clicking on the View menu, then Inspectors > Hide Inspectors.

3. Create an Outlet

👉 Hold down the Control key (on the keyboard) and drag from the second image view in the xib to under the class line in the code file.

👉 Xcode presents a popover for the new outlet. Enter the Name of the outlet as detailImageView.

👉 Click the Connect button.

👁 Xcode writes the connection code for us and connects it to the image view in the xib.

👁 You don’t need to understand it, but in case you’re curious, the created line of code includes:

1. The filled in circle in the margin indicates that this outlet is connected to something in the xib.
2. @IBOutlet creates the circle in the margin and lets Xcode know that it can be connected to a view in a xib.
3. weak means that the app can release (forget) this connection when nothing is using it.
4. var means that this is a “variable” that can be changed by code or connections. A variable is an attribute (also called a “property”) that can be varied (i.e. changed).
5. detailImageView is what we typed in earlier to be the name of this variable.
6. : UIImageView declares the class of this variable as UIImageView. Therefore, this outlet can only be connected to a UIImageView.
7. The exclamation mark (!) indicates that this variable must be connected before it is used. That is, it must have a value and cannot be nil.

We have finished with the Assistant Editor for now. We needed both the xib and Swift file visible at the same time, using the Assistant Editor, only so that we could control drag a connection between them.

👉 You can switch back to the Standard Editor using the left of the three Editor modes, in the toolbar.

4. Access the Outlet from Code

👉 Select the NewsTableViewCell.swift file in the Project Navigator so we can have a close look at the code.

This detailImageView outlet is all that a developer needs in order to access the large second image in this cell. They would write code that gets the current image using code like this:

return detailImageView.image

This uses “dot notation”, where detailImageView.image means “the detailImageView’s image. We refer to image as an “attribute” or a “property” or a “variable” of the detailImageView.

The developer would probably write code to fetch a new image value from a server, then set the image of the detailImageView to that new value with code, like this:

detailImageView.image = newValue

5. Create an Attribute

In our case, we don’t yet have a server or code to populate the detail image in our cells. While we’re setting up the prototype, it’s handy to be able to set the image using the Attributes Inspector, on a cell by cell basis. We can do this by creating a convenience variable that offers a detailImage attribute in the Attributes Inspector, but gets and sets the detailImageView.image behind the scenes (i.e. in the code).

👉 Add code in the NewsTableViewCell.swift file, to match the following:

👁 For the curious, here’s a quick breakdown of what we just typed:

1. @IBInspectable tells Xcode to show this variable in the Attributes Inspector.
2. var means that we are defining a variable (also called a “property” or “attribute”).
3. detailImage is the name we have chosen for this variable. We could call it whatever we want, but it makes sense to use the suffix Image since this has the class UIImage, and to call it detailImage since it will access the detailImageView’s image.
4. : UIImage declares that our variable is a UIImage. That is, our detailImage’s class is UIImage.
5. The ? after the UIImage means that this variable is allowed to have no value. We use the term “nil” to refer to no value. If a variable is allowed to be nil, we say it is “optional”.
6. The get section of code defines what happens when something asks for the current value of the detailImage. It just returns the value of the detailImageView’s image.
7. The set section of code defines what happens when something tries to provide a new value for the detailImage. It sets the detailImageView’s image to that newValue.

That’s it, we’ve finished the NewsTableViewCell code. Soon, we will create a few more similar classes for Products and Chat cells, so that all we’ve learned sinks in.

6. Set Custom Attribute

Let’s use the new detailImage attribute to set the image for each of the cells in News.

👉 Switch back to the Main.storyboard file, in the Project Navigator. Select the first cell in the News scene.

👁 In the Attributes Inspector you can see a new section titled News Table View Cell containing the new attribute that we added.

👁 Xcode converted the NewsTableViewCell “upper camel case” class name to the more human readable title case of News Table View Cell. Similarly, it shows the variable name of detailImage as the title Detail Image.

Since we declared this variable to be a UIImage, Xcode knows to show a list of the images in our app as possible values.

👉 Next to the Detail Image label, click on the popup menu and choose chain. Similarly, select the second cell and set the Detail Image to houseInterior.

👁 You should see the detail image in each of the cells.

👉 Run the app.

7. Commit Changes

As you’ve done before:

1. 👉 Choose Commit Changes from the Source Control menu.
2. 👉 Enter a description such as: NewsTableViewCell: created outlet and attribute for detail image
3. 👉 Click on the Commit button.

8. Recap

The cells in the News scene now show all of the attributes we’ve defined and entered. We’ve created our outlet and attribute for the detail image, which is specifically required for this cell.

⁉️ If you have any questions or comments, please add a response below.

Compared to our desired layout, we still need to format the different text labels with weight, size and color. We also need to do something to allow the detail text to wrap over multiple lines and the detail image to grow to fit the content. The cells themselves will need to be able to grow to fit that growing content. We’ll tackle those next, in Tutorial 11.