Swift 5 - why does my collectionview disappear when embedded in a stackview? - uicollectionview

Question

I am trying to make an Amazon clone. I am working on the products details page. basically you search, you click the tableviewcell for the item you want and you land on the details page. everything loads except for the collectionview which contains the images. when I remove the stackview everything loads fine but when I embed the view's contents into the stackview the collectionviewcell disappears. the cellForItemAt method doesn't even get called. I don't know why and I could really use some help.
edit: it seems the imageView in the collection cell css unwrapping as nil. I'm not sure why. I connected it to the cell from the storyboard. not sure why it's not working. I turned it into an optional cell.imagioView?.kf.setImage(with: imageUrl) but the collection view loads without the images inside. I finally get the horizontal scrollable action but the images don't load. I'm printing the url for the image when it comes into focus but it cannot be added to the cell. it seems the collection cell is loading but the image can't be added for some reason.
here's the view controller that is supposed to display it
class ProductViewController: UIViewController, UICollectionViewDelegate {
#IBOutlet var stackedView: UIStackView!
#IBOutlet weak var detailedView: UIView!
#IBOutlet var detailPageView: UIScrollView!
#IBOutlet var imagesCarouselCollection: UICollectionView!
#IBOutlet weak var titleLabel: UILabel!
#IBOutlet weak var desc: UILabel!
#IBOutlet weak var features: UILabel!
#IBOutlet weak var price: UILabel!
#IBOutlet weak var starsLabel: UILabel!
#IBOutlet weak var noOfReviews: UILabel!
#IBOutlet weak var addToCartBtn: UIButton!
#IBOutlet weak var buyNowBtn: UIButton!
var searchedText: String = ""
var asinForSearch: String = ""
var resultsManager = ResultsManager()
var productDeets: Products?
var imagesArray = Array<String>()
override func viewDidLoad() {
super.viewDidLoad()
resultsManager.detailsDelegate = self
search()
self.setupUI()
loadingIndicator.isAnimating = true
imagesCarouselCollection.delegate = self
imagesCarouselCollection.dataSource = self
imagesCarouselCollection.register(ImageCarouselViewCell.self, forCellWithReuseIdentifier: "ImageCarouselCollectionCell")
imagesCarouselCollection.frame = imagesCarouselCollection.bounds
DispatchQueue.main.asyncAfter(deadline: .now() + 5) {
self.populatePage()
}
}
#IBAction func buyNow(_ sender: Any) {
}
#IBAction func addToCart(_ sender: Any) {
}
func search(){
resultsManager.getDetails(asinForSearch)
}
func createFeaturesLabels(featuresArray: [String]) -> String {
var newFeatureString = ""
for feature in featuresArray {
newFeatureString.append(feature + "\n")
}
return newFeatureString
}
func populatePage(){
if let productResults = self.productDeets {
self.titleLabel.text = productResults.title
self.desc.text = productResults.productDescription
self.imagesArray = productDeets!.images
self.features.text = createFeaturesLabels(featuresArray: productResults.featureBullets)
self.price.text = "$" + String(productResults.price.currentPrice)
self.starsLabel.text = productResults.reviews.rating
self.noOfReviews.text = String(productResults.reviews.totalReviews)
self.loadingIndicator.isAnimating = false
self.stackedView.isHidden = false
}
}
// MARK: - UI Setup for loading icon
private func setupUI() {
if #available(iOS 13.0, *) {
overrideUserInterfaceStyle = .light
}
self.stackedView.isHidden = true
self.detailPageView.backgroundColor = .white
self.detailPageView.addSubview(loadingIndicator)
NSLayoutConstraint.activate([
loadingIndicator.centerXAnchor
.constraint(equalTo: self.view.centerXAnchor),
loadingIndicator.centerYAnchor
.constraint(equalTo: self.view.centerYAnchor),
loadingIndicator.widthAnchor
.constraint(equalToConstant: 50),
loadingIndicator.heightAnchor
.constraint(equalTo: self.loadingIndicator.widthAnchor)
])
}
// MARK: - Properties
let loadingIndicator: ProgressView = {
let progress = ProgressView(colors: [.red, .systemGreen, .systemBlue], lineWidth: 5)
progress.translatesAutoresizingMaskIntoConstraints = false
return progress
}()
}
extension ProductViewController: UICollectionViewDelegateFlowLayout, UICollectionViewDataSource {
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
let width: CGFloat = imagesCarouselCollection.bounds.size.width
let height: CGFloat = imagesCarouselCollection.bounds.size.height
return CGSize(width: width, height: height)
}
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "ImageCarouselCollectionCell", for: indexPath) as! ImageCarouselViewCell
let imageUrl = URL(string: imagesArray[indexPath.item])
cell.imagioView.kf.setImage(with: imageUrl)
return cell
}
func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
print(imagesArray.count)
return imagesArray.count
}
func numberOfSections(in collectionView: UICollectionView) -> Int {
return 1
}
}
extension ProductViewController: ResultsDetailDelegate {
func updateDetails(_ resultsManager: ResultsManager, products: Products) {
self.productDeets = products
}
}
class ImageCarouselViewCell: UICollectionViewCell {
#IBOutlet weak var imagioView: UIImageView!
}

