[swift] collectionview 사용하기

안녕하세요~! kai입니다.
이 시간에는 CollectionView를 어떻게 사용하는지 보겠습니다.

보통 화면에서 UIViewController, CollectionView, CollectionViewCell를 사용은
아래와 같은 순서로 합니다.

* StoryBoard안의 UIViewController, CollectionView, CollectionViewCell와 소스파일를 연결하기
  StoryBoard안의 object <-연결-> 소스파일

1. StoryBoard에 UIViewController, ColletionView(CollectionViewCell을 안에 자동으로 포함함)를 추가합니다.
   
2. 소스파일을  새로 만듭니다.(만든 UIViewController을 연결하기 위한)
 - UIViewController를 우리가 원하는 대로 설정하기 위해서 UIViewController를 상속하는 클래스를 만듭니다.
   1) XCode에서 File - New - File을 선택합니다.
   2) 나타난 네모상자에서 IOS - Cocoa Touch Class를 선택하고 Next를 누릅니다.
   3) Class에 원하는 이름을 쓰고 SubClass of에 상속하고자 하는 클래스 이름을 씁니다.
       Language는 swift를 선택합니다. Next를 누릅니다.
   4) 저장하기 원하는 경로를 선택하고 Create를 누릅니다.

3. StoryBoard의 UIViewController, ColletionView를 소스와 연결합니다.
 - UIViewController 연결
 1) StoryBoard에서 원하는 UIViewController를 선택합니다.
   Identity inspector - Custom Class - Class에 소스에서 작성한 UIViewController를 상속받은 class이름을 적습니다. 

 - CollectionView 연결
 1) storyboard에서 CollectionView를 마우스의 왼쪽 버튼을 눌러 선택합니다. 
    control키를 누른 상태+마우스 왼쪽 버튼을 누른 상태로 마우스를 움직여 UIViewController로 이동합니다.
    마우스 왼쪽 버튼에서 손을 뗍니다. 손을 떼면 네모상자가 나오고 dataSource와 delegate를 마우스 왼쪽 버튼으로 누릅니다.
    마우스 왼쪽 버튼을 누르면 바로 네모상자가 없어집니다.
    선택된 것 확인을 위해서 다시 위의 방법을 반복해서 CollectionView -> UIViewController를
    마우스로 누른채로 끌어 이동하면 네모상자가 나오고 선택된 항목 왼쪽에 동그라미가 표시됩니다. 

    *shift를 누르고 마우스 왼쪽 버튼을 누르면 네모상자가 없어지지 않아서 다른 선택사항을 여러개 선택가능합니다.

CollectionView를 StoryBoard에서 소스와 연결하기

4. 소스파일을  새로 만듭니다.(만든 CollectionViewCell을 연결하기 위한)
- CollectionViewCell을 우리가 원하는 대로 설정하기 위해서 CollectionViewCell을 상속하는 클래스를 만듭니다.
   2. 번과 같이 CollectionViewCell을 상속하는 클래스를 새로운 파일에 만듭니다.

5. CollectionViewCell의 크기와 위치를 조절합니다.
5. CollectionView의 autolayout을 통해서 화면에 맞는 기본 위치 및 크기를 조정합니다.
6. 상속 받는 class에 protocol를 작성하여 화면에 실제에서 그리기 및 동작을 제어합니다.
   1) CollectionView안에 몇개의 셀을 표시
   2) CollectionView안의 어떻게 셀을 표시할 것인가?
   3) 헤더뷰는 어떻게 표시할 것인가?
   4) 클릭했을 때 어떻게 처리할 것인가?
   5) 셀의 크기를 어떻게 할까?

class HomeViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
    }
}

extension HomeViewController: UICollectionViewDataSource {
    // 몇개 표시 할까?
    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        
    }
    
    // 셀 어떻게 표시 할까?
    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        
    }
    
    // 헤더뷰 어떻게 표시할까?
    func collectionView(_ collectionView: UICollectionView, viewForSupplementaryElementOfKind kind: String, at indexPath: IndexPath) -> UICollectionReusableView {
        
    }
}

extension HomeViewController: UICollectionViewDelegate {
    // 클릭했을때 어떻게 할까?
    func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {
       
    }
}

extension HomeViewController: UICollectionViewDelegateFlowLayout {
    // 셀 사이즈 어떻게 할까?
    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
  
    }
}