Teste
Teste
To manage what is being displayed by the collection view cells in the Explore screen, you'll
connect the image view and label in the exploreCell collection view cell
to outlets in the ExploreCell class. You"ll use the assistant editor for this. Follow these steps:
1. Click the Navigator and Inspector buttons to hide the Navigator and Inspector areas.
This will give you more room to work:
4. To create the outlets for the ExploreCell class, the assistant editor path should be set to
Automatic | ExploreCell.swift. If you don't see ExploreCell. swift in the path, select the
exploreCell collection view cell's Label in the document outline and select
ExploreCell.swift from the assistant editor's path drop-down menu:
5. Ctrl + Drag from the Label element in the collection view cell to the space between the
curly braces as shown. This creates an outlet for it:
6. In the pop-up dialog, enter exploreNameLabel in the Name field to set the outlet's
name:
7. Ctrl + Drag from the UIImageView element in the collection view cell to the space
just after the exploreNameLabel property. This creates an outlet for it:
8. In the pop-up dialog, enter exploreImageView in the Name field to set the outlet's
name:
Figure 14.16: Editor area showing exploreNameLabel and exploreImageView outlets 10. Click the x
button to close the assistant editor:
The exploreCell collection view cell in the Main storyboard file has now been set up with a
class, ExploreCell. The outlets for the collection view cell's image view and label have also
been created and assigned. Now, you can set the exploreNameLabel and exploreImageView
outlets in the ExploreCell instance to display a cuisine image and name in each cell when the
app is run.
In the next section, you will add code to ExploreDataManager to provide the number of cells to
be displayed by collectionView, and provide an ExploreItem instance whose properties will be
used to determine what image and label the cell will display.
Tip
You can check whether the outlets are connected properly in the Connections inspector.
exploreItems.count
}
func exploreItem(at index: Int) -> ExploreItem {
exploreItems[index]
The first method, numberOfExploreItems(), will determine the number of cells to be displayed
by the collection view.
The second method, exploreItem(at:), will return an ExploreItem instance that corresponds to a
cell's position in the collection view.
In the next section, you'll update the collection view data source methods in the
ExploreViewController class to provide the number of cells to be displayed in the collection
view, and to provide the cuisine name and image for each cell.
1. Click the ExploreViewController file and find the viewDidLoad() method. It should look like
this:
super.viewDidLoad()
manager.fetch()
Displaying data in a collection view 343 This means the ExploreDataManager instance is only
accessible within the
2. Move the let manager = ExploreDataManager() line to just after the collectionView property
declaration to make the ExploreDataManager instance available to all methods within the
ExploreViewController class, as shown:
manager.numberOfExploreItems()
}
func collectionView(_ collectionView: UICollectionView,
cellForItemAt indexPath: IndexPath) ->
UICollectionViewCell {
indexPath.row)
cell.exploreNameLabel.text = exploreItem.name
cell.exploreImageView.image = UIImage(named:
exploreItem.image!)
return cell
}
344 Getting Data into Collection Views Let's break this down:
Gets the ExploreItem instance that corresponds to the current cell in the collection view. In
other words, the first cell in the collection view corresponds to the first ExploreItem instance in
the exploreItems array, the second cell corresponds to the second ExploreItem instance, and so
on.
cell.exploreNameLabel.text = exploreItem.name
Sets the text property of the cell's nameLabel to the name of the ExploreItem instance.
Gets the image string from the ExploreItem instance, gets the corresponding image from the
Assets.xcassets file, and assigns it to the image of the cell's imgExplore property.
Build and run the app. You'll see the collection view in the Explore screen display images and
text of different cuisines. Tapping a collection view cell will display the Restaurant List
screen:
let cell = collectionView.dequeueReusableCell(
as! ExploreCell
indexPath.row)
cell.exploreImageView.image = UIImage(named:
exploreItem.image!)
Figure 14.18: iOS Simulator showing Explore and Restaurant List screens
At this point, the Explore screen displays images and text of different cuisines based on the data
obtained from the ExploreData.plist file. In Chapter 17, Getting Started with JSON Files, you
will modify the RestaurantListViewController class to make the Restaurant List screen display
a list of restaurants offering the selected cuisine. But before you can do that, you'll need to set a
location in the Locations screen, which will provide a list of all available restaurants at that
location. This will be covered in the next chapter.
Summary
In this chapter, you added a property list file, ExploreData.plist, to your
project. You implemented the ExploreItem structure, the model objects for the Explore screen.
You created a data manager class, ExploreDataManager, to read data from ExploreData.plist,
put the data into an array of ExploreItem instances, and provide it to ExploreViewController.
You created a class for the exploreCell collection view cell. Finally, you configured the data
source methods in the ExploreViewController class to use data from the array of ExploreItem
instances to populate the collection view, and the Explore screen now displays a list of cuisines.
Great job!
You now know how to provide data to an app using .plist files, create model objects, create data
manager classes that load .plist files into model objects, configure collection views to display
data that has been loaded, and configure view controllers for collection views. This will be
useful should you wish to create your own apps that use collection views.
In the next chapter, you will look at table views, which are similar in some ways to collection
views, and configure the Locations screen to display a list of locations in a table view when you
tap the LOCATION button in the Explore screen.