Porting Your iOS App to macOS
- Getting Started
- Adding the Assets
- Separation of Powers
- Creating the User Interface
- Configuring the Table View
- Adding a Delegate and Data Source
- Images and Text
- Rating a Beer
- Adding and Removing Beers
- Finishing The UI
- Adding the Code
- Adding Data to the Table View
- Removing Entries
- Handling Images
- Final Touches
- Where to Go From Here?
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
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
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
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
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
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
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
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
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.