Showing restaurants 

We will be showing a list of restaurants just like in our app, but we will not be doing the entire interface. Most of this code will be familiar to you as we have done it before.

1. Open up the MessagesViewController.swift file in the Navigator panel and add the following code inside of the class declaration:

@IBOutlet var collectionView: UICollectionView!
let manager = RestaurantDataManager()
var selectedRestaurant:RestaurantItem?

2. Next, we need to set up our Collection View defaults. Add the following method inside of a private extension:

private extension MessagesViewController {
    func setupCollectionView() {
        let flow = UICollectionViewFlowLayout()
        flow.sectionInset = UIEdgeInsets(top: 7, left: 7, bottom: 7, right: 7)
        flow.minimumInteritemSpacing = 0
        flow.minimumLineSpacing = 7
        collectionView.collectionViewLayout = flow
        collectionView.delegate = self
        collectionView.dataSource = self
    }
}

You will see errors once you add the preceding code. Ignore them for now as we will fix them shortly. Now, we will create an initialize() method that will set up the Collection View and fetch our data.

3. Add the following method above the createMessage() method:

func initialize() {
   setupCollectionView()
   manager.fetch(by: "Chicago", completionHandler: {
         self.collectionView.reloadData()
   })
}

Since this tab does not contain a location list, we will just pass a city in manually. Here, we use Chicago, but you can change it to any city of your choice.

4. Next, call the initialize() method inside of the viewDidLoad() method, so that your viewDidLoad() method now looks as follows:

override func viewDidLoad() {
    super.viewDidLoad()
    initialize()
}

5. Then, let's create another extension for our Collection View delegates and data source. After the last curly brace in the MessagesViewController.swift file, add the following extension declaration:

extension MessagesViewController:UICollectionViewDelegate, UICollectionViewDataSource, UICollectionViewDelegateFlowLayout {
}

6. Now that we have our extension set up, let's add all of the methods we need to get our Collection View showing data. Please add the following inside of our extension (which will get rid of our earlier errors):

func numberOfSections(in collectionView: UICollectionView) -> Int {
    return 1
}

func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
    return manager.numberOfItems()
}

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

    let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "restaurantCell", for: indexPath) as! RestaurantMessageCell
    let item = manager.restaurantItem(at: indexPath)
    if let name = item.name { cell.lblTitle.text = name }
    if let address = item.address { cell.lblCity.text = address }
    if let cuisine = item.subtitle { cell.lblCuisine.text = cuisine }
    return cell
}

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
    let cellWidth = self.collectionView.frame.size.width - 14
    return CGSize(width: cellWidth, height: 78)
}

func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {
    selectedRestaurant = manager.restaurantItem(at: indexPath)
    guard let restaurant = selectedRestaurant else { return }
    createMessage(with: restaurant)
}

You should be very familiar with what we just added. We are setting up our Collection View data source as well as making sure our cells have a spacing of 14 pixels (7 on each side).

Lastly, before we build our app, we need to connect our Collection View in the storyboard:

1. Open up MainInterface.storyboard in the MessageApp folder in the Navigator panel.
2. Select the Message View Controller and, then, the Connections inspector in the Utilities panel.
3. Then, under Outlets, click and drag from the empty circle next to collectionView to the Collection View in our scene.

Let's change the target Message App and build and run our iMessages app by hitting the Play button (or using ⌘ + R). Your app should look similar to the following after clicking the stickers button:

Hitting the arrow (highlighted by the red boxes) will expand the screen to expanded mode from compact mode and back again. Now that we have our restaurants displaying, we need to be able to send the restaurant reservation to other people. Let's add that next.