Search code examples
iosswiftcocoa-touchuicollectionviewuicollectionviewcell

Table View Controller not showing content from asset folder, or any content at all really


As a complete novice, I have followed the tutorial linked below to design a new View of a very similar design. Link Here

Ultimately, I want to display a collection view with an image displayed above a label naming the image above. eg. A picture of a cow with "Beef" displayed below. A chicken, and "Chicken" below, you get the drift.

I've created a UICollectionViewController, called My Meals, as a segue from the main storyboard's Entry Point. The UICollectionViewController, My Meals, is embedded into a Navigation Controller. This View has its own Cocoa Touch Class which is "MyMealsViewController.swift" as seen in the identity inspector.

I've created a Cocoa Touch Class called "CollectionViewCell.swift". I've created a single cell with a UIImageView and a Label on the Collection View. Both the UIImageView and Label have been connected to the CollectionView.swift, as below:

import UIKit

class CollectionViewCell: UICollectionViewCell {

    @IBOutlet weak var mainIngredientImage: UIImageView!
    @IBOutlet weak var mainIngredientLabel: UILabel!
}

The cell has also been given the class CollectionViewCell as seen in the identity inspector.

The code I have taken, hopefully character by character from the video is here:

import UIKit

class MyMealsViewController: UIViewController, UICollectionViewDelegate, UICollectionViewDataSource{

    @IBOutlet weak var collectionView: UICollectionView!

    let ingredients = ["Beef", "Chicken", "Duck", "Lamb", "Pork", "Saugage", "Seafood", "Turkey", "Other"]

    let ingredientsImages: [UIImage] = [


        UIImage(named: "Beef")!,
        UIImage(named: "Chicken")!,
        UIImage(named: "Duck")!,
        UIImage(named: "Lamb")!,
        UIImage(named: "Pork")!,
        UIImage(named: "Sausage")!,
        UIImage(named: "Seafood")!,
        UIImage(named: "Turkey")!,
        UIImage(named: "Other")!,

    ]

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

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

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

        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "Cell", for: indexPath) as! CollectionViewCell

        cell.mainIngredientLabel.text = ingredients[indexPath.item]
        cell.mainIngredientImage.image = ingredientsImages[indexPath.item]

        return cell
    }
}

Images I am hoping to be used are named as per the code, and they are all sitting and waiting in the Assets.xassets folder.

The issue I am facing, is that when I run the simulator, the page will load, the background colour will load. However that is it. There are no labels. No images. I'd understand if there were labels, but there is nothing appearing to do with the cell.

I have attempted changing the UIImageView from Aspect Fill, Aspect Fit and Scale to Fill. All to no avail.

Please can someone recommend where I have gone astray? Yes, I also understand that I have to start somewhere, and this video may not be the easiest to follow but it looks like what I am hoping to create! Any questions, or anything I have omitted in my novice state please ask.


Solution

  • You're missing the "two important things" he mentions that he forgot at 7:25 in the video – that is, you need to set your collection view's dataSource and delegate to your view controller:

    override func viewDidLoad() {
        super.viewDidLoad()
    
        collectionView.dataSource = self
        collectionView.delegate = self
    }