Cells for CollectionView Are Not All Showing

Question

The code below is my test files for my final project that will look like this. As you can see I will be scrolling by rows of one or two.

I have figured out how to get the horizontal scroll to work, however, it only displays two out of the six buttons as shown here in the simulator. As You can tell, it just repeats itself. I am needing the app to show app six buttons respectively.

The code for this:

var multiButton = [String]()

class ViewController: UIViewController, UICollectionViewDelegate, UICollectionViewDataSource {
    var multiButton = ["faceButton", "faceButtonTwo", "faceButtonThree", "faceButtonFour", "faceButtonFive", "faceButtonSix"]
    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return multiButton.count
    }

    
    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        
        let cell=collectionView.dequeueReusableCell(withReuseIdentifier: "cell", for: indexPath) as! MyCollectionViewCell
      //  cell.multiButton.layer.cornerRadius=50.0

        return cell

      //  cell.myWebSeriesImage.image=UIImage(named: webSeriesImages[indexPath.row])
     //   return cell
    }

    
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
    }
}

I have a separate file with all my IBOutlets as shown in this code:

import UIKit

class MyCollectionViewCell: UICollectionViewCell {

//  var multiButton = ["faceButton", "faceButtonTwo", "faceButtonThree", "faceButtonFour", "faceButtonFive", "faceButtonSix"]
@IBOutlet weak var faceButtonFour: UIButton!
@IBOutlet weak var faceButtonFive: UIButton!
@IBOutlet weak var faceButtonThree: UIButton!
@IBOutlet weak var faceButtonTwo: UIButton!
@IBOutlet weak var faceButton: UIButton!
@IBOutlet weak var faceButtonSix: UIButton!

I have double checked the Identifiers, classes (class for cells are set for "myCollectionViewCell", which is the same file all IBOutlets are in), made sure all UIButtons were Installed, and have tried to find any abnormalities in the Attributes and Identity Inspector.

I also would like to address the issue of not being able to scroll horizontal without clicking outside the button.

UPDATE for Post:

This is what we are seeing currently after a previous comment to resize the collectionview. It continues to repeat over and over and I am struggling to find the reasons in my code.

This is a screenshot of main.storyboard.

Answer 1

This is very basic. You need to create something like this: First create a collectionView with required height (50 for example) and add a button inside its cell. Give any width or height to the button (maybe 80 x 30) and add leading, trailing, top and bottom constraints. Make sure to change scroll direction to horizontal as required by you.

After that create a collectionView class and connect your button outlet to it:

import UIKit

class ButtonCollectionViewCell: UICollectionViewCell {
    
    @IBOutlet weak var button: UIButton!
    
    override func awakeFromNib() {
        super.awakeFromNib()
    }
    
}

In your main ViewController, connect collectionView and add delegate & datasource function:

import UIKit

class ViewController: UIViewController, UICollectionViewDelegate, UICollectionViewDataSource {
   
    @IBOutlet weak var collectionViewButtons: UICollectionView!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
        
        collectionViewButtons.delegate = self
        collectionViewButtons.dataSource = self
    }

    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return 6 //number of buttons
    }
    
    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "cell", for: indexPath) as! ButtonCollectionViewCell
        
        cell.button.setTitle("Button\(indexPath.item)", for: .normal) //set button title
        
        if indexPath.item == 0 { //first button
            cell.button.backgroundColor = UIColor.purple //set button background
        }
        else if indexPath.item == 1 { //second button
            cell.button.backgroundColor = UIColor.red
        }
        else if indexPath.item == 2 { //3rd button
            cell.button.backgroundColor = UIColor.systemGreen
        }
        else { // for remaining buttons
            cell.button.backgroundColor = UIColor.darkGray
        }
        
        return cell
    }

       func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {
        if indexPath.item == 0 { // opens any page by clicking button 1
            let vc = storyboard?.instantiateViewController(withIdentifier: "anyVC1") as! ViewController1
            navigationController?.pushViewController(vc, animated: true)
        }
        else if indexPath.item == 1 {
            let vc = storyboard?.instantiateViewController(withIdentifier: "anyVC2") as! ViewController2
            navigationController?.pushViewController(vc, animated: true)
        }
        else if indexPath.item == 2 {
            let vc = storyboard?.instantiateViewController(withIdentifier: "anyVC3") as! ViewController3
            navigationController?.pushViewController(vc, animated: true)
        }
        else {
            let vc = storyboard?.instantiateViewController(withIdentifier: "anyVC4") as! ViewController4
            navigationController?.pushViewController(vc, animated: true)
        }
    }
    
}

You can return any number of buttons by changing return 6 to any required number or use any array which can further be used to set properties of buttons created.

The didSelectAnItem can be used to add functionality when a cell is tapped.

In the end you should get output like this where you can scroll horizontally to see remaining buttons: