如何根据用户选择在CollectionView标题下显示不同的单元格？

Question

EDIT: I am trying to re-create the instagram/twitter profile page. So if the current way I am trying to do it won't work, feel free to tell me how to recreate these profile pages in a totally different way.

I have set up a UICollectionView with a header. Inside this header, there is a menuBar that has two different selection options. If the user selects the first index, the menuBar returns 0. If the user selects the second index, the menuBar returns 1.

        func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
            let cell = collectionView.dequeueReusableCell(withReuseIdentifier: cellId, for: indexPath) as! CoverCell

            return cell
        }

Here is a picture of the menu bar and the collectionview cells below it:

I also have this code to set up the cells:

        func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
            let menuBarIndex = profileMenuBarSelectionIndex.menuBarIndexSelection
            var cell: UICollectionViewCell
            switch menuBarIndex {
            case 0:
               cell = collectionView.dequeueReusableCell(withReuseIdentifier: test1CellId, for: indexPath) as! test1Cell
            case 1:
               cell = collectionView.dequeueReusableCell(withReuseIdentifier: test2CellId, for: indexPath) as! test2Cell
            default:
               cell = collectionView.dequeueReusableCell(withReuseIdentifier: test3CellId, for: indexPath) as! test3Cell
            }
            return cell
        }

EDIT 2: I have now added this code, where myTestAction is the delegate function of testAction in a different file.

var index: Int = 0
func testAction() {
    index = index == 1 ? 0 : 1
    collectionView.reloadData()
}

func myTestAction() {
    delegate?.testAction()
}

func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {
    switch indexPath.row{
    case 0:
        menuBarIndexSelection = 0
        menuBarIndexChangeFlag = 1
    case 1:
        menuBarIndexSelection = 1
        menuBarIndexChangeFlag = 2
    case 2:
        menuBarIndexSelection = 2
        menuBarIndexChangeFlag = 3
    default:
        menuBarIndexSelection = 0
    }
    myTestAction()
}

I want to be able to display different cells below the header depending on which value menuBar returns. How would I do this? OR How can I recreate the Instagram profile page?

Answer 1

Put a check on cellForRow and supplimentaryViewsForHeader for menuBar value. And when the value of menuBar changes just reload the table. At the time of reloading the data will be shown according to your check present in dataSources.

// MENU BAR BUTTON CLICK

self.collectionView.reloadData()

 func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
     let cell = collectionView.dequeueReusableCell(withReuseIdentifier: cellId, for: indexPath)
     if menuBar == 0 {
     // show this image
     }else{
     //show that image
     }
        return cell
    }

Answer 2

Try this,

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

//Take a variable menuBar. when the user tap change it's value to 0 or 1  and reload collection view when user tap on menu button.

    if menuBar == 0 {
      return 0
    }else{
      return 1
    }

Answer 3

The reason for getting the compiler error you describe is that you create 4 different variables called "cell":

var cell: UICollectionViewCell
switch menuBarIndex {
case 0:
    var cell = ...
case 1:
    var cell = ...
default:
    var cell = ...
}
return cell

The cell instance you return at the end of the function was never assigned a value. Assigning the first cell variable instead of creating new ones in each case should fix the compiler error:

var cell: UICollectionViewCell
switch menuBarIndex {
case 0:
    cell = collectionView.dequeueReusableCell(withReuseIdentifier: test1CellId, for: indexPath) as! test1Cell
case 1:
    cell = collectionView.dequeueReusableCell(withReuseIdentifier: test2CellId, for: indexPath) as! test2Cell
default:
    cell = collectionView.dequeueReusableCell(withReuseIdentifier: test3CellId, for: indexPath) as! test3Cell
}
return cell

------------------------- EDIT ---------------------

The answer above fixed the compiler error but not the actual question. I created a small sample project that does what is needed and works fine. Maybe that helps with figuring out the problem. I just created a single view application in Xcode, this is the code for the one view controller in the project and the cells:

class ViewController: UIViewController, UICollectionViewDataSource {

    var index: Int = 0
    var collectionView: UICollectionView?

    override func viewDidLoad() {
        super.viewDidLoad()

        let btn = UIButton(frame: CGRect(x: 10, y: 10, width: 200, height: 50))
        btn.backgroundColor = .green
        btn.setTitle("Change cell color", for: .normal)
        btn.setTitleColor(.black, for: .normal)
        btn.addTarget(self, action: #selector(testAction), for: .touchUpInside)
        view.addSubview(btn)

        let layout = UICollectionViewFlowLayout()
        layout.minimumInteritemSpacing = 10
        layout.minimumLineSpacing = 10
        layout.scrollDirection = .vertical
        collectionView = UICollectionView(frame: CGRect(x: 0, y: 60, width: view.frame.width, height: view.frame.height - 60), collectionViewLayout: layout)
        collectionView?.backgroundColor = .white
        collectionView?.dataSource = self
        collectionView?.register(RedCell.self, forCellWithReuseIdentifier: "red")
        collectionView?.register(BlueCell.self, forCellWithReuseIdentifier: "blue")
        view.addSubview(collectionView!)
    }

    func testAction() {
        index = index == 1 ? 0 : 1
        collectionView?.reloadData()
    }

    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        var cell: UICollectionViewCell
        switch index {
        case 0:
            cell = collectionView.dequeueReusableCell(withReuseIdentifier: "red", for: indexPath)
        case 1:
            cell = collectionView.dequeueReusableCell(withReuseIdentifier: "blue", for: indexPath)
        default:
            cell = UICollectionViewCell()
        }
        return cell
    }

    func numberOfSections(in collectionView: UICollectionView) -> Int {
        return 1
    }

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

    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAtIndexPath indexPath: IndexPath) -> CGSize {
        return CGSize(width: 50, height: 50)
    }
}

class RedCell: UICollectionViewCell {

    override init(frame: CGRect) {
        super.init(frame: frame)

        backgroundColor = .red
    }

    required init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
}

class BlueCell: UICollectionViewCell {

    override init(frame: CGRect) {
        super.init(frame: frame)

        backgroundColor = .blue
    }

    required init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
}