UICollectionView 컬렉션 뷰

안녕하세요 :)

iOS 개발자 리치(rich_iosdev)입니다.

공유해드릴 내용은 UICollectionView 입니다.

 

컬렉션 뷰 (CollectionView)는 아래 이미지와 같이 유저에게 여러개의 데이터 (이미지, 텍스트 등)를 보여주는 역할을 합니다. 다양한 앱에서 가장 많이 활용되는 뷰이기도 합니다. 개인적으로 지난번에 구현해본 테이블 뷰 보다 훨씬 더 유용하게 사용될 수 있는 것 같습니다.

애플 공식 문서 참고 이미지

 

UICollectionViewController 로 UICollectionView를 구현해봤습니다 아래는 샘플코드입니다.

import UIKit

class ViewController: UICollectionViewController {

    let cellId = "cellId"
    
    override func viewDidLoad() {
        super.viewDidLoad()
    
        collectionView.register(UICollectionViewCell.self, forCellWithReuseIdentifier: cellId)
        collectionView.backgroundColor = .white
        view.addSubview(collectionView)
        
        collectionView.translatesAutoresizingMaskIntoConstraints = false
        collectionView.topAnchor.constraint(equalTo: view.topAnchor).isActive = true
        collectionView.bottomAnchor.constraint(equalTo: view.bottomAnchor).isActive = true
        collectionView.leadingAnchor.constraint(equalTo: view.leadingAnchor).isActive = true
        collectionView.trailingAnchor.constraint(equalTo: view.trailingAnchor).isActive = true
        
    }
}

extension ViewController {
    
    override func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return 10
    }
    
    override func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: cellId, for: indexPath)
        cell.backgroundColor = .blue
        return cell
    }
}

extension ViewController {

    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
        return .init(width: 70, height: 70)
    }

}

1. 먼저 재사용될 UICollectionViewCell을 반드시 CollectionView에 등록해줘야합니다. 재사용될 Cell ID도 꼭 입력해줍니다.

2. 그리고 셀의 갯수와 각 셀에 그려질 데이터를 넘겨주는 DataSource를 구현해줍니다. (테이블 뷰와 거의 동일한 방법입니다)

 

오토레이아웃에 대한 설명은 생략하도록 하겠습니다

 

위와 같이 구현해주면 아래 이미지와 같이 10개의 파란색 셀이 화면에 보일 것입니다.

 

정말 간단하게 구현한 UICollectionView 입니다.

 

실제로 프로젝트를 진행해보면 CollectionView를 그려놓고 셀들에 서버에서 받아온 데이터를 넣어주는 작업을 하게됩니다. 가장 많이 사용되는 뷰이면서도 원리를 잘 이해해두면 활용도를 높일 수 있을 듯 합니다.

 

잘못된 부분이 있다면 꼭 댓글 부탁드립니다!

확인해서 수정하도록 할게요!!

 

끝까지 읽어주셔서 정말 감사합니다 :)

 

부스트코스 iOS 프로그래밍

컬렉션뷰란?

https://www.edwith.org/boostcourse-ios/lecture/16906/

[LECTURE] 1) 컬렉션뷰란? : edwith

애플 공식 문서

https://developer.apple.com/documentation/uikit/uicollectionview

UICollectionView - UIKit | Apple Developer Documentation