CollectionView 정리
첫번째 포스팅으로 CollectionViewController을 사용하지 않고
ViewController 에 CollectionView을 넣어서 구현하는 것을 정리해 보도록 하겠습니다.
1. 스토리보드에 ViewController 를 만들어 주고
2.Collection view 를 ViewController 에 넣어줍니다.
3. 새로운 파일로 CocoaToucClass 에서 CollectionViewCell 을 만들어 줍니다.
이때 subclass of 밑에 체크박스를 눌러서 XIB 파일을 만들고
cell에 들어갈 요소를 따로 스토리보드 상에서 작업해 주도록 하겠습니다.
저는 간단하게 Label 하나 넣었습니다.
그리고 CollectionViewCell.swift 파일에 스토리보드에서 작업한 요소들을
꼭 outlet 으로 연결해줍시다.
4. CollectionViewCell 스토리보드 우측 identity 인스펙터 영역에서
꼭꼭꼭 Identity 를 선언해 줍시다!!
이제 스토리보드 에서 작업은 끝났습니다!
이제 코드에서 구현을 해봅시다.
5. 셀 파일의 identifier 을 변수로 선언
// TestCollectionViewCell
import UIKit
class TestCollectionViewCell: UICollectionViewCell {
static let identifier = "TestCollectionViewCell"
override func awakeFromNib() {
super.awakeFromNib()
}
}저는 나중에 복붙을 방지하기 위해서
Cell 파일에 identifier 을 변수로 선언하는데
뎍분에 실수도 줄고 코딩도 편해졌습니다!
6. UIViewController 에서 UICollectionViewDelegate, UICollectionViewDataSource 프로토콜 사용
//testCollectionView class
//TestViewController에 UICollectionViewDelegat 와 UICollectionViewDataSource protocol 사용
extension TestViewController: UICollectionViewDelegate, UICollectionViewDataSource {
func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
return 15
}
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
guard let cell = testCollctionView.dequeueReusableCell(withReuseIdentifier: TestCollectionViewCell.identifier,
for: indexPath) as? TestCollectionViewCell else{return UICollectionViewCell()}
//cell의 배경 색 지정
cell.backgroundColor = .systemMint
return cell
}
}프로토콜을 사용하면 numberOfItemsInSection , cellForItemAt 2개의 메서드는 필수적으로 사용해야 합니다.
항상 고치라고 뜨는거 보고 Fix 누릅니다....
cell 을 선언해주셔야 하는데요, 요즘에 자주 써먹는 guard let 구문으로 작성해주었습니다.
여기서! withReuseIdentifier 에는 아까 cell 파일에서 선언했던 identifier 을 써주도록 합시다~
추가로 cell 을 보다 쉽게 확인하기 위해 배경색도 지정해주겠습니다.
이쯤되면 될법도 한데? 하는 생각이지만 이 다음이 진짜 중요합니다 ㅋㅋㅋㅋㅋ
7. viewDidLoad 에 delegate 와 dataSource 연결, cell register 작성
//testCollectionView class
override func viewDidLoad() {
super.viewDidLoad()
testCollctionView.delegate = self
testCollctionView.dataSource = self
//register 에 넣어줄 nibName 작성
let nibName = UINib(nibName: TestCollectionViewCell.identifier, bundle: nil)
//register 코드 작성
testCollctionView.register(nibName, forCellWithReuseIdentifier: TestCollectionViewCell.identifier)
}register 은 XIB 파일에서 작업하고 만들 셀을 collectionView 에서
사용하겠다고 작성해주는 것입니다.
nibName 부분에도 cell파일에서 선언한 identifier 을 적어주도록 할게요
아무리 이쁜 셀 을 만들었다고 해도 보이지 않으면 소용이 없죠..
실제로 실행했는데 아무것도 안보인다?!
제일 처음으로 확인하는 곳이기도 합니다.
이렇게까지 하고 실행을 똭! 해보면?!
음... 제가 생각했던 것과는 다른 결과입니다 ㅠㅠ
셀에대한 layout 를 UICollectionFlowLayout 으로 설정해줘야 합니다!
아래 사진은 UICollectionFlowLayout 의 프로퍼티들을 정리해본 노트입니다.
8. FlowLayout 작성하기
//testCollectionView class
override func viewDidLoad() {
super.viewDidLoad()
//반드시 채택해야하는 프로토콜
testCollctionView.delegate = self
testCollctionView.dataSource = self
let nibName = UINib(nibName: TestCollectionViewCell.identifier, bundle: nil)
//register 코드 작성
testCollctionView.register(nibName, forCellWithReuseIdentifier: TestCollectionViewCell.identifier)
//cell Layout
let layout = UICollectionViewFlowLayout()
let spacing: CGFloat = 20
let width = UIScreen.main.bounds.width - (spacing*3)
layout.itemSize = CGSize(width: width/2, height: width/2)
//셀과 베젤사이 간격
layout.sectionInset = UIEdgeInsets(top: spacing, left: spacing, bottom: spacing, right: spacing)
//셀과 셀 사이 간격
layout.minimumLineSpacing = spacing
layout.minimumInteritemSpacing = spacing
//스크롤 방향
layout.scrollDirection = .horizontal //가로
// layout.scrollDirection = .vertical //세로
//이것도 꼭 작성해 줘야함
testCollctionView.collectionViewLayout = layout
}위의 그림에서 본 프로퍼티 들을 사용해 봤습니다.
itemSize 는 (기기의 width 에서 셀 사이의 공간(spacing)을
제외한 부분의 width) / (한줄에 들어갈 item 수) 인 정사각형으로 만들어 봤습니다.
이렇게 모든 설정을 하고 실행을 똭!!! 하면!!!
민트색 셀들이 정갈하게 화면에 나오는것을 볼수 있습니다!!!
수정해야 하거나 틀린부분은
언제든지 댓글 달아주세요!