[IOS] UICollectionView 기본 사용

collectionView의 사용은 tableView와 비슷합니다.

cell의 틀을 만들어두고 이를 가져와 사용합니다.

 

cell은 xib또는 스토리보드에서 만들어 사용합니다.

 

일단 extension을 사용하기 위해 위임을 해주어야합니다. 이 작업을 하지 않으면 작동이 안됩니다.

// viewDidLoad에 작성
self.collectionView.collectionViewLayout = UICollectionViewFlowLayout()
self.collectionView.delegate = self
self.collectionView.dataSource = self

 

이제 extension으로 다음을 추가하고 원하는 대로 커스텀 하시면 됩니다.

(extension이 아니라 그냥 protocol을 채택해도 가능하지만 가독성이 떨어집니다,)

extension StarViewController: UICollectionViewDataSource {
    
    // 필수
    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return "cell 숫자"
    }
    
    // 필수
    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
    	// 재사용할 cell 가져오기
        guard let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "cell에 설정한 identifier", for: indexPath) as? "재사용call class" else {return UICollectionViewCell()}

		// cell 정보 커스텀 하기
        
        return cell
    }
    
    
}

extension StarViewController: UICollectionViewDelegate {
    // cell선택시 실행될 method
    func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {
    	// 다른 ViewController Push 예시
        guard let viewController = self.storyboard?.instantiateViewController(withIdentifier: "스토리보드 identifier 지정") as? "viewController Class" else {return}
        self.navigationController?.pushViewController(viewController, animated: true)
    }
}

// flow latouy
extension StarViewController: UICollectionViewDelegateFlowLayout {
    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
   		// 예시: cell의 크기 스크린의 넓이와 높이 100
        return CGSize(width: UIScreen.main.bounds.width, height: 100)
    }
}

 

inSet 설정(웹에서 margin 같은 개념)

// 10씩 margin을 주는 느낌
self.collectionView.contentInset = UIEdgeInsets(top: 10, left: 10, bottom: 10, right: 10)