…files in the project Like a superhero changing his or her clothes in a phone booth, the main editing pane now transforms into the Interface Builder. This tool lets you drag-and-drop user interface components such as buttons to create the UI of your app. (OK, maybe…

…graphics. Change the labels Because the background image is quite dark, the black text labels have become hard to read. Fortunately, Interface Builder lets you change label color. While you’re at it, you might change the font as well. ➤ Still in the storyboard, select the label…

…curly brackets for class ViewController. I usually put outlets with the other instance variables — at the top of the class implementation. This line tells Interface Builder that you now have a variable named slider that can be connected to a UISlider object. Just as Interface Builder likes to call methods…

…resize a simulator window by simply dragging on one corner of the window — just like you do to resize any other window on macOS. Interface Builder has a few handy tools to help you make the game fit on any screen. The background image ➤ Go to Main.storyboard. Using the Interface…

…things: Make the view in Main.storyboard landscape instead of portrait. Change the Supported Device Orientations setting of the app. ➤ Open Main.storyboard. In Interface Builder, in the toolbar at the bottom, change Orientation to landscape: Changing the orientation in Interface Builder This changes the dimensions of the view controller…

View. You can use this field to give your views names, so they are easier to distinguish in the Document Outline in Interface Builder. Now, instead of having multiple items called “View”, this particular view will display as “Pop-up View” in the Document Outline. Giving the view a description…

…file to the project using the Cocoa Touch Class template. Name it LandscapeViewController and make it a subclass of UIViewController. ➤ In Interface Builder, with Main storyboard open, drag a new View Controller on to the canvas. ➤ In the Document Outline, click on the yellow circle for the view controller…

…used a storyboard in Bull’s Eye, but in this app you will unlock the full power of storyboarding. ➤ Click on Main.storyboard to open Interface Builder. Switching the preview device for storyboard Use the Device button in the Interface Builder toolbar to switch to iPhone SE (3rd Generation…

…buttons you can give them a target-action — a method to call when the Touch Up Inside event is received. Just like in Interface Builder, except now you hook up the event to the action method programmatically. Show the Detail pop-up ➤ First, still in LandscapeViewController.swift add the method…

…this app you will have it sitting above the table view. Set up the storyboard ➤ Open the storyboard and use the Interface Builder toolbar to switch to the iPhone SE (3rd generation). It doesn’t really matter which iPhone model you choose here, but the iPhone SE makes it easiest…

…cell = tableView.dequeueReusableCell( withIdentifier: cellIdentifier, for: indexPath) cell.textLabel!.text = "List \(indexPath.row)" return cell } In ChecklistViewController the table view used prototype cells that you designed in Interface Builder. Just for the fun of it, in AllListsViewController you will take a different approach where you’ll create the cells in code instead…

…this cell in the storyboard momentarily. It will be a prototype cell with the “default” cell style, or “Basic” as it is called in Interface Builder. Cells with this style already contain a text label and an image view, which is very convenient. The icon picker storyboard changes ➤ Open…

…view or table view cell. A nib is really nothing more than a container for a “freeze dried” object that you can edit in Interface Builder. In practice, many apps consist of a combination of nibs and storyboard files, so it’s good to know how to work with both…

…screen, choose Editor ▸ Embed In ▸ Navigation Controller. Putting the view controller inside a navigation controller That’s it. Interface Builder has now added a new Navigation Controller scene and made a relationship between it and your view controller. The navigation controller is now linked with your view controller When…

Xcode warnings. You know how to do that on your own, right? (Hint: use the Add New Constraints button at the bottom of the Interface Builder screen after you’ve sized/positioned the field as you want.) ➤ In the Attributes inspector for the text field, set the Border Style…

Also, add an outlet for the label: @IBOutlet var roundLabel: UILabel! As before, you should connect the label to this outlet in Interface Builder. Don’t forget to make those connections. Forgetting to make the connections in Interface Builder is an often-made mistake, especially by yours truly. It happens…

…from the blank white screen to a tabbed interface? ➤ Open Main.storyboard and select the lone view controller on the storyboard. ➤ Use the Interface Builder toolbar along the bottom of the screen to switch to the iPhone SE (3rd generation) device as you’ve done before. ➤ Now select the lone view…

…viewDidLoad() // Method with one parameter, slider. No return a value. // The keyword @IBAction means that this method can be connected // to a control in Interface Builder. @IBAction func sliderMoved(_ slider: UISlider) // Method with no parameters, returns an Int value. func countUncheckedItems() -> Int // Method with two parameters, cell and item…

…cell and add Auto Layout constraints for left: 0, top: 0, right: 0, and bottom: 0, with Constrain to margins checked. ➤ By default, Interface Builder puts a whole bunch of Latin placeholder text (Lorem ipsum dolor, etc) into the text view. Replace that text with (Description goes here). The user…

…your storyboard items in dark mode, wouldn’t it? It’s really easy to do. ➤ Open the storyboard. ➤ Tap the Appearance button on the Interface Builder toolbar once to set the storyboard to use Dark Appearance – if you tap the button again, it toggle the appearance. Select dark mode appearance…