[iOS : Toy Project] Apple Music App (3) : UICollectionViewCell 업데이트

이전 포스팅

- AppleMusicApp(1) : 뷰 구성

- AppleMusicApp(2) : Track 모델 (데이터 구조)

 

자세한 코드는 여기로!

https://github.com/yexjin/iOS_Study/tree/main/AppleMusicApp

GitHub - yexjin/iOS_Study: iOS 토이프로젝트 모음집📱

 

 

이전 포스팅에서 TrackModel을 통해 Track 폴더에서 데이터구조를 완성했었다.

이번 포스팅은 이 모델 객체를 통해 HomeView의 collection view cell을 업데이트 시켜보겠다.

 

---

9/13

Track 모델을 통해 Cell을 업데이트 안시켰던 화면

 

이제 이 cell들을 채워넣어볼까?!

 

1️⃣ HomeViewController에 Track 모델 (트랙 관리 모델) 추가

class HomeViewController: UIViewController {
    // TODO: 트랙관리 객체 추가
    let trackManager: TrackManager = TrackManager()
    
    override func viewDidLoad() {
        super.viewDidLoad()
    }
}

 

2️⃣ DataSource 수정

extension HomeViewController: UICollectionViewDataSource {
    // 몇개 표시 할까?
    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        // TODO: 트랙매니저에서 트랙갯수 가져오기
        // 사용할 cell의 개수 = track 개수
        return trackManager.tracks.count
    }
    
    // 셀 어떻게 표시 할까?
    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        // TODO: 셀 구성하기
        guard let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "TrackColletionViewCell", for: indexPath) as? TrackColletionViewCell else {
            return UICollectionViewCell()
        }
        
        // cell의 UI 업데이트 과정이 필요 -> TrackCollectionViewCell.swift에 구현
        
        return cell
}

 

3️⃣ TrackCollectionViewCell.swift에 Cell의 UI 업데이트 함수 작성

//  TrackCollectionViewCell.swift

// cell 업데이트 메소드
func updateUI(item: Track?) {
    // TODO: 곡정보 표시
    guard let track = item else { return }
    trackThumbnail.image = track.artwork
    trackTitle.text = track.title
    trackArtist.text = track.artist
}

guard let을 통해 안전하게 track 받아오고 업데이트!

 

4️⃣ 다시 view controller에서 받아온 track을 통해 cell을 업데이트하는 코드 추가

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

    guard let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "TrackCollectionViewCell", for: indexPath) as? TrackCollectionViewCell else { return UICollectionViewCell()}

    let track = trackManager.track(at: indexPath.item)
    cell.updateUI(item: track)

    return cell
}

 

 

 

🚀 구현 화면

 

 

 

 

 

---

다음 포스팅에서는 Collection Reusable View를 통해 만들었던 Header View를 마무리 지어 보겠다!