How do I make a custom collectionview cell visible? - ios

Question

I can't seem to make my custom collectionView Cell visible. I know that the CollectionView shows up because I changed the background color on the attributes inspector, but the custom cell is not showing up. I set the constraints in the attributes inspector and have a horizontal stack view under the image.
I followed the direction from a Udemy course exactly but it doesn't seem to work. This is how I have configured the cell to look:
The code is below:
import UIKit
class ListVC: UIViewController, UICollectionViewDelegate, UICollectionViewDataSource {
#IBOutlet weak var productsCollection: UICollectionView!
private(set) public var products = [Product]()
override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view, typically from a nib.
productsCollection.dataSource = self
productsCollection.delegate = self
}
func initProducts(Product: Product) {
products = DataService.instance.getGroceryOptions()
}
func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
return products.count
}
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
if let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "ProductCell", for: indexPath) as? ProductCell {
let product = products[indexPath.row]
cell.updateViews(product: product)
return cell
}
return ProductCell()
}
}
Here is the ProductCell implementation:
class ProductCell: UICollectionViewCell {
#IBOutlet weak var itemImage: UIImageView!
#IBOutlet weak var productName: UILabel!
#IBOutlet weak var productPrice: UILabel!
#IBOutlet weak var calCount: UILabel!
func updateViews(product: Product){
itemImage.image = UIImage(named: product.imageName)
productName.text = product.title
calCount.text = product.cal
productPrice.text = product.price
}
}
Here is the DataService implementation:
class DataService {
static let instance = DataService()
private let item = [
Product(title: "Eggs", price: "4.94", imageName: "eggs.jpeg", cal: "340"),
]
private let Groceries = [Product]()
func getGroceryOptions() -> [Product] {
return Products
}
}
Here is the Product implementation:
struct Product {
private(set) public var title: String
private(set) public var price: String
private(set) public var imageName: String
private(set) public var cal: String
init(title: String, price: String, imageName: String, cal: String) {
self.title = title
self.price = price
self.imageName = imageName
self.cal = cal
}
}

Answer 1

1) Your initProducts method is not called anywhere in the code.
2) You have to call collectionView.reloadData() after you update your data source. Which means, you have to call this method after updating products property.
3) Also, as other people in their answers mentioned, seems that your getGroceryOptions() method should actually return items instead of Products (what's that, btw?).
4) Please, follow swift style guide for writing your code. It will be easier for you to distinguish classes/struct from variables. You can learn more about it here and also here.

Answer 2

Your initProducts method is not called. Because of this products array stays empty and you see no cells in your collection.
You should call initProducts (e.g. in viewDidLoad) to fill products array with elements which will be shown in your collection.
Also consider removing parameters from this function (you're not using parameter within this method, so you don't need it there). It should look like:
func initProducts() {
products = DataService.instance.getGroceryOptions()
}
Plus you should correct getGroceryOptions method. It should return item as was pointed out in comments.

Answer 3

Do you have a numberOfSectionsInCollectionView section that goes before the other collectionView functions?
Take a look at this example:
func numberOfSectionsInCollectionView(collectionView:UICollectionView) -> Int {
return 1
}