Failing to load all items of an [UIButton] array for Pinterest-like iOS App

Question

My objective is to create a Pinterest-like iOS app. I use a collection view and then, programatically I add a stack view. I create the buttons and it's respective images within a function and then I return all the UIButtons in an array of [UIButtons]. I store the value of that function in a variable called buttonsArray, and then I use it in the respective Collection View data source and delegate methods. I also use PinterestLayout created by RayWenderlich. Everything works as expected except for the fact that instead of loading all buttons, it only loads the first two. The function where I add the items goes as follows:

func createArrayButtons() -> [UIButton]{

    var items:[UIButton] = []

    let item1 = UIButton(frame: CGRect(x:0, y:0, width:346,height:275))
    item1.setImage(UIImage(named: "1"), for: .normal)
    item1.addTarget(self, action: #selector(editButtonTapped), for: UIControlEvents.touchUpInside)
    item1.tag = 1
    items.append(item1)

    let item2 = UIButton(frame: CGRect(x:0, y:0, width:346,height:275))
    item2.setImage(UIImage(named: "2"), for: .normal)
    item2.addTarget(self, action: #selector(editButtonTapped), for: UIControlEvents.touchUpInside)
    item2.tag = 2
    items.append(item2)

    let item3 = UIButton(frame: CGRect(x:0, y:0, width:346,height:275))
    item3.setImage(UIImage(named: "3"), for: .normal)
    item3.addTarget(self, action: #selector(editButtonTapped), for: UIControlEvents.touchUpInside)
    item3.tag = 3
    items.append(item3)

    let item4 = UIButton(frame: CGRect(x:0, y:0, width:346,height:275))
    item4.setImage(UIImage(named: "4"), for: .normal)
    item4.addTarget(self, action: #selector(editButtonTapped), for: UIControlEvents.touchUpInside)
    item4.tag = 4
    items.append(item4)

    let item5 = UIButton(frame: CGRect(x:0, y:0, width:346,height:275))
    item5.setImage(UIImage(named: "5"), for: .normal)
    item5.addTarget(self, action: #selector(editButtonTapped), for: UIControlEvents.touchUpInside)
    item5.tag = 5
    items.append(item5)

    let item6 = UIButton(frame: CGRect(x:0, y:0, width:346,height:275))
    item6.setImage(UIImage(named: "6"), for: .normal)
    item6.addTarget(self, action: #selector(editButtonTapped), for: UIControlEvents.touchUpInside)
    item6.tag = 6
    items.append(item6)

    let item7 = UIButton(frame: CGRect(x:0, y:0, width:346,height:275))
    item7.setImage(UIImage(named: "7"), for: .normal)
    item7.addTarget(self, action: #selector(editButtonTapped), for: UIControlEvents.touchUpInside)
    item7.tag = 7
    items.append(item7)

    return items

}

I give each one a respective tag and a respective image from the assets folder, then return it as an array.

I calculate the collectionViewDataSource as follows

    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {

    let buttonsArray = createArrayButtons()
    return buttonsArray.count
}

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

    let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "cell", for: indexPath)

    let buttonsArray = createArrayButtons()

    let stackView = UIStackView(arrangedSubviews: buttonsArray)
    stackView.axis = .vertical
    stackView.distribution = .equalSpacing
    stackView.alignment = .fill
    stackView.spacing = 5
    stackView.translatesAutoresizingMaskIntoConstraints = false

    cell.addSubview(stackView)





    return cell
}

And I calculate the height of each item as follows:

extension ViewController: PinterestLayoutDelegate {
func collectionView(_ collectionView: UICollectionView, heightForPhotoAtIndexPath indexPath: IndexPath) -> CGFloat {
    let buttonArray = createArrayButtons()

    let button = buttonArray[indexPath.item]

    let height = button.imageView?.image?.size.height

    return height!
}

}

As you can see, the app only shows the first two images of the createButtonsArray() variable stored in each dataSource Method

Every image that i store as the returning value of createArrayButtons is different, however it only loads up two. How could I solve this?

If it's of any help, my project can be found in the following link:

https://github.com/francisc112/PinterestTutorial

Answer 1

Update code at cellForItemAt indexPath as you are loading the whole button array for each cell.

    let stackView = UIStackView(arrangedSubviews: [buttonsArray[indexPath.row]])