swift - 컬렉션뷰 버튼 토글하기!

망딕이 구현해야 할 것은 다음과 같다

• 지역 버튼은 최대 1개까지 선택이 가능하다
• 클릭된 버튼 : 빨간색, 클릭되지 않은 버튼 : 회색
• 회색 버튼을 클릭 - 다른 빨간색 버튼이 있다면 회색으로 바꾸고, 클릭된 버튼을 빨간색으로 변경!
• 빨간 버튼을 클릭 - 클릭된 버튼을 회색으로 변경!

 

목표!

 

 

그런데 저는 컬렉션뷰 셀에 버튼을 넣지 않고 버튼 같은(?) 것을 넣었습니다.

UIView 안에 Label을 넣은... ㅋㅋ;

 

우선 RegionCell에서 두 가지를 체크할 겁니다!

첫 번째 : isSelected ("지역 버튼은 최대 1개까지 선택이 가능하다"를 해결)

두 번째 : clickCount ("빨간 버튼을 클릭 - 클릭된 버튼을 회색으로 변경!"을 해결)

 

저는 프로퍼티 옵저버를 사용할 겁니다!

 

먼저 RegionCell 입니다

// RegionCell.swift

class RegionCell: UICollectionViewCell {
    
    @IBOutlet weak var regionContentView: UIView!
    @IBOutlet weak var regionLabel: UILabel!
    
    // 초기 clickCount는 0이고! 셀이 클릭될 때마다 clickCount를 증가시켜줄 겁니다 (컬렉션뷰 메소드에서)
    // 0이면 회색, 1이면 빨강
    var clickCount: Int = 0 {
        didSet {
            if clickCount == 0 {
                regionContentView.backgroundColor = UIColor.lightGray
            }
            else {
                regionContentView.backgroundColor = UIColor.Red
            }
        }
    }
    
    // 중복 클릭을 허용하지 않기 때문에 isSelected를 체크해서 최근에 클릭된 버튼만 빨간색으로 변경
    override var isSelected: Bool {
        didSet {
            if !isSelected {
                regionContentView.backgroundColor = UIColor.lightGray
                clickCount = 0
            }
        }
    }
}

 

이제 셀이 클릭될 때 이벤트 처리를 해주면 끝입니다!

func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {
    
    // 클릭된 셀을 가져옴
    let cell = collectionView.cellForItem(at: indexPath) as! RegionCell
    
    // 가져온 셀의 clickCount를 판단
    if cell.clickCount == 1 {
    	// clickCount가 1이면 이미 선택되어 있는 셀이므로 다시 회색으로 바꿔줘야 함 -> 값을 0으로 변경
        cell.clickCount = 0
    }
    else {
        cell.clickCount += 1
    }
}