(iOS/swift4) UICollectionView 예제

---

What is UICollectionView ? 

Apple 개발자 사이트에서 UICollectionView 를 소개하는 이미지

** 안드로이드의 RecyclerView -> GridLayoutManager 

How to implement UICollectionView ?

Step 1) Create Project

구현을 위해 싱글 뷰 앱 프로젝트를 생성하자.

Step 2) add Collection View controller in storyboard

Main.storyboard 를 열어 기존에 존재하는 view controller 를 삭제한다.

빈 스토리보드에 Navigation Controller 를 추가한다.

Navigation Controller 에 기본적으로 달려있는 root view controller 를 삭제하고, 

Collection View Controller 를 추가한다.

위와 같이 네비게이션 컨트롤러에서 마우스 오른쪽버튼을 눌러 Collection View Controller 와 Relationship Segue 로 연결한다.

그리고 다시 네비게이션 컨트롤러를 선택하여 시작지점을 정해준다.

CollectionViewController 를 ViewController.swift 와 연결시켜준다.

Step 3) ViewController.swift 의 확장 class 변경

ViewController.swift 로 들어가 아래와 같이 UIViewController -> UICollectionViewController 로 변경해준다.

Step 4) Collection View Cell .swift 생성

프로젝트에 new file > Cocoa touch class 를 눌러 Collection View Cell Class 를 만들자

다시 Main Story board 로 돌아와 Collection View Controller 안의 작은 네모 박스를 선택해 CollectionViewCell과 연결해 준다.

Collection reusable View 에 MyCell 을 적어준다.

Step 5) Cell 꾸미기

방금 본 Cell에 Label 하나를 추가해보자.

추가한 라벨을 CollectionViewCell.swift 에 추가한다.

Step 6) item 설정

ViewController 를 열어 Collection View 에 들어갈 item list 를 다음과 같이 설정한다.

Step 7) DataSource 확장

ViewController.swift 에 아래와 같이 DataSource func 들을 오버라이드 한다.

import UIKit

class ViewController: UICollectionViewController {

    var collectionItems = [String]()

    

    override func viewDidLoad() {

        super.viewDidLoad()

        

        setCollectionItems()

    }

    

    func setCollectionItems() {

        collectionItems = [

            "Apple",

            "Samsung",

            "LG",

            "Sky",

            "Huawei",

            "Xiaomi",

            "Window",

            "Nokia"

        ]

    }

    

    

    //********** 추가되는 부분 ***************

    // MARK: - CollectionView DataSource

    override func numberOfSections(in collectionView: UICollectionView) -> Int {

        return 1

    }

    

    override func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {

        return collectionItems.count

    }

    

    override func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {

        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "MyCell", for: indexPath) as! CollectionViewCell

        

        //  Configure the Cell

        cell.collectionViewTest.text = collectionItems[indexPath.row]

        return cell

    }

    //********** 추가되는 부분 ***************

}

Step 9) 실행

우선 실행해보자

아래와 같은 화면이 뜬다면 성공

** 3개씩 일정하게 나오긴하는데....

글자도 잘리고 3개말고 내가 지정한 갯수만큼 나오게 하고 싶다.

다음편에 계속...

****** [전체 코드 ] *****

ViewController.swift

import UIKit

class ViewController: UICollectionViewController {

    var collectionItems = [String]()

    

    override func viewDidLoad() {

        super.viewDidLoad()

        

        setCollectionItems()

    }

    

    func setCollectionItems() {NSLog("setCollectionItems")

        collectionItems = [

            "Apple",

            "Samsung",

            "LG",

            "Sky",

            "Huawei",

            "Xiaomi",

            "Window",

            "Nokia"

        ]

    }

    

    

    // MARK: - CollectionView DataSource

    override func numberOfSections(in collectionView: UICollectionView) -> Int {

        return 1

    }

    

    override func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {

        return collectionItems.count

    }

    

    override func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {

        

        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "MyCell", for: indexPath) as! CollectionViewCell

        

        //  Configure the Cell

        cell.collectionViewTest.text = collectionItems[indexPath.row]

        return cell

    }

    

    

}

CollectionViewCell.swift

import UIKit

class CollectionViewCell: UICollectionViewCell {

    @IBOutlet var collectionViewTest: UILabel!

}

---