Answer 1

I found the problem - it was with the layout. It was just as I suspected, half code from tutorials that a wasn't deleted. ended up trying to declare the collectionview and its contents in the storyboard and programmatically. it was fixed by following the layout advice in this tutorial https://www.youtube.com/watch?v=eWGu3hcL3ww
and for anyone else facing this problem here's the updated code.
class ProductViewController: UIViewController, UICollectionViewDelegate {
#IBOutlet var stackedView: UIStackView!
#IBOutlet weak var detailedView: UIView!
#IBOutlet var detailPageView: UIScrollView!
#IBOutlet var imagesCarouselCollection: UICollectionView!
#IBOutlet weak var imagesCarouselCollectionHeight: NSLayoutConstraint!
#IBOutlet weak var titleLabel: UILabel!
#IBOutlet weak var desc: UILabel!
#IBOutlet weak var features: UILabel!
#IBOutlet weak var price: UILabel!
#IBOutlet weak var starsLabel: UILabel!
#IBOutlet weak var noOfReviews: UILabel!
#IBOutlet weak var addToCartBtn: UIButton!
#IBOutlet weak var buyNowBtn: UIButton!
var searchedText: String = ""
var asinForSearch: String = ""
var resultsManager = ResultsManager()
var productDeets: Products?
var imagesArray = Array<String>()
override func viewDidLoad() {
super.viewDidLoad()
resultsManager.detailsDelegate = self
search()
self.setupUI()
loadingIndicator.isAnimating = true
let layout = UICollectionViewFlowLayout()
layout.itemSize = CGSize(width: 349, height: 410)
imagesCarouselCollection.collectionViewLayout = layout
layout.scrollDirection = .horizontal
imagesCarouselCollection.register(ImageCollectionViewCell.nib(), forCellWithReuseIdentifier: ImageCollectionViewCell.identifier)
imagesCarouselCollection.frame = imagesCarouselCollection.bounds
DispatchQueue.main.asyncAfter(deadline: .now() + 5) {
self.imagesCarouselCollection.delegate = self
self.imagesCarouselCollection.dataSource = self
self.populatePage()
}
}
#IBAction func buyNow(_ sender: Any) {
}
#IBAction func addToCart(_ sender: Any) {
}
func search(){
resultsManager.getDetails(asinForSearch)
}
func createFeaturesLabels(featuresArray: [String]) -> String {
var newFeatureString = ""
for feature in featuresArray {
newFeatureString.append(feature + "\n")
}
return newFeatureString
}
func populatePage(){
if let productResults = self.productDeets {
self.titleLabel.text = productResults.title
self.desc.text = productResults.productDescription
self.imagesArray = productDeets!.images
self.features.text = createFeaturesLabels(featuresArray: productResults.featureBullets)
self.price.text = "$" + String(productResults.price.currentPrice)
self.starsLabel.text = productResults.reviews.rating + " out of 5 stars"
self.noOfReviews.text = String(productResults.reviews.totalReviews) + " reviews"
self.loadingIndicator.isAnimating = false
self.stackedView.isHidden = false
}
}
// MARK: - UI Setup for loading icon
private func setupUI() {
if #available(iOS 13.0, *) {
overrideUserInterfaceStyle = .light
}
self.stackedView.isHidden = true
self.detailPageView.backgroundColor = .white
self.detailPageView.addSubview(loadingIndicator)
NSLayoutConstraint.activate([
loadingIndicator.centerXAnchor
.constraint(equalTo: self.view.centerXAnchor),
loadingIndicator.centerYAnchor
.constraint(equalTo: self.view.centerYAnchor),
loadingIndicator.widthAnchor
.constraint(equalToConstant: 50),
loadingIndicator.heightAnchor
.constraint(equalTo: self.loadingIndicator.widthAnchor)
])
}
// MARK: - Properties
let loadingIndicator: ProgressView = {
let progress = ProgressView(colors: [.red, .systemGreen, .systemBlue], lineWidth: 5)
progress.translatesAutoresizingMaskIntoConstraints = false
return progress
}()
}
extension ProductViewController: UICollectionViewDelegateFlowLayout, UICollectionViewDataSource {
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: ImageCollectionViewCell.identifier, for: indexPath) as! ImageCollectionViewCell
let imageUrl = URL(string: imagesArray[indexPath.item])
cell.configure(with: imageUrl!)
return cell
}
func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
return imagesArray.count
}
func numberOfSections(in collectionView: UICollectionView) -> Int {
return 1
}
}
extension ProductViewController: ResultsDetailDelegate {
func updateDetails(_ resultsManager: ResultsManager, products: Products) {
self.productDeets = products
}
}
I also moved away from just using a CocoaTouch class and created a new one with a xib/nib
class ImageCollectionViewCell: UICollectionViewCell {
#IBOutlet weak var productImageView: UIImageView!
static let identifier = "ImageCollectionViewCell"
override func awakeFromNib() {
super.awakeFromNib()
// Initialization code
}
public func configure(with imageURL: URL) {
productImageView.kf.setImage(with: imageURL)
}
static func nib() -> UINib {
return UINib(nibName: "ImageCollectionViewCell", bundle: nil)
}
}