CollectionView MultipleSelection

영상처럼 cell을 여러개 선택할 수 있도록 구현하고 우측 상단에 선택된 총 cell의 개수를 UI로 보여주기를 원한다.

시도 방법

func collectionView(_ collectionView: UICollectionView, shouldSelectItemAt indexPath: IndexPath) -> Bool {
    guard let cell = collectionView.cellForItem(at: indexPath) as? ImageListCollectionViewCell else { return false }
    print(cell.isSelected)
    if cell.isSelected {
        self.total -= 1
    } else {
        self.total += 1
    }
    return true
}

• shouldSelectItemAt을 이용하여 cell.isSelected의 Bool 값에 따라 total(Int)를 조절하도록 했지만 제대로 동작하지 않았다.

원인

• collectionView의 shouldSelectItemAt 함수는 cell을 클릭할 때마다 실행되는 것이 아니라 cell을 비선택 상태에서 선택 상태로 바꿀 때만 실행된다. ⇒ 선택된 상태에서 해당 cell을 클릭한다고 해서 실행되는 것이 아니다. 즉, shouldSelectItemAt에서 Select의 의미는 선택X인 상태의 cell을 Select(클릭) 할 때라는 의미이다.

해결 방법

• collectionView의 shouldDeselectItemAt 를 추가로 사용한다.
  • 기존의 shouldSelectItemAt 에서 선택, 선택 취소 로직을 전부 처리하고자 했던 것을 선택 취소 작업은 shouldDeselectItemAt 에서 처리한다. (shouldDeselectItemAt 는 우리가 원했던 선택 취소가 발생할 때 실행된다.)

1. collectionView.allowsMultipleSelection = true로 설정
2. shouldSelectItemAt, shouldDeselectItemAt 추가

func collectionView(_ collectionView: UICollectionView, shouldSelectItemAt indexPath: IndexPath) -> Bool {
    guard let cell = collectionView.cellForItem(at: indexPath) as? ImageListCollectionViewCell else { return false }
    
    self.total += 1
    return true
}
  
func collectionView(_ collectionView: UICollectionView, shouldDeselectItemAt indexPath: IndexPath) -> Bool {
    guard let cell = collectionView.cellForItem(at: indexPath) as? ImageListCollectionViewCell else { return false }
    
    self.total -= 1
    return true
}

Uploaded by

N2T