[iOS] UICollectionView

https://www.youtube.com/watch?v=eWGu3hcL3ww

iOS Academy - Swift for Beginners: Create Collection View in Xcode (iOS - 2021) 영상을 참고하였습니다

 

 

UICollectionView를 만들기 위해 필요한 프로토콜은 3가지가 있습니다.

 

1. UICollectionViewDelegate
2. UICollectionViewDataSource
3. UICollectiionViewDelegateFlowLayout

 

딜리게이트와 데이터 소스는 테이블 뷰와 비슷하고, 플로우 레이아웃은 컬렉션뷰 셀의 모양?을 잡아주는 것입니다.

여기서 사용할 커스텀 셀의 nib 파일의 생성은

https://luen.tistory.com/89?category=917158

 

이 글을 참고하고.. 컬렉션 뷰를 만드는 방법을 또 글로 한번 설명해보겠습니다.

 

프로토콜을 채택할 때, 원래의 뷰컨트롤러를 두고 extension 을 사용하면 깔끔하게 코드를 짤 수 있다는 것을 배웠습니다.

 

UICollectionViewDelegate

extension ViewController: UICollectionViewDelegate {
    // 컬렉션 뷰의 항목을 하나씩 탭 할 때마다 호출됩니다.
    func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {
        // 기존에 선택된 항목의 선택 취소
        collectionView.deselectItem(at: indexPath, animated: true)
        
        print("You tapped me")
    }
}

이런 식으로..  Delegate를 따로 쓸 수 있습니다.

여기서 Delegate함수에는 한번 탭할 때마다 이전에 탭한 항목을 선택 취소하는 기능과, 

탭했다고 프린트 해주는 프린트함수만 간단히 넣어보았습니다.

(extension은 타입에 새로운 기능을 추가할 수는 있지만, 기존에 존재하는 기능을 재정의 할 수는 없다. 복습한번 ㅎㅎ)

 

 

 

UICollectionViewDataSource

DataSource도 살펴봅시다.

extension ViewController: UICollectionViewDataSource {
    
    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return 12
    }
    
    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        
        guard let cell = collectionView.dequeueReusableCell(withReuseIdentifier: MyCollectionViewCell.identifier, for: indexPath) as? MyCollectionViewCell else {
            return UICollectionViewCell()
        }
        
        cell.configure(with: UIImage(named: "image")!)
        
        return cell
    }
    
}

12개의 셀을 나타낸다고 표시하고

어떤 셀을 보여줄지 나타내는 부분입니다.

 

cell 을 정의하고 configure 해주었는데,

잠시 MyCollectionViewCell 닙파일의 코드를 보면

public func configure(with image: UIImage) {
        imageView.image = image
    }

public으로 표시해주고 저희가 만든 이미지 파일을 넣어주었습니다.

(with를 쓴 이유는.. 아마 취향인가 봅니다..)

 

 

 

UICollectionViewDelegateFlowLayout

플로우 레이아웃을 잡아봅시다. (120*120)

extension ViewController: UICollectionViewDelegateFlowLayout {
    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
        return CGSize(width: 120, height: 120)
    }
}

sizeforitem을 써서 하면 편하다는 것,, ㅇㅅㅇ

 

여기서 의문점은 viewDidLoad() 에서도 사이즈를 정해주었는데 차이를 잘 모르겠습니다.

 

 

 

viewDidLoad()

override func viewDidLoad() {
        super.viewDidLoad()
        
        let layout = UICollectionViewFlowLayout()
        layout.itemSize = CGSize(width: 120, height: 120)
        collectionView.collectionViewLayout = layout
        
        collectionView.register(MyCollectionViewCell.nib(), forCellWithReuseIdentifier: MyCollectionViewCell.identifier)
        
        collectionView.delegate = self
        collectionView.dataSource = self
    }

register 부분은 셀을 컬렉션뷰와 연결해주는 부분입니다.

 

 

 

 

 

주저리주저리

extension 의 플로우 레이아웃 부분을 지워도 레이아웃이 지정되는데 viewDidLoad() 부분의 레이아웃을 지우면 지정이 안되더군요.

아직 컬렉션뷰의 레이아웃에 대한 지식이 부족하니 다음번에 해결해 보도록 하겠습니다.