UICollectionView (1)

 

이번 글은 UICollectionView에 대해 간략하게 알아보려고 합니다.

 

우선 공식 문서부터 살펴볼게요.

 

 

An object that manages an ordered collection of data items and presents them using customizable layouts.

 

정렬된 아이템 collection을 관리하고, 그 collection을 커스텀 가능한 layout을 사용해서 화면에 출력합니다.

 

 

 

The collection view gets its data from the data source object, stored in the collection view’s dataSource property.

For your data source, you can use a UICollectionViewDiffableDataSource object, which provides the behavior you need to simply and efficiently manage updates to your collection view's data and user interface.

Alternatively, you can create a custom data source object by adopting the UICollectionViewDataSource protocol.

 

collection 뷰의 데이터는 collection 뷰의 dataSource 프로퍼티에 저장된 data source object에서 가져옵니다.

 

data source는 UICollectionViewDiffableDataSource 객체 또는 UICollectionViewDataSource 프로토콜을 사용합니다.

 

(UICollectionViewDiffableDataSource는 다음 글에서 알아보고 이번 글에서는 익숙한 UICollectionViewDataSource를 사용해볼게요.)

 

 

그리고, UICollectionViewCell 인스턴스를 사용해서 화면에 출력합니다. 

(사진 앱에 있는 사진 하나하나가 UICollectionViewCell인 것이죠.)

 

 

---

 

여기서부턴 직접 구현하면서 해볼게요.

(tableView와 구현 방식은 매우 유사합니다.)

 

 

스토리보드로 가서 'Collection View'를 추가합니다.

 

 

 

collection View를 추가하면 아래처럼 네모칸이 하나 만들어지는데, 이게 바로 prototype item(cell) 입니다.

 

 

 

 

저는 사진 앱처럼 이미지를 출력해줄 것이기 때문에 UIImageView를 item 안에 넣어줄게요.

 

 

 

그리고 오른쪽 탭의 'Attributes inspector'를 살펴보면,

 

 

prototype item의 개수와 layout 타입을 설정할 수 있습니다.

 

Items는 tableView와 비슷한 느낌이니 넘어가고....

 

 

 

Layout에 대해 간단하게 설명해보자면,

 

Layout은 UICollectionViewLayout 클래스의 일종입니다.

 

Layout이 설정되어 있으면, Collection view가 layout 정보를 사용해서 contents를 그립니다.

 

 

 

스토리보드에서 선택할 수 있는 Layout 종류는 Flow, Custom 이렇게 2가지가 있는데요,

 

Layout을 Flow로 설정하면 UICollectionViewFlowLayout 객체를 그대로 사용하는 것이고, Custom을 선택하면 Layout을 직접 커스텀해서 쓰겠다!! 의 의미예요.

 

그리고 Scroll Direction의 vertical의 의미는 스크롤을 수직으로 한다는 의미겠죠??

 

출처 : Apple Document

 

 

Layout에 대한 설명은 일단 여기까지 하고요, 이번 글에서는 Layout을 Flow로 설정하고 진행해볼게요.

 

 

 

일단은 화면에 출력할 이미지 리소스들을 Assets에 넣어주고

 

 

 

UICollectionViewCell을 상속받은 'MyCustomCell' 클래스를 만들어줄게요.

 

class MyCustomCell: UICollectionViewCell {
    static let cellId: String = "myCustomCell"
    @IBOutlet weak var image: UIImageView!
}

 

 

item(cell)을 reuse 하기 위해 cellId를 storyboard에도 등록해줍시다.

 

 

 

 

 

 

 

이제 ViewController로 이동해서 화면에 출력할 data를 만들어주고 collectionView에 delegate, dataSource를 설정해줍시다.

 

class ViewController: UIViewController {
    private var data = (0...21).map{ String($0) + ".png" }
    @IBOutlet weak var collectionView: UICollectionView!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        collectionView.delegate = self
        collectionView.dataSource = self
    }
}

 

 

그럼 당연히 delegate와 dataSource 프로토콜을 채택 & 준수해야겠죠??

 

extension ViewController: UICollectionViewDelegate, UICollectionViewDataSource {
    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return data.count
    }
    
    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: MyCustomCell.cellId, for: indexPath) as! MyCustomCell
        cell.image.image = UIImage(named: data[indexPath.row])
        cell.image.contentMode = .scaleAspectFill
        return cell
    }
}

 

 

collection view를 출력하기 위한 구현은 끝났습니다!!

 

 

이제 빌드해보면

 

 

 

회전도 깔끔하게 잘 됩니다!!! ㅎㅎㅎㅎ 👍 👍 👍

 

 

 

---

 

UICollectionView가 생각보다 양이 많네요...ㅠㅠ

 

- item insert, delete, move

- Section, Header, Footer 뷰

- Custom Layout

- UICollectionViewDiffableDataSource

- 등등...

 

나머지 부분은 다른 글에서 자세히 다뤄보도록 할게요.

 

이번 글은 여기서 마무리.