🎛 Collection View
UICollectionView 는 여러 데이터를 커스텀 가능한 레이아웃을 사용해 사용자에게 보여줄 수 있는 객체입니다.
사용법이나 큰 틀은 앞서 공부한 Table View 와 크게 다르지 않습니다. 이번에도 역시 View Controller 위에 Collection View 를 추가하는 방식을 통해서 Collection View 를 구현해보겠습니다.
1 ) Collection View Cell 만들기
지난시간에 XIB 파일 형식으로 Table View Cell 을 만든것과 동일하게 Collection View Cell 을 만듭니다.
저번에 XIB 형태로 cell 을 만들면 해당 cell 을 중복해서 사용하기에 용이하다고 설명했었는데 Xib 파일과 Nib 의 차이점을 설명하지 않아서 간단하게 짚고 넘어가겠습니다.
xib: Xml Interface Buildernib: Next Interface Builder
이 둘의 기능은 동일합니다. 실제로 xib 파일을 컴파일하게 되면 바이너리 형식으로 변형되어 nib 파일이 됩니다.
그럼, 우리는 왜 굳이 xib 파일을 사용할까요?
❗️nib 파일이 바이너리 형식이기 때문에 사람이 읽고 이해할 수 있는 형태가 아니기 때문입니다.
사람이 코드를 보고 이해할 수 없기 때문에 버전관리에도 어려움이 있기 때문에 사람이 보고 이해할 수 있는 xib 파일과 함께 사용합니다.
그럼 xib 파일로 우리가 사용할 cell 을 만들고 사용할 때는 nib 형태로 바꿔서 등록하던 과정이 왜 필요했던 것인지 이해 할수 있습니다!!
❗️ identifier 설정 잊지말기!!
2 ) Collection View 추가
Collection View 를 구성할 cell 의 디자인을 마쳤으니 ViewController 에 Collection View 를 추가하는 과정이 필요합니다.
우리는 Collection ViewController 가 아닌 일반적인 View Controller 에서 Collection View 를 사용하기 때문에
CollectionViewDelegate, CollectionViewDataSource 프로토콜을 채택하는 과정이 필요합니다.
이와 같은 패턴을 Delegate Pattern 이라고 합니다.
extension StudyCollectionViewController:
UICollectionViewDelegate, UICollectionViewDataSource {
func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
}
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
}우선, 위와 같이 현재 ViewController 의 클래스 파일에 extension 을 이용해 사용할 프로토콜들을 추가해줍니다.
(ViewController 라는 알바생이 할 일들을 정리)
class StudyCollectionViewController: UIViewController {
@IBOutlet weak var collectionView: UICollectionView!
override func viewDidLoad() {
super.viewDidLoad()
collectionView.delegate = self
collectionView.dataSource = self
let nibNmae = UINib(nibName: "StudyCollectionViewCell ", bundle: nil)
collectionView.register(nibNmae, forCellWithReuseIdentifier: StudyCollectionViewCell.identifier)
}
}그리고 위임자를 정해주는 과정이 필요합니다.
collectionView 라는 사장이 StudyCollectionViewController(self) 가 알바생임을 선언
Delegate Pattern 에 대해서 더 알게되면 자세하게 따로 정리하겠습니다.3 ) Collection View Layout 설정
UICollectionView FlowLayout 을 사용하면, 컬렉션 뷰의 셀을 원하는 형태로 정렬할 수 있습니다.
TableView 에서는 cell 을 설정하면서, 해당 cell 이 어떻게 나올지 설정했었는데(높이) Collection View 는 FlowLayout 클래스를 통해서 설정합니다.
부스토코스 이미지를 사용했습니다!
를 통해서, FlowLayout의 다양한 프로퍼티들을 확인 할 수 있습니다.
🏷 P.S.
어제 custom cell 내부에 존재하는 버튼을 통해서 어떤 동작을 구현하려고 하는걸 실패했었는데 오늘 수업시간에 배운 addTarget 과 tag 를 이용해서 성공했습니다!!
override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
guard let cell = tableView.dequeueReusableCell(withIdentifier: "MainTableViewCell", for: indexPath) as? MainTableViewCell else {
return UITableViewCell()
}
let row = tvShowInformation.tvShow[indexPath.row]
cell.totalView.clipsToBounds = true
cell.totalView.layer.cornerRadius = 10
cell.genreLabel.text = row.genre
cell.releaseDayLabel.text = row.releaseDate
cell.titileLabel.text = row.title
cell.rateLabel2.text = " \(row.rate) "
cell.overViewLabel.numberOfLines = 1
cell.overViewLabel.text = row.starring
let url = URL(string: row.backdropImage)
let data = try? Data(contentsOf: url!)
cell.posterImageView.image = UIImage(data: data!)
cell.detailButton.tag = indexPath.row
cell.detailButton.addTarget(self, action: #selector(detailButtonClicked(selectButton:)), for: .touchUpInside)
return cell
}@objc
func detailButtonClicked(selectButton: UIButton) {
let sb = UIStoryboard(name: "Main", bundle: nil)
let vc = sb.instantiateViewController(withIdentifier: "DetailViewController") as! DetailViewController
print(tvShowInformation.tvShow[selectButton.tag].title)
//이렇게 바로 넣으면 오류
//vc.titleLabel?.text = tvShowInformation.tvShow[selectButton.tag].title
vc.movieLable = tvShowInformation.tvShow[selectButton.tag].title
present(vc, animated: true, completion: nil)
}까먹기전에 코드를 한 번 정리하겠습니다.
우선, 우리가 디자인한 커스템 셀에 존재하는 어떤 버튼을 눌렀을 때, 화면전환 (show) 이 되고, 전환된 화면의 Label 을 해당 셀의 정보를 넘겨주는 것이 목표 입니다.
각 셀마다 다른 정보가 존재하는데 그런 정보를 화면전환 된 Label 에 표시해야 하기 때문에, 각 cell 의 indexPath 정보가 필요합니다.
하지만 cell 클래스 파일, viewcontroller 클래스 파일에서 indexPath 정보를 사용할 수 없습니다.
이때, tag 를 사용합니다!
cell.detailButton.tag = indexPath.row
해당 코드를 통해서 tableview 에서 각 cell 을 만들때, cell 의 버튼에 해당 cell 의 indexPath.row 를 tag 로 저장합니다!
그리고 addTarget 을 통해서 각 셀의 버튼을 눌렀을 때, 어떤 동작을 할지 함수로 설정합니다.
해당 함수를 detailButtonClicked 라는 이름의 함수로 설정했습니다. 이는 어제 공부한 passData 와 동일합니다.
그냥 바로 전환될 화면의 Label 에 값을 넣도록 설정하면 오류해당함수를 사용할 때 전달인자가 없어도 버튼에서 메서드를 호출해서 자동으로 설정됩니다.
컬렉션뷰나 테이블뷰는 개념 공부만이 아니라 절대적으로 제가 원하는 화면을 만들어 보는 과정이 필요한것 같습니다.
앞으로, 더 많이 만들어보면서 추가적으로 계속해서 정리할 수 있도록 하겠습니다!
