Let's now link our file, ExploreViewController, to our UIViewController in the storyboard:
- While still in the Main.storyboard file, select the UIViewController with the Collection View that we just created, by clicking on the leftmost icon at the top of that controller:
- In the Utilities Panel, select the Identity Inspector, which is the third icon from the left:
- Under Custom Class, in the Class drop-down menu, choose ExploreViewController and hit the Enter key.
- Select the Connections Inspector, the last icon on the right, in the Utilities Panel.
- Under Outlets, you will see collectionView and an empty circle:
IBOutlet is a way to connect to a UI element. We have a Collection View on our UIViewController; now, we are hooking into that variable. Later in the book, you will learn how to create these variables.
- Click on the collectionView circle, and click-drag from the circle in the Connections inspector to the Collection View that we just added inside of the UIViewController:
- Release it and you will see the circle become filled:
We need to hook up the data source and delegate. The delegate and data source allow us to pass data to our Collection View, and to know when our Collection View has some kind of interaction.
The dataSource property is what is used to supply the data for our Collection View, so we need to pass whatever data we have to this property. On the other hand, the delegate property, which supplies the behavior, does not require us to provide anything, as it receives interactions that happen within our Collection View.
- In your scene, select your Collection View and then, in the Utilities Panel, select the Connections Inspector.
- Under the Outlets section, you will see two empty circles, dataSource and delegate:
- Click and drag from the empty circle of the dataSource property to the Explore View Controller in your Outline view, and then release:
- Repeat for the delegate property:
Next, let's set up our Collection View prototype cell to have a color.