[iOS] Rick&Morty - #16 Character Detail ViewModels
이번엔 VM - View - VC를 연결하는 작업을 한다.
Cell의 View와 VM 생성
먼저 Views 그룹에 또다시 CharacterDetails라는 그룹을 만들어 관리하자. 여기서 RMCharacterCollectionViewCell이라는 이름으로 세 가지 셀 파일을 만들어주고 각각 대응되는 VM도 만들어서 그룹으로 묶어준다.
이제 DetailVM에서 SectionType enum으로 가서 Associated value라는것을 추가할 것이다.
enum SectionType {
case photo(viewModel: RMCharacterPhotoCollectionViewCellViewModel)
case information(viewModels: [RMCharacterInfoCollectionViewCellViewModel])
case episodes(viewModels: [RMCharacterEpisodeCollectionViewCellViewModel])
}
Associated value를 추가하면 CaseIterable 프로토콜을 준수하지 못 하게 된다. 아쉽지만 자동으로 해결하지 않고 수동으로 구현하자. init에서 더미 VM을 생성해 본다. 일단 레이아웃 구성용으로 올려놓은 거라 대충 해도 된다.
final class RMCharacterDetailViewViewModel {
...
enum SectionType {
case photo(viewModel: RMCharacterPhotoCollectionViewCellViewModel)
case information(viewModels: [RMCharacterInfoCollectionViewCellViewModel])
case episodes(viewModels: [RMCharacterEpisodeCollectionViewCellViewModel])
}
public var sections: [SectionType] = []
// MARK: - Init
init(character: RMCharacter) {
self.character = character
setUpSections()
}
private func setUpSections() {
sections = [
.photo(viewModel: .init()),
.information(viewModels: [
.init(),
.init(),
.init(),
.init()
]),
.episodes(viewModels: [
.init(),
.init(),
.init(),
.init()
])
]
}
...
}
다음은 데이터소스 작업이다. VC에서 데이터소스를 다루려면 numberOfItemsInSection을 봐야한다. section을 번호로 구분하기 때문에 우리가 위에서 생성해 둔 RMCharacterDetailViewViewModel의 sections에서 case로 받아와서 처리한다. 이렇게 안 하고 그냥 0, 1, 2로 해도 상관은 없지만 좋은 방법이라 할 수는 없을 듯하다.
- cellForItemAt에서 그냥 번호로 인식하는 방법을 나타냈다.
생성된 Cell VM의 수에 따라 item의 개수를 리턴하는 작업을 하고 색상을 칠하자.
extension RMCharacterDetailViewController: UICollectionViewDelegate, UICollectionViewDataSource {
func numberOfSections(in collectionView: UICollectionView) -> Int {
return viewModel.sections.count
}
func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
let sectionType = viewModel.sections[section]
switch sectionType {
case .photo:
return 1
case .information(let viewModels):
return viewModels.count
case .episodes(let viewModels):
return viewModels.count
}
}
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "cell", for: indexPath)
if indexPath.section == 0 {
cell.backgroundColor = .systemPink
} else if indexPath.section == 1 {
cell.backgroundColor = .systemBlue
} else {
cell.backgroundColor = .systemGreen
}
return cell
}
}
멋지게 셀이 잡힌걸 볼 수 있다. 아직 각 cell은 컬렉션 뷰와 연동이 안되어 있다.
Cell 연동
아래와 같은 방법으로 세 가지의 Cell에 Identifirer를 생성하자.
final class RMCharacterEpisodeCollectionViewCell: UICollectionViewCell {
static let cellIdentifier = "RMCharacterEpisodeCollectionViewCell"
}
createCollectinoView에서 register를 만들어 셀을 등록하고 실행해 보자.
final class RMCharacterDetailView: UIView {
...
private func createCollectionView() -> UICollectionView {
...
collectionView.register(RMCharacterPhotoCollectionViewCell.self,
forCellWithReuseIdentifier: RMCharacterPhotoCollectionViewCell.cellIdentifier)
collectionView.register(RMCharacterInfoCollectionViewCell.self,
forCellWithReuseIdentifier: RMCharacterInfoCollectionViewCell.cellIdentifier)
collectionView.register(RMCharacterEpisodeCollectionViewCell.self,
forCellWithReuseIdentifier: RMCharacterEpisodeCollectionViewCell.cellIdentifier)
...
}
}
터진다.
로그를 읽어보자.
Thread 1: "could not dequeue a view of kind: UICollectionElementKindCell
with identifier cell - must register a nib or a class for the identifier or
connect a prototype cell in a storyboard"
로그를 읽어보면 VC에서 Cell을 디큐할때 cell이라는 식별자로 빼기 때문이다. 이 문제에서 우리가 해줘야 하는 점은 동적으로 타입에 맞게 디큐를 해야 한다. 이제 item의 수를 정했던것과 유사하게 스위치를 이용하여 구현해 보자. sectionType을 구현하고 각 경우에 맞게 cell을 따로 만들어서 적용해 주자.
extension RMCharacterDetailViewController: UICollectionViewDelegate, UICollectionViewDataSource {
...
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
let sectionType = viewModel.sections[indexPath.section]
switch sectionType {
case .photo(let viewModel):
guard let cell = collectionView.dequeueReusableCell(
withReuseIdentifier: RMCharacterPhotoCollectionViewCell.cellIdentifier,
for: indexPath
) as? RMCharacterPhotoCollectionViewCell else {
fatalError()
}
cell.backgroundColor = .systemPink
return cell
case .information(let viewModels):
guard let cell = collectionView.dequeueReusableCell(
withReuseIdentifier: RMCharacterInfoCollectionViewCell.cellIdentifier,
for: indexPath
) as? RMCharacterInfoCollectionViewCell else {
fatalError()
}
cell.backgroundColor = .systemBlue
return cell
case .episodes(let viewModels):
guard let cell = collectionView.dequeueReusableCell(
withReuseIdentifier: RMCharacterEpisodeCollectionViewCell.cellIdentifier,
for: indexPath
) as? RMCharacterEpisodeCollectionViewCell else {
fatalError()
}
cell.backgroundColor = .systemGreen
return cell
}
}
}
Test
똑같은 화면이지만 이제 Cell이 연결되어 데이터를 활용할 수 있게 됐다.
이제 Cell의 기본설정을 완료하고 모든 셀에 적용시켜주자. 기본적으로 해야 하는 것은 지난번과 같이 init들, constraints 설정, prepareForReuse와 configure다.
final class RMCharacterEpisodeCollectionViewCell: UICollectionViewCell {
static let cellIdentifier = "RMCharacterEpisodeCollectionViewCell"
override init(frame: CGRect) {
super.init(frame: frame)
}
required init?(coder: NSCoder) {
fatalError()
}
private func setUpConstraints() {
}
override func prepareForReuse() {
super.prepareForReuse()
}
public func configure(with viewModel: RMCharacterEpisodeCollectionViewCellViewModel) {
}
}
이제 VC로 가서 configure 메서드의 매개변수로 viewModel을 받자. 복수를 가져야 하는 info와 episodes의 경우에는 viewModel [indexPath.row]로 cellForItemAt으로부터 데이터를 받아 처리한다.
extension RMCharacterDetailViewController: UICollectionViewDelegate, UICollectionViewDataSource {
...
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
...
case .photo(let viewModel):
...
cell.configure(with: viewModel)
...
return cell
case .information(let viewModels):
...
cell.configure(with: viewModels[indexPath.row])
...
return cell
case .episodes(let viewModels):
...
cell.configure(with: viewModels[indexPath.row])
...
return cell
}
}
}
Cell에 VM을 붙였다. 다음시간에 데이터를 실제로 주입해서 표현해보자
끝