[회고] UICollectionView를 사용하면서 겪었던 실수

으아아

Tag 형태의 Bar를 다 만들고 나서 실수인걸 알아차렸다... 🥲

여기서 상단의 Tag 형태의 느낌으로 카테고리를 선택할 수 있는 메뉴바를 개발하려 했었다.

생각은 되게 단순하게 접근했다.

 

->  상단에 여러개의 버튼이 가로로 스크롤 되면 좋겠다! 

->  Scroll or Collection view를 써야겠다! 

->  버튼의 크기를 자유롭게 조절하려면 Collection view가 좋겠징? 

->  Collection View의 각 Cell을 Button으로 감싸야겠다.

 

그렇게 버튼으로 된 Cell을 만들어서 구현했다..

뭔가 되게 삐걱거리는 버튼이고, UI 변경이나 스크롤이 이상하게도 잘 안되다보니 하드 코딩을 통해 강제로 되게 만들었다.

 

그러다 우연히 CollectionView에 대해 작성된 다른 사람의 블로그를 발견하게 되었다.

https://borabong.tistory.com/31

비슷한 기능이라 슥 읽어보는데 무언가 잘못되었다는 것을 느꼈다.

 

    > 분명 여러개의 Cell을 선택하는 것 같은데 Button을 사용하지 않았네?

 

 

알고보니 버튼을 만들 필요도 없었으며, Delegate를 직접 구현할 필요도 없었다.

그저 UICollectionView에서 지원하는 didSelectItemAt와 didDeselectItemAt을 이용해 관리할 수 있었던 것이다...

(개발자 분들이 다들 공식문서를 읽으라는 얘기가 빈말이 아니었음을 알게된 순간 😂)

 

이제야 해결된 의문점

내가 작성했던 코드에선 굉장히 의아한 부분이 존재했다.

다름아닌 didSelectItemAt가 작동하지 않았던 것!

    func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {
        print("click index=\(indexPath.row)")
        let cell = collectionView.cellForItem(at: indexPath) as! CategoryCell

        cell.updateButtonAppearance()
        
        currentButtonTag = indexPath.row
    }

 

분명 collection view의 대리자도 잘 설정했는데도 동작하지 않았던 이유가 가장 궁금했다.

그러다 didSelectItemAt의 공식문서에 이런 내용이 적힌것을 보게되었다.

https://developer.apple.com/documentation/uikit/uicollectionviewdelegate/1618032-collectionview

 

 

설마 직접 구현했던 Delegate 때문에 안되는건가..? 🧐

protocol CategoryCellDelegate: AnyObject {
    func didSelectCategory(at index: Int)
}

// CategoryCell
@objc func buttonTapped() {
    delegate?.didSelectCategory(at: button.tag)
}

사실 이 Delegate도 제대로 동작한건 아니었다.

버튼 자체는 잘 동작하지만 문제는 UI 변경에 오류가 있어 위임받은 View controller에서 UI를 직접 바꿔주는 것 밖에 안되었기 때문이다.

하드코딩을 통해 해결했지만 의문이 생겨 구글링하다보니 삽질을 하고 있었던 것이다...

아마 추측하기론 버튼에서 터치 Effect를 가로채다보니 선택 자체가 안되어서 didSelectItemAt이 동작하지 않았던 것 같다.

 

결과

결국 버튼을 Label로 바꾸고 다시 시도해보았다...

또한, UICollectionViewDelegate, UICollectionViewDataSource, UICollectionViewDelegateFlowLayout를 최대한 활용해서 해보았다.

didSelectItemAt를 활용해 선택된 라벨의 색상을 파랗게 만들고, 선택되지 않은 라벨의 색을 흰색으로 만들었으며,

scrollToItem를 활용해 선택한 Cell의 IndexPath에 맞게 스크롤하도록 만들었다.

 

원했던 기능이 정상적으로 작동한다...

맨땅에 해딩하면서 개발하기 힘드넹 🤣