Connecting outlets in storyboard to the view controller

Let's review where you are now. In Main.storyboard, you have a View ControllerScene that has a view containing a collection view. In ExploreViewController.swift, you have code that declares and defines the ExploreViewController class. You need to assign the ExploreViewController class as the view controller for the view containing the collection view. To do this, you will use the Identity inspector.

After that, you need to be able to manage the collection view from ExploreViewController. You'll create a connection between the collection view to an outlet in ExploreViewController.

To assign the identity of the view controller scene in the Explore screen to the ExploreViewController class, follow these steps:

  1. Click on Main.storyboard. Make sure the View Controller Scene for the Explore screen is selected. Click the View Controller icon in the document outline. Then, click on the Identity inspector:

  1. In the Class field, choose ExploreViewController

Now, the view controller for this scene has been set to ExploreViewController. Note that the scene name has changed from View Controller Scene to Explore View Controller Scene. Now let's create the outlet for the collection view.

  1. Click the Navigator and Inspector buttons to hide the Navigator and Inspector areas:

 

  1. Click on the Adjust Editor Options button:

  1. Choose Assistant from the pop-up menu:

This will display any Swift files associated with this scene.

  1. As you can see, the Main.storyboard file's content appears on the left and some code appears on the right, but it doesn't look like the ExploreViewController class. Look at the bar just above the code. You will see that UIResponder.h has been selected, which is incorrect:

  1. Click on UIResponder.h and choose ExploreViewController.swift from the pop-up menu:

The ExploreViewController class definition appears on the right-hand side of the Editing area. Now, you need to connect the collection view in the Explore View Controller Scene to an outlet in the ExploreViewController class.

  1. Ctrl + Drag from the Collection View in the Explore View Controller Scene to the ExploreViewController file, just below the class name declaration:

  1. Type the name of the outlet, collectionView, into the Name text field and click Connect:


  1. Now, you will see that the code that creates the collectionView outlet has been automatically added to the ExploreViewController.swift file. Note the IBOutlet keyword, which indicates that collectionView is an outlet. Click the x to close the Assistant window:

ExploreViewController now has an outlet, collectionView, for the collection view. This means ExploreViewController can manage what the collection view displays.

It is common to make mistakes when using Ctrl + Drag to drag from an object in a storyboard scene to the Swift file. This may cause a crash to occur when the app is launched. To check if there are any errors in the connection between the collection view and ExploreViewController, follow these steps:

  1. Click the Navigator and Inspector buttons to display the Navigator and Inspector areas.
  2. With Explore View Controller in Explore View Controller Scene selected, click the Connections inspector:

You should be able to see the outlet, collectionView, connected to the collection view in the Outlets section.

  1. If you see a tiny error icon, click on the x to break the connection:

  1. Drag from the collectionView outlet back to the Collection View to re-establish the connection:

Now, you've assigned ExploreViewController as the view controller for the Explore View Controller Scene and created an outlet in ExploreViewController for the collection view.

Next, in order to display collection view cells on screen, you will need to implement data source methods for the collection view by adding some code to ExploreViewController. You will do this in the next section.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
3.14.131.47