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.
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
}