Porting Your iOS App to macOS

Creating the User Interface

Your empty view Mac app isn’t very useful, so it’s time to build the UI. From the BeerTracker-mac group, open Main.storyboard. Start by dragging a Table View into your empty view. Now select the Table View in the Document Outline.

macOS storyboards sometimes require you to dig down a bit deeper into the view hierarchy. This is a change from iOS, where you’re used to seeing all template views at the top level.

Configuring the Table View

With the Table View selected, make the following changes in the Attributes Inspector:

• Set Columns to 1
• Uncheck Reordering
• Uncheck Resizing

Select the Table Column in the Document Outline and set its Title to Beer Name.

In the Document Outline, select the Bordered Scroll View (which houses the Table View), and in the Size Inspector find the View section and set the View dimensions to the following:

• x: 0
• y: 17
• width: 185
• height: 253

Setting the coordinates is going to be slightly different here, as well. In macOS, the origin of the UI is not in the top left, but the lower left. Here, you’ve set the y coordinate to 17, which means 17 points up from the bottom.

Adding a Delegate and Data Source

Next you’ll need to connect your delegate, data source and properties for the Table View. Again, you’ll need to select the Table View from the Document Outline to do this. With it selected, you can Control-drag to the View Controller item in the Document Outline and click delegate. Repeat this for the dataSource.

Open ViewController.swift in the Assistant Editor, Control-drag from the Table View and create a new outlet named tableView.

Before you finish with the Table View, there’s one last thing you need to set. Back in the Document Outline, find the item named Table Cell View. With that selected, open the Identity Inspector, and set the Identifier to NameCell.

Images and Text

With the Table View setup, next comes the “form” section of the UI.

First, you’ll add an Image Well to the right of the table. Set the frame to the following:

• x: 190
• y: 188
• width: 75
• height: 75

An Image Well is a convenient object that displays an image, but also allows a user to drag and drop a picture onto it. To accomplish this, the Image Well has the ability to connect an action to your code!

Open the BeerTracker-mac ViewController.swift in the Assistant Editor and create an outlet for the Image Well named imageView. Also create an action for the Image View, and name it imageChanged. Ensure that you change Type to NSImageView, as shown:

While drag and drop is great, sometimes users want to be able to view an Open Dialog and search for the file themselves. Set this up by dropping a Click Gesture Recognizer on the Image Well. In the Document Outline, connect an action from the Click Gesture Recognizer to ViewController.swift named selectImage.

Add a Text Field to the right of the Image Well. In the Attributes Inspector, change the Placeholder to Enter Name. Set the frame to the following:

• x: 270
• y: 223
• width: 190
• height: 22

Create an outlet in ViewController.swift for the Text Field named nameField.

Rating a Beer

Next, add a Level Indicator below the name field. This will control setting the rating of your beers. In the Attributes Inspector, set the following:

• Style: Rating
• State: Editable
• Minimum: 0
• Maximum: 5
• Warning: 0
• Critical: 0
• Current: 5
• Image: beerMug

Set the frame to the following:

• x: 270
• y: 176
• width: 115

Create an outlet for the Level Indicator named ratingIndicator.

Add a Text View below the rating indicator. Set the frame to:

• x: 193
• y: 37
• width: 267
• height: 134

To create an outlet for the Text View, you’ll need to make sure you select Text View inside the Document Outline, like you did with the Table View. Name the outlet noteView. You’ll also need to set the Text View‘s delegate to the ViewController.

Below the note view, drop in a Push Button. Change the title to Update, and set the frame to:

• x: 284
• y: 3
• width: 85

Connect an action from the button to ViewController named updateBeer.

Adding and Removing Beers

With that, you have all the necessary controls to edit and view your beer information. However, there’s no way to add or remove beers. This will make the app difficult to use, even if your users haven’t had anything to drink. :]

Add a Gradient Button to the bottom left of the screen. In the Attributes Inspector, change Image to NSAddTemplate if it is not already set.

In the Size Inspector, set the frame to:

• x: 0
• y: -1
• width: 24
• height: 20

Add an action from the new button named addBeer.

One great thing about macOS is that you get access to template images like the + sign. This can make your life a lot simpler when you have any standard action buttons, but don’t have the time or ability to create your own artwork.

Next, you’ll need to add the remove button. Add another Gradient Button directly to the right of the previous button, and change the Image to NSRemoveTemplate. Set the frame to:

• x: 23
• y: -1
• width: 24
• height: 20

And finally, add an action from this button named removeBeer.

Finishing The UI

You’re almost finished building the UI! You just need to add a few labels to help polish it off.

Add the following labels:

• Above the name field, titled Name.
• Above the rating indicator titled Rating.
• Above the notes view titled Notes.
• Beneath the table view titled Beer Count:.
• To the right of the beer count label, titled 0.

For each of these labels, in the Attributes Inspector, set the font to Other – Label, and the size to 10.

For the last label, connect an outlet to ViewController.swift named beerCountField.

Make sure your labels all line like so:

Click the Resolve Auto Layout Issues button and in the All Views in View Controller section click Reset to Suggested Constraints.