1

I have been trying to collapse and expand the cells in collectionView when the section header is clicked but all the headers were expanding rather then the selected header. This is my code

class ExampleHomeController: UICollectionViewController, UICollectionViewDelegateFlowLayout {

var expandedRow: Bool = false
var section: Int!

let postCellId = "postCellId"
let headerCellId = "headerCellId"

override func viewDidLoad() {
    super.viewDidLoad()

    collectionView.delegate = self
    collectionView.dataSource = self

    collectionView.backgroundColor = UIColor.init(r: 220, g: 214, b: 214)

    collectionView.register(PostCell.self, forCellWithReuseIdentifier: postCellId)
    collectionView.register(HeaderCell.self, forSupplementaryViewOfKind: UICollectionView.elementKindSectionHeader, withReuseIdentifier: headerCellId)

}

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


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

override func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
    let cell = collectionView.dequeueReusableCell(withReuseIdentifier: postCellId, for: indexPath)
    return cell
}

override func collectionView(_ collectionView: UICollectionView, viewForSupplementaryElementOfKind kind: String, at indexPath: IndexPath) -> UICollectionReusableView {
    let header = collectionView.dequeueReusableSupplementaryView(ofKind: kind, withReuseIdentifier: headerCellId, for: indexPath) as! HeaderCell
    header.downArrowBtn.addTarget(self, action: #selector(showCells), for: .touchUpInside)
    return header

}

@objc func showCells() {
    if expandedRow == false {
        expandedRow = true
    }else {
        expandedRow = false
    }
    collectionView.reloadData()
}


func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
    if expandedRow == true {
        return CGSize(width: view.frame.width - 24, height: 280)
    } else {
        return CGSize(width: view.frame.width - 24, height: 0)
    }
}

}

And this is my Post Cell

class PostCell: UICollectionViewCell {
override init(frame: CGRect) {
    super.init(frame: frame)

    setupViews()
}

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

let postImage: UIImageView = {
    let view = UIImageView()
    view.image = #imageLiteral(resourceName: "one")
    return view
}()


func setupViews() {

    backgroundColor = .white

    addSubview(postImage)

    postImage.anchor(top: contentView.topAnchor, leading: nil, bottom: contentView.bottomAnchor, trailing: nil, padding: .init(top: 20, left: 0, bottom: 0, right: 0), size: .init(width: 70, height: 0))
    postImage.centerXAnchor.constraint(equalTo: contentView.centerXAnchor).isActive = true
}

}

And this is my HeaderCell

class HeaderCell: UICollectionViewCell  {

var expandedRow: Bool!

override init(frame: CGRect) {
    super.init(frame: frame)
    backgroundColor = UIColor.init(r: 220, g: 214, b: 214)
    setupViews()
}

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

let headerImage: UIImageView = {
    let view = UIImageView()
    view.image = #imageLiteral(resourceName: "facebook")
    return view
}()

let headerLabel: UILabel = {
    let label = UILabel()
    label.text = "Posts By Network"
    return label
}()

let downArrowBtn: UIButton = {
    let button = UIButton()
    button.setImage(#imageLiteral(resourceName: "downarrow"), for: .normal)
    button.imageView?.contentMode = .scaleAspectFit
    return button
}()

func setupViews() { 
    addSubview(headerImage)
    addSubview(headerLabel)
    addSubview(downArrowBtn)

    headerImage.anchor(top: contentView.topAnchor, leading: contentView.leadingAnchor, bottom: nil, trailing: nil, padding: .init(top: 8, left: 12, bottom: 0, right: 0), size: .init(width: 30, height: 30))
    headerLabel.anchor(top: headerImage.topAnchor, leading: headerImage.trailingAnchor, bottom: nil, trailing: nil, padding: .init(top: 2, left: 20, bottom: 0, right: 0))
    headerLabel.centerYAnchor.constraint(equalTo: headerImage.centerYAnchor).isActive = true
    downArrowBtn.anchor(top: headerLabel.topAnchor, leading: headerLabel.trailingAnchor, bottom: nil, trailing: contentView.trailingAnchor, padding: .init(top: 0, left: 0, bottom: 0, right: 12), size: .init(width: 20, height: 20))

}

}

All the cells were expanding when header is clicked, but I want to expand and collapse only the selected section, How can I do this. I am new to swift and have been trying this for past few weeks. Thank you

user 10424120
  • 53
  • 1
  • 4

0 Answers0