CODEWITHSUNDEEP
iosswiftuicollectionviewuicollectionviewcell
Coleman Coats
Coleman Coats

Reputation: 13

How do I make a custom collectionview cell visible?

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:

Image

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

Upvotes: 1

Views: 365

Answers (3)

Maksym Musiienko
Maksym Musiienko

Reputation: 1248

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.

Upvotes: 1

Enrique Gonzalez
Enrique Gonzalez

Reputation: 1

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
}

Upvotes: 0

Yury Bogdanov
Yury Bogdanov

Reputation: 427

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.

Upvotes: 0

Related Questions