Notice
Recent Posts
Recent Comments
Link
«   2025/01   »
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31
Tags
more
Archives
Today
Total
관리 메뉴

iOS 개발일지

Cell이 선택되었을 때 UI 변경, didSeletAt 말고 딴거 써보자! (+Cell의 zPosition 변경) 본문

iOS

Cell이 선택되었을 때 UI 변경, didSeletAt 말고 딴거 써보자! (+Cell의 zPosition 변경)

Lia's iOS 2024. 2. 2. 14:48

 

여러분! 셀 선택 시 UI 변경을 ViewController에서 하고 있지는 않았나요?

저는 그동안 TableView나 CollectionView가 선택되었을 때, 항상 didSelectRowAt과 didSelectItemAt만 사용했었거든요.

 

그러다... 가벼운 UI만 수정하면 되는 쉬운 작업인데, 굳이 ViewController가 알아야 할까? 라는 생각이 든 거죠.

가능하다면 Cell 내에서 변경시키면 좋겠다고 생각해서 알아보니 가능하더라구요...?!

정말 별거 아니지만 코드를 조금이라도 덜 쓰고, 조금이라도 직관적으로 쓰고 싶은게 개발자 마음이잖아요~

 

UITableView에서는 setSelected 메서드를, UICollectionView에서는 isSelected 프로퍼티를 override 해 사용할 수 있답니다.

 

 

- UITableView

    override func setSelected(_ selected: Bool, animated: Bool) {
        super.setSelected(selected, animated: animated)
        
        contentView.layer.borderWidth = selected ? 1.4 : 1
        contentView.layer.borderColor = selected ? UIColor.red.cgColor : UIColor.blue.cgColor
        label.isHidden = !selected
    }

 

 

 

- UICollectionView

    override var isSelected: Bool {
        didSet{
            tempLabel.isHidden = !isSelected
        }
    }

 

 

아주아주 간단하고 직관적이죠? 이게 끝이에요!!

 


 

+ Cell의 zPosition 변경

    func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {
        // 모든 셀을 순회하며 선택한 셀은 zPosition을 1로, 나머지는 0으로 변경
        for row in myList.count - 1 {
            guard let cell = collectionView.cellForItem(at: IndexPath(row: row, section: 0)) as? MyCell else { return }
            guard row != indexPath.row else {
                cell.layer.zPosition = 1
                continue
            }
            
            cell.layer.zPosition = 0
        }
    }

 

추가로, 특정 셀이 가장 상위에 보이게끔 하고싶을 때 사용할 수 있는 코드도 가져왔어요.

셀의 서브뷰가 셀의 크기보다 커서 다른 셀에 가려질 때, 선택한 셀이 가장 상위에 보여질 수 있게 조정하는거죠.

이런 형태의 UI를 사용하지 않는 것이 가장 바람직하다고 생각하지만, 필요할 때가 있으니까요!