[iOS] UICollectionView

UICollectionView란?

iOS에서 리스트 및 그리드뷰를 구현할 수 있는 뷰에는 UITableView와 UICollectionView가 있습니다.

 

UITableView

• 데이터를 싱글 칼럼으로 나열해 주는 뷰

UICollectionView

• 데이터를 여러 칼럼 또는 레이아웃을 커스텀해서 표현해주는 뷰(그리드 뷰)

그럼 무엇을 사용해야 할까요?

 

UICollectionView가 자유도가 높음

UITableView로 구현할 수 있는 부분을 UICollectionView가 커버할 수 있음

두개의 구현 난이도 차이가 크지 않음

따라서 간단한 데이터를 리스트로 보여줘야 할 경우가 아니라면 UICollectionView를 사용하는게 나은 것 같습니다.

 

UICollectionView 구성요소

• UICollectionView: 데이터 항목을 표시하기 위한 뷰.
• UICollectionViewCell: UICollectionView에 표시되는 각 개별 데이터 항목을 나타냅니다.
• UICollectionViewDataSource: UICollectionView에 표시할 데이터와 셀을 제공하는 프로토콜로 필수 메서드들이 있습니다.
  • collectionView(_:numberOfItemsInSection:): 섹션의 항목 수를 반환합니다.
  • collectionView(_:cellForItemAt:): 각 인덱스 경로에 대한 셀을 반환합니다.
• UICollectionViewDelegate: 사용자와 상호 작용을 처리하는 프로토콜입니다.
• UICollectionViewLayout: UICollectionView의 레이아웃을 정의합니다. 가장 일반적인 레이아웃은
  UICollectionViewFlowLayout으로 셀의 배치를 사용자가 커스텀한대로 만들수 있습니다.

 

예제 코드

extension FrameworkListViewController: UICollectionViewDataSource {
    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return list.count
    }
    
    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        guard let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "FrameworkCollectionViewCell", for: indexPath) as? FrameworkCollectionViewCell else {
            return UICollectionViewCell()
        }
        
        let framework = list[indexPath.item]
        cell.configure(framework)
        return cell
    }
}

class FrameworkCollectionViewCell: UICollectionViewCell {
    
    @IBOutlet weak var thumbnailImageView: UIImageView!
    @IBOutlet weak var nameLabel: UILabel!
    
    override func awakeFromNib() {
        super.awakeFromNib()
        nameLabel.numberOfLines = 1
        nameLabel.adjustsFontSizeToFitWidth = true
    }
    
    func configure(_ framework: AppleFramework) {
        thumbnailImageView.image = UIImage(named: framework.imageName)
        nameLabel.text = framework.name
    }
}

dataSource와 UICollectionViewCell 클래스를 구현한 코드입니다. 

numberOfItemsInSection으로 리스트의 갯수 만큼 반환하여 섹션의 항목수를 나타냅니다.

 

dequeueReusableCell 메서드를 사용하여 재사용 가능한 셀을 큐에서 꺼내고, guard let을 통해 안전하게

FrameworkCollectionViewCell로 캐스팅합니다. 만약 캐스팅에 실패하면 기본 UICollectionViewCell을 반환합니다.

 

indexPath.item은 현재 섹션의 몇 번째 아이템인지를 나타내며, 이를 통해 list 배열에서 해당 아이템을 가져와 셀을 구성합니다.

 

extension FrameworkListViewController: UICollectionViewDelegateFlowLayout {
    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
        
        let interItemSpacing: CGFloat = 10
        let padding: CGFloat = 16
        
        let width = (collectionView.bounds.width - interItemSpacing * 3 - padding * 2) / 4
        let height = width * 1.5
        
        return CGSize(width: width, height: height)
    }
    
    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumInteritemSpacingForSectionAt section: Int) -> CGFloat {
        return 10
    }
    
    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumLineSpacingForSectionAt section: Int) -> CGFloat {
        return 10
    }
}

UICollectionViewFlowLayout으로 셀의 배치를 설정해줍니다.

 

extension FrameworkListViewController: UICollectionViewDelegate {
    func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {
        let framework = list[indexPath.item]
        print("selected: \(framework.name)")
    }
}

delegate 프로토콜에서 아이템을 선택했을 때 선택한 아이템의 이름을 print하도록 구현했습니다.