Расширяя каждую ячейку collectionView отдельно

Question

У меня есть прототип collectionViewCell, который будет создан 4 раза. Внутри есть кнопка для расширения ячейки (что-то вроде виджета на iOS).

Я добавил замыкание в класс ячейки

var expand : (() -> Void)?
@IBAction func pressExpandeBtn(_ sender: UIButton) {
    expand?()
}

Тогда в UICollectionViewController:

enum Style {
    case collapsed, expanded
}

var style = Style.collapsed {
    didSet {
        collectionView.reloadData()
    }
}


override func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
    if let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "colorCell", for: indexPath) as? ColorViewCell {
        switch indexPath.row {
        case 0:
            cell.expand = { [weak self] in
                switch self!.style {
                case .collapsed:
                    self!.style = .expanded
                case .expanded:
                    self!.style = .collapsed
                }
            }
        case 1:
            cell.expand = { [weak self] in
                switch self!.style {
                case .collapsed:
                    self!.style = .expanded
                case .expanded:
                    self!.style = .collapsed
                }
            }
        case 2:
            cell.expand = { [weak self] in
                switch self!.style {
                case .collapsed:
                    self!.style = .expanded
                case .expanded:
                    self!.style = .collapsed
                }
            }
        case 3:
            cell.expand = { [weak self] in
                switch self!.style {
                case .collapsed:
                    self!.style = .expanded
                case .expanded:
                    self!.style = .collapsed
                }
            }
        default:
            break
        }

        return cell
    }
return UICollectionViewCell()
}



func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
    let width = collectionView.bounds.inset(by: collectionView.layoutMargins).size.width
    if indexPath.row == indexPath.row {
        switch style {
        case .collapsed:
            return CGSize(width: width, height: 150)
        case .expanded:
            return CGSize(width: width, height: 400)
        }
    }
     return CGSize(width: width, height: 150)
}

Теперь, когда я нажимаю кнопку расширения, размер ячейки увеличивается, но проблема в том, что высота всех ячеек будет увеличиваться и уменьшаться после нажатия кнопки, я не знаю, как определить, что ячейка что его кнопка нажата должна быть изменена, не все из них. Может ли кто-нибудь помочь мне в этом?

Большое вам спасибо.

Answer 1

Проблема в том, что вы объявляете 1 переменную для всех ячеек

var style = Style.collapsed {
  didSet {
     collectionView.reloadData()
  }
}

, поэтому все ячейки будут действовать одинаково, но каждая ячейка должна иметь свой собственный статус независимо от того, свернута она или развернута, поэтому объявите массив плюсэта проверка if indexPath.row == indexPath.row { внутри sizeForItemAt будет истинна для всех, так как переменная наверняка равна себе, следовательно, размер стиля применяется одинаково для всех

var arr = [.collapsed,.collapsed,.collapsed,.collapsed]

, затем измените его в соответствии со статусом каждой ячейки с помощью

cell.expand = { [weak self] in   
    guard let strSelf = self else { return }
    strSelf.arr[indexPath.item] = strSelf.arr[indexPath.item] == .collapsed ? .expanded : .collapsed
    strSelf.collectionView.reloadData() 
} 

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
    let width = collectionView.bounds.inset(by: collectionView.layoutMargins).size.width 
    return arr[indexPath.item] == .collapsed ? CGSize(width: width, height: 150) : CGSize(width: width, height: 400) 
}