Rectangle 27 0

ios How to expand multiple UICollectionViewCells on tap?


import UIKit

class ViewController: UIViewController {


    // MARK: - Properties
    fileprivate var collectionView: UICollectionView!
    var expandSection = [Bool]()
    var items = [String]()

    override func viewDidLoad() {
        super.viewDidLoad()

        self.items = ["A","B","C","D","E","F","G","H","J","K"]
        let layout: UICollectionViewFlowLayout = UICollectionViewFlowLayout()
        layout.sectionInset = UIEdgeInsets(top: 20, left: 10, bottom: 10, right: 10)

        collectionView = UICollectionView(frame: self.view.frame, collectionViewLayout: layout)
        collectionView.dataSource = self
        collectionView.delegate = self
        collectionView.register(CustomCell.self, forCellWithReuseIdentifier: "Cell")
        collectionView.backgroundColor = UIColor.white
        self.expandSection = [Bool](repeating: false, count: self.items.count)

        self.view.addSubview(collectionView)
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }
}

extension ViewController: UICollectionViewDataSource {

    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return self.items.count
    }

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

        cell.textLabel.text = self.items[indexPath.row]
        cell.backgroundColor = UIColor.orange

        return cell
    }
    func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {

        self.expandSection[indexPath.row] = !self.expandSection[indexPath.row]
        self.collectionView.reloadItems(at: collectionView.indexPathsForSelectedItems!)
    }

}


// MARK: - UICollectionViewDelegateFlowLayout
extension ViewController: UICollectionViewDelegateFlowLayout {

    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {

        if self.expandSection[indexPath.row] {
            return CGSize(width: self.view.bounds.width - 20, height: 300)
        }else{
            return CGSize(width: self.view.bounds.width - 20, height: 120.0)
        }
    }
}
var section:Int?
var preSection:Int?
var expand:Bool = false


extension ViewController: UICollectionViewDataSource {

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

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

        cell.textLabel.text = "\(indexPath.item)"
        cell.backgroundColor = UIColor.orange

        return cell
    }
    func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {

        if (self.section != nil) {
            self.preSection = self.section
        }

        self.section = indexPath.row

        if self.preSection == self.section {
            self.preSection = nil
            self.section = nil
        }else if (self.preSection != nil) {
            self.expand = false
        }
        self.expand = !self.expand
        self.collectionView.reloadItems(at: collectionView.indexPathsForSelectedItems!)

    }

}


// MARK: - UICollectionViewDelegateFlowLayout
extension ViewController: UICollectionViewDelegateFlowLayout {

    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {

        if self.expand, let row = self.section, row == indexPath.row {
            return CGSize(width: self.view.bounds.width - 20, height: 300)
        }else{
            return CGSize(width: self.view.bounds.width - 20, height: 120.0)
        }

    }
}

Example 1: Expand only one cell at a time

Note