0% found this document useful (0 votes)
22 views5 pages

Teste

The document describes connecting outlets in a collection view cell class to display data. It involves: 1. Creating outlets in the collection view cell class for the image view and label. 2. Setting the class of the collection view cell in the storyboard to the outlet class. 3. Updating the view controller's data source methods to get the number of cells and data for each cell from a data manager, which loads data from a property list. This allows the collection view to display the images and text for different cuisine items loaded from the property list.

Uploaded by

ojuara araujo
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
22 views5 pages

Teste

The document describes connecting outlets in a collection view cell class to display data. It involves: 1. Creating outlets in the collection view cell class for the image view and label. 2. Setting the class of the collection view cell in the storyboard to the outlet class. 3. Updating the view controller's data source methods to get the number of cells and data for each cell from a data manager, which loads data from a property list. This allows the collection view to display the images and text for different cuisine items loaded from the property list.

Uploaded by

ojuara araujo
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 5

Connecting the outlets in exploreCell

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:

Figure 14.8: Toolbar showing Navigator and Inspector buttons

2. Click the Adjust Editor Options button to display a menu:

Figure 14.9: Adjust Editor Options button

3. Choose Assistant from the menu to display the assistant editor:

Figure 14.10: Adjust Editor Options menu with Assistant selected

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:

Figure 14.11: Assistant editor bar showing ExploreCell.swift

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:

Figure 14.12: Editor area showing ExploreCell.swift

6. In the pop-up dialog, enter exploreNameLabel in the Name field to set the outlet's
name:

Figure 14.13: Pop-up dialog box for exploreNameLabel outlet creation

Displaying data in a collection view 339

340 Getting Data into Collection Views

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:

Figure 14.14: Editor area showing ExploreCell.swift

8. In the pop-up dialog, enter exploreImageView in the Name field to set the outlet's
name:

Figure 14.15: Pop-up dialog box for exploreImageView outlet creation

9. The exploreNameLabel and exploreImageView outlets have been added to the


ExploreCell class and connected to the exploreCell collection view cell's image view
and label elements, as shown:

Figure 14.16: Editor area showing exploreNameLabel and exploreImageView outlets 10. Click the x
button to close the assistant editor:

Figure 14.17: Assistant editor close button

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.

Displaying data in a collection view 341

Tip
You can check whether the outlets are connected properly in the Connections inspector.

342 Getting Data into Collection Views

Implementing additional data manager methods


As you learned in Chapter 13, Getting Started with MVC and Collection Views, a collection
view needs to know how many cells to display and what to put in each cell. You will
add two methods to the ExploreDataManager class that will provide the number of ExploreItem
instances in the exploreItems array and return an ExploreItem instance at a specified array
index. Click the ExploreDataManager file in the Project navigator and add these two methods
after the loadData() method:

func numberOfExploreItems() -> Int {

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.

Updating the data source methods in


ExploreViewController
The data source methods in the ExploreViewController class are currently set to display 20
cells, each cell containing an empty image view and label. You'll update them to get the number
of cells to display, and the data to put in each cell, from the ExploreDataManager instance.
Follow these steps:

1. Click the ExploreViewController file and find the viewDidLoad() method. It should look like
this:

override func viewDidLoad() {

super.viewDidLoad()

let manager = ExploreDataManager()

manager.fetch()

Displaying data in a collection view 343 This means the ExploreDataManager instance is only
accessible within the

viewDidLoad() method. You need to make it available to the entire class.

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:

3. Update collectionView(_:numberOfItemsInSection:) as shown. This will make the


collection view display a cell for each element in the items array:
4. Update collectionView(_:cellForItemAt:) as shown to set the image view and label for
each cell using data from the corresponding element in the items array:
@IBOutlet var collectionView: UICollectionView!

let manager = ExploreDataManager()

func collectionView(_ collectionView: UICollectionView,


numberOfItemsInSection section: Int) -> Int {

manager.numberOfExploreItems()

}
func collectionView(_ collectionView: UICollectionView,
cellForItemAt indexPath: IndexPath) ->
UICollectionViewCell {

let cell = collectionView.dequeueReusableCell(

withReuseIdentifier: "exploreCell", for:

indexPath) as! ExploreCell


let exploreItem = manager.exploreItem(at:

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:

Specifies the cell that is dequeued is an instance of ExploreCell.

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(

withReuseIdentifier:"exploreCell", for: indexPath)

as! ExploreCell

let exploreItem = manager.exploreItem(at:

indexPath.row)

cell.exploreImageView.image = UIImage(named:

exploreItem.image!)

Displaying data in a collection view 345

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.

346 Getting Data into Collection Views

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.

You might also